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: #6464ff
    --fg-href-visited: #9547dd

    --bg-color: #000000

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)

h2.mentions
  margin-bottom: .2rem

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

  margin-left: 1rem

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

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

.smaller
  font-size: smaller

.bigger
  font-size: larger

.warning
  font-weight: bold
  color: red

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

  > li
    display: inline-block

  > li:not(:first-of-type)
    padding-left: .2em

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:visited
    color: var(--fg-href-visited)

  img
    border-radius: 8px
    max-width: 100%

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
  display: flex
  justify-content: space-between
  border-bottom: 1px dotted var(--border-color-dark)

nav.pagination
  display: flex

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

  > a.older
    margin-left: auto