path: root/sass/style.sass

@import 'responsive_fonts'
@import 'webfonts'

// need to prefix :root with a backslash
// https://github.com/sass/libsass/issues/2511
\:root
  --font-sans: Alegreya Sans, sans
  --font-serif: Alegreya, serif
  --font-mono: Iosevka, Inconsolata, monospace

  --font-size-pre: 80%
  --font-size-quote: 90%

  --fg-color: black
  --fg-color-mute: #5a5a5a
  --fg-color-gutter: #a6a6a6
  --fg-color-pre: black
  --fg-href: #0000ee
  --fg-href-visited: #551a8b

  --bg-color: white
  --bg-color-pre: #ffffc3

  --border-color-light: lightgrey
  --border-color-dark: darkgrey
  --border-color-pre: #e0e0c3

  --border-radius: 4px

@media (prefers-color-scheme: dark)
  \:root
    --fg-color: #f0f0f0
    --fg-color-mute: #7a7a7a
    --fg-href: #7676ff
    --fg-href-visited: #9547dd
    --fg-color-pre: #f0f0f0

    --bg-color: #000000
    --bg-color-pre: #1f1f1f
    --border-color-pre: #2f2f2f

@mixin spacer
  content: '·'
  margin-inline: .2rem

  font-style: normal
  color: var(--fg-color)

a
  text-decoration: none

  &, &:visited
    color: var(--fg-href)

  &:hover
    text-decoration: underline

a.tag
  &, &:visited
    color: var(--fg-color-mute)

  &::before
    content: "#"

h2#related
  grid-column: main

  display: flex
  align-items: center

  margin: 0

h2.title
  display: inline-block
  margin: 0

  font-size: inherit
  font-style: italic
  font-weight: inherit

  &::before
    @include spacer

  a
    color: inherit

pre
  color: var(--fg-color-pre)
  background-color: var(--bg-color-pre)
  border: 1px solid var(--border-color-pre)
  border-radius: var(--border-radius)
  padding: .5em
  overflow: auto

code
  font-family: var(--font-mono)
  font-size: var(--font-size-pre)

blockquote
  border-left: 2px solid var(--border-color-light)
  font-size: var(--font-size-quote)
  padding: 0 1em

.mute
  color: var(--fg-color-mute)

.smaller
  font-size: smaller

.bigger
  font-size: larger

div.banner
  display: flex

div.footnote-definition >
  p
    font-size: smaller
    display: inline-block
    margin: 0 .2em

  sup
    vertical-align: inherit

  sup::after
    content: "."

html
  overflow-y: scroll

body
  font-family: var(--font-sans)
  font-size: 1.3rem

  margin: 0
  display: flex
  flex-direction: column

  color: var(--fg-color)
  background-color: var(--bg-color)

.float-left
  float: left

.float-right
  float: right

main
  display: grid
  align-self: center
  grid-template-columns: 64px minmax(auto, 38em)
  grid-template-areas: "gutter main"
  gap: 2rem 1rem
  margin: 1rem

main > header
  grid-column: main

header > h1
  margin: 0

  > a, a:visited
    color: inherit

article
  display: flex
  flex-direction: column
  gap: .5rem
  grid-column: main
  overflow: auto

article > section.post
  > p:first-of-type
    margin-top: 0

  > p
    line-height: 1.3

  a
    text-decoration: underline

  a.internal
    text-decoration-style: dotted
    color: var(--fg-color)

    &:visited
      color: inherit

  a:visited
    color: var(--fg-href-visited)

  img
    border-radius: var(--border-radius)
    max-width: 100%

article.single h2.title
  display: none

div.banner > div.info
  display: inline-flex

  > a:first-of-type
    padding-right: .2rem

div.banner > nav.tags
  margin-left: 1rem

aside.gutter
  display: flex
  flex-direction: column

  grid-column: gutter

  > span
    display: inline-flex
    justify-content: center
    font-size: 2em
    color: var(--fg-color-gutter)

    margin: 0


img.avatar
  width: 100%

  border-radius: var(--border-radius)
  border: 1px solid var(--border-color-light)

article > header > div.banner
  justify-content: space-between
  border-bottom: 1px dotted var(--border-color-dark)

nav
  display: flex

nav ul.inline
  margin: 0
  padding: 0
  list-style-type: none
  display: flex

nav.pagination
  grid-column: 1 / -1

  > a.older
    margin-left: auto

nav.tags
  grid-column: main

  > ul.inline
    flex-wrap: wrap
    column-gap: .5rem

nav.links
  &::before, & > ul > li:not(:first-child)::before
    @include spacer

figure > a
  display: block

@media (max-width: 480px)
  article:not(.single)

  aside.gutter
    display: none

  main
    grid-template-columns: minmax(auto, 38em)
    grid-template-areas: "main"

  article
    padding-left: 0