@charset "utf-8"

@import url('../font/iosevka-aile.css')
@import url('../font/iosevka-etoile.css')
@import url('../font/iosevka.css')

@function make-light($c)
  @return scale-color($c, $lightness: 30%, $saturation: -25%)

@function make-lighter($c)
  @return scale-color($c, $lightness: 60%, $saturation: -50%)

$family-sans-serif: "Iosevka Aile Web", sans-serif
$family-serif: "Iosevka Etoile Web", serif
$family-monospace: "Iosevka Web", monospace

$turquoise: #236863
$blue: #2D4471
$brown: #552500
$turquoise-light: make-light($turquoise)
$turquoise-lighter: make-lighter($turquoise)
$blue-light: make-light($blue)
$blue-lighter: make-lighter($blue)
$brown-light: make-light($brown)
$brown-lighter: make-lighter($brown)

$family-primary: $family-serif

$link: $turquoise


@import '../../node_modules/bulma/bulma.sass'

@import '_code.scss'

body
  font-size: 14px

h1, h2, h3, h4, h5, h6
  font-family: $family-sans-serif
  color: $brown

  &:before
    color: $brown-lighter

  a
    color: inherit

h1
  font-size: $size-large

  &:before
    content: "# "

h2, .content h2
  font-size: $size-medium

  &:before
    content: "## "

h3, .content h3
  &:before
    content: "### "

h3, h4, h5, h6, .content h3, .content h4, .content h5, .content h6
  font-size: $body-font-size

h5, h6, .content h5, .content h6
  font-style: italic

h6, .content h6
  font-weight: normal

.content
  strong:before, strong:after
    content: "*"

  em:before, em:after
    content: "_"

  a
    text-decoration: underline

  ul
    *:marker
      font-weight: bold

    list-style-type: "* "
    ul
      list-style-type: "+ "
      ul
        list-style-type: "- "

    +mobile
      &.taxonomy-list.tags-list
        column-count: 2
    +tablet-only
      &.taxonomy-list.tags-list
        column-count: 3
    +desktop
      &.taxonomy-list.tags-list
        column-count: 4

.summary
  @extend .hero
  @extend .my-5
  @extend .px-3
  @extend .py-5

.link-summary
  @extend .has-background-link-light

.note-summary
  @extend .has-background-info-light

.single, .list
  @extend .my-5
  @extend .px-3
  @extend .py-5

.site-title
  @extend h1

  padding-left: 0

  &:before
    content: none

.site-description
  background-color: $white-ter

#webmentions
  .comments
    max-height: 20em
    overflow-x: hidden
    overflow-y: scroll
    font-size: 80%

    li
      .text
        color: #555
        font-style: italic
        text-decoration: none

      .name
        color: #111

  h2
    font-size: medium
    margin: 0
    padding: 0.5em

    &:first-child
      border-top-left-radius: 0.5em
      border-top-right-radius: 0.5em

  .reacts img
    margin: 3px -1ex 1px 0
    vertical-align: baseline

  ul
    list-style-type: none
    margin: 0
    padding: 4px

  li
    text-indent: -3em
    padding-left: 3em
    padding-bottom: 0.5em

  a.reaction
    position: relative

    margin-right: 0
    margin-right: 1ex

    text-decoration: none
    text-shadow: 0px 0px 3px white

    img
      max-height: 2em
      margin-right: -1ex
      border-radius: 3px

    sub
      font-size: 50%

  .reacts a.reaction
    display: inline-block

  ul
    @extend .menu-list

#current
  font-weight: bold