www.doublefourteen.io/themes/doublefourteen/assets/sass/style.sass

@import "variables"
@import "fonts"

// Some convenience class to manage resolution specific elements
@media only screen and (max-width:600px)
  .on-pc-screen
    display: none !important
@media only screen and (min-width:600px)
  .on-mobile-screen
    display: none !important

@media only screen and (max-width:1200px)
  .on-largest-screen
    display: none !important
@media only screen and (min-width:1200px)
  .up-to-largest-screen
    display: none !important

@media only screen and (max-width:1000px)
  .on-large-screen
    display: none !important
@media only screen and (min-width:1000px)
  .up-to-large-screen
    display: none !important

@media only screen and (max-width:800px)
  .on-small-screen
    display: none !important
@media only screen and (min-width:800px)
  .up-to-small-screen
    display: none !important

@media (prefers-color-scheme:dark)
  .on-light-theme
    display: none !important
@media (prefers-color-scheme:light)
  .on-dark-theme
    display: none !important

*
  box-sizing: border-box
  z-index: $foreground

html, body
  width: 100%
  height: 100%
  min-width: $min-page-width

h1.page-title
  text-align: left
  font-size: $large-font-size
  color: var(--title-text-color)
h1.page-title:first-letter
  text-transform: capitalize

body
  margin: 0
  font-family: var(--sans-font)
  font-size: $sans-font-size
  line-height: $sans-line-height
  color: var(--foreground-color)
  background-color: var(--background-color)
  -webkit-text-size-adjust: 100%
      -ms-text-size-adjust: 100%

code, .goat text
  font-family: var(--mono-font)
  font-size: $mono-font-size
  line-height: $mono-line-height

a
  color: var(--link-color)

  // `:focus` is linked to `:hover` for basic accessibility
  &:hover, &:focus
    color: var(--link-hover-color)

  strong
    color: inherit

a:not(:hover)
  text-decoration: none

.prose-link
  color: var(--prose-link-color)
  opacity: 0.8
  text-decoration: none
  font-weight: bold
  transition: opacity 0.25s ease-in, color 0.25s ease-in, text-shadow 0.15s ease-in

  &:hover, &:focus
    opacity: 1.0
    color: var(--prose-link-hover-color)
    text-shadow: -0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px -0.5px 0 var(--prose-link-shadow-color), -0.5px -0.5px 0 var(--prose-link-shadow-color)


  &:focus
    outline: 1px dotted

.container
  margin: 0 auto
  position: relative
  max-width: $page-width
  padding: 0 0.2em

.external-link-light:after
  background-image: url(/external-link-dark.svg) !important
.external-link:after
  content: ""
  background-image: url(/external-link-light.svg)
  background-size: 10px 10px
  display: inline-block
  width: 10px
  height: 10px
  margin-left: 5px

img
  display: block
  max-width: 100%
  margin-bottom: $spacer
  border-radius: $border-radius

table
  margin-bottom: $spacer
  width: 100%
  border: 0 solid var(--border-color)
  border-collapse: collapse

td, th
  padding: .25rem .5rem
  border:
    color: inherit
    style: solid
    width: 0
    bottom-width: 1px

th
  text-align: left

thead th
  border-bottom-color: currentColor

.header
  display: flex
  align-items: flex-end

.header-text
  font-size: $large-font-size
  color: var(--title-text-color)
  font-weight: bold
  display: inline-block
  padding: 1em 0.5em 1em 0.5em

.header-image
  background:
    image: url(/doublefourteen-logo-dark.svg)
    repeat: no-repeat

  width: 330px
  height: 180px
  display: inline-block
  margin: 0 0.5em 0 0.5em

.work-in-progress-content
  display: flex
  justify-content: space-between

.work-in-progress-text
  position: relative

.work-in-progress-sign
  width: 400px
  height: 386px
  background:
    image: url(/work-in-progress.png)
    position: bottom right
    repeat: no-repeat
    size: 400px 386px

.get-in-touch
  display: flex
  flex-direction: row
  flex-wrap: wrap
  justify-content: right
  gap: $large-spacer
  margin: $large-spacer $huge-spacer $large-spacer auto

.button, .button:hover
  background-color: transparent
  border: 2px solid $gray-400
  color: var(--heading-color)
  padding: 7px 12px
  display: block
  margin: 10px 0
  font-size: $sans-font-size
  font-weight: 700
  text-decoration: none !important
  a
    display: inline
    text-decoration: none !important
    color: var(--heading-color)
  &:hover
    background-color: var(--highlight-color)

.twitter-button, .email-button
  padding 0px
  > img
    min-width: 16px
    min-height: 16px
    margin-bottom: 0px

.footer-elements
    display: flex
    flex-direction: row
    flex-wrap: wrap
    align-items: stretch
    justify-content: space-between
.footer
  text-align: center
  padding-top: $large-spacer

@media (prefers-color-scheme:dark)
  .external-link:after
    background-image: url(/external-link-dark.svg)
  .header-image
    background-image: url(/doublefourteen-logo-light.svg)

.external-prose-link
  @extend .external-link
  @extend .prose-link

@media only screen and (max-width:800px)
  .work-in-progress-content
    flex-direction: column
  .work-in-progress-text
    text-align: center