Initial commit

1 files changed, 172 insertions, 0 deletions

diff --git a/sass/style.sass b/sass/style.sass
new file mode 100644
index 0000000..9393dfb
--- /dev/null
+++ b/sass/style.sass
@@ -0,0 +1,172 @@
+@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