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: 85%

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

  --bg-color: white

  --border-color-light: lightgrey
  --border-color-dark: darkgrey

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

    --bg-color: #000000

@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: "#"

a.bold-hover:hover
  text-decoration: none
  text-shadow: 0px 0px 1px var(--fg-href)

h3.mentions
  margin: 0

h2.title
  display: inline-block
  margin: 0

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

  &::before
    @include spacer

pre
  border: 1px solid var(--border-color-light)
  box-shadow: 0px 0px 2px var(--border-color-light)
  padding: .5em
  overflow: auto

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

.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 auto
  max-width: 720px
  padding: 0 1rem

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

main
  display: flex
  flex-direction: column

header
  margin: 1rem 0

header > h1
  margin: 0

  > a, a:visited
    color: inherit

article
  margin: 1rem 0
  padding-left: 78px
  position: relative

article > section.post
  > :first-child
    margin-top: .5rem

  > 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: 8px
    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

article > header
  margin: 0

article > header > img.avatar
  position: absolute
  left: 0
  width: 64px

  border-radius: 4px
  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: inline-flex

nav.pagination
  margin: 1rem 0
  padding-top: .5rem

  > a.older
    margin-left: auto

nav.tags
  ul > li:not(:first-of-type)
    padding-left: .4rem

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

@media (max-width: 480px)
  article:not(.single)
    div.info > time
      display: none

    div.info > h2.title::before
      display: none

  article > header > img.avatar
    width: 48px

  article
    padding-left: 62px