index.sass

---
---

@function reduce ($percent)
  @return rgba(mix(#292929, #fff), $percent / 100)

body
  display: flex
  font-size: calc(.6vw + .8em)
  margin: 0
  min-height: 100vh

{% if site.style.dark %}

body
  background: #2d2d2d
  color: white

{% else %}

body
  background: white
  color: #333

{% endif %}

{% if site.style.minimalist %}

body
  margin: 0 calc(22% - 4em)

article, body > header, body > footer
  padding: 1em 0

article, body > footer
  border-top: 2px solid rgba(148, 148, 148, .08)

{% else %}

@import anchor

html
  background-color: #282828

article
  border-top: 1px solid rgba(148, 148, 148, .08)

article:first-of-type
  border-top: none

article, body > header, body > footer
  padding: 1em calc(22% - 4em)

body > header
  background-color: #282828
  color: white

{% if site.style.dark %}

body > footer
  background-color: #282828
  color: #999

{% else %}

body > footer
  background-color: #fafafa
  color: gray
  border-top: 1px solid #f0f0f0

{% endif %}

{% endif %}

header h1
  margin-top: .4em
  margin-bottom: .1em

article header
  text-align: center
  margin-bottom: 1.6em

article footer
  padding: 1em 0

table
  width: 100%

nav
  margin: 1em -0.8em

nav a
  display: inline-block
  margin: 0 .8em

nav, body > footer
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  align-items: center

.archive
  h3
    margin-top: 0
  li
    list-style-type: none
  a
    font-weight: 300