@import "syntax.scss"
@import "stork.sass"
@import "soudan.sass"
@import "_theme.sass"
@import "_topography.sass"

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Roboto+Slab&family=Roboto:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');

$padding: 1rem
$shadow-size: 4px

html
  color: $fg
  font-family: 'Roboto', sans-serif
  font-size: 1.2em
  line-height: 1.75
  background-color: #2d353b
  background-image: $topography;
  background-attachment: fixed
body
  margin: 0
header
  & > *
    margin: 0
.site-header
  display: flex
  gap: 1em
  align-items: center
  color: inherit
  text-decoration: none
  h1
    margin-bottom: -0.375em
  img
    height: 5em
    border-radius: 0.5em
    border: 2px solid $primary
h1, h2, h3, h4, h5, h6
  font-family: 'Roboto Slab', sans-serif
  &:first-child
    margin-top: 0
.content
  width: 80ch
  max-width: 100%;
  margin: 2em auto;
.page
  padding: $padding
  background: $bg1
pre
  padding: 1em
  overflow-x: scroll
div
  &.highlight
    position: relative
    &:not([data-lang="text"])::before
      background: $shadow
      z-index: 1
      content: attr(data-lang)
      position: absolute
      right: 0
      top: 0
      padding: 0.25em
      padding-left: 2em
      clip-path: polygon(0 0, 100% 0, 100% 100%, 2em 100%)
div.highlight::before, code, kbd
  font-family: 'Fira Code', monospace
*:not(pre) > code, kbd
  background: $bg0
  padding: 0 0.5em
a
  color: $primary
  &:not(:hover)
    text-decoration: none
pre, .page
  box-shadow: $shadow-size $shadow-size $shadow
img, button, input[type=submit], iframe
  max-width: 100%
  box-shadow: $shadow-size $shadow-size $bg0
  border: 2px solid $bg0
iframe
  display: block
  margin: auto
header
  h2
    margin: 0
blockquote
  margin: 0
  padding-left: 1em
  border-left: 2px solid $primary
hr
  border: 1px solid $dim
nav
  $margin: 1em
  margin: -$padding
  display: flex
  background: $bg2
  font-weight: 300
  justify-content: center
  user-select: none
  &:first-of-type
    margin-bottom: $margin
  &:last-of-type
    margin-top: $margin
  & > :nth-child(2)
    margin-right: auto
  & > :nth-last-child(2)
    margin-left: auto
  & > *
    padding: 2px 0.375em 0
    border-bottom: 2px solid transparent
    text-decoration: none !important
    & > svg
      height: 1em
      vertical-align: middle
      margin-bottom: 0.225em
  & > a
    &:hover
      border-color: $primary
.disabled, footer
  color: $dim
footer
  margin-top: 2em
  text-align: center
button, input[type=submit]
  border: none
  cursor: pointer
  background: $dim
  color: $fg
  padding: 0.125em 0.5em
  &:active
    box-shadow: none;
    transform: translate($shadow-size, $shadow-size)
form
  display: flex
  flex-direction: column
  gap: 0.5em
textarea, input
  font-size: inherit
  font-family: inherit
  color: inherit
textarea, input[type=text], input[type=email], input[type=number]
  border: none
  background: $bg0
  padding: 0.5em
  &:focus
    outline: 1px solid $primary
textarea
  resize: vertical