@import "syntax.scss"
@import "stork.sass"
@import "soudan.sass"
@import "_everforest.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');

$shadow: $ef-bg_dim
$bg0: $ef-bg0
$bg1: $ef-bg1
$bg2: $ef-bg2
$dim: $ef-bg5
$fg: $ef-fg
$primary: $ef-green
$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
h1, h2, h3, h4, h5, h6
  font-family: 'Roboto Slab', sans-serif
.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]
  max-width: 100%
  box-shadow: $shadow-size $shadow-size $bg0
  border: 2px solid $bg0
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