Initial commit

3 files changed, 429 insertions, 0 deletions

diff --git a/sass/_responsive_fonts.sass b/sass/_responsive_fonts.sass
new file mode 100644
index 0000000..12fa50f
--- /dev/null
+++ b/sass/_responsive_fonts.sass
@@ -0,0 +1,18 @@
+@mixin font-size($size)
+  html
+    font-size: $size;
+
+@media (max-width: 480px)
+  @include font-size(12px)
+
+@media (min-width: 480px)
+  @include font-size(13px)
+
+@media (min-width: 786px)
+  @include font-size(14px)
+
+@media (min-width: 992px)
+  @include font-size(15px)
+
+@media (min-width: 1200px)
+  @include font-size(16px)
diff --git a/sass/_webfonts.sass b/sass/_webfonts.sass
new file mode 100644
index 0000000..546e19a
--- /dev/null
+++ b/sass/_webfonts.sass
@@ -0,0 +1,239 @@
+$cyrillic-ext: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
+$cyrillic: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
+$greek-ext: U+1F00-1FFF
+$greek: U+0370-03FF
+$latin-ext: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
+$latin: U+0000-00FF, U+0131, U+0152-0153, U+2190-21FF, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+$vietnamese: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-cyrillic-ext.woff2) format('woff2')
+  unicode-range: $cyrillic-ext
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-cyrillic.woff2) format('woff2')
+  unicode-range: $cyrillic
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-greek-ext.woff2) format('woff2')
+  unicode-range: $greek-ext
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-greek.woff2) format('woff2')
+  unicode-range: $greek
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-vietnamese.woff2) format('woff2')
+  unicode-range: $vietnamese
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-latin-ext.woff2) format('woff2')
+  unicode-range: $latin-ext
+
+
+@font-face
+  font-family: 'Alegreya'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Regular'), local('Alegreya-Regular'), url(fonts/alegreya-latin.woff2) format('woff2')
+  unicode-range: $latin
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-cyrillic-ext.woff2) format('woff2')
+  unicode-range: $cyrillic-ext
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-cyrillic.woff2) format('woff2')
+  unicode-range: $cyrillic
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-greek-ext.woff2) format('woff2')
+  unicode-range: $greek-ext
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-greek.woff2) format('woff2')
+  unicode-range: $greek
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-vietnamese.woff2) format('woff2')
+  unicode-range: $vietnamese
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-latin-ext.woff2) format('woff2')
+  unicode-range: $latin-ext
+
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: italic
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Italic'), local('AlegreyaSans-Italic'), url(fonts/alegreya-sans-italic-latin.woff2) format('woff2')
+  unicode-range: $latin
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-cyrillic-ext.woff2) format('woff2')
+  unicode-range: $cyrillic-ext
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-cyrillic.woff2) format('woff2')
+  unicode-range: $cyrillic
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-greek-ext.woff2) format('woff2')
+  unicode-range: $greek-ext
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-greek.woff2) format('woff2')
+  unicode-range: $greek
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-vietnamese.woff2) format('woff2')
+  unicode-range: $vietnamese
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-latin-ext.woff2) format('woff2')
+  unicode-range: $latin-ext
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 400
+  font-display: swap
+  src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(fonts/alegreya-sans-regular-latin.woff2) format('woff2')
+  unicode-range: $latin
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-cyrillic-ext.woff2) format('woff2')
+  unicode-range: $cyrillic-ext
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-cyrillic.woff2) format('woff2')
+  unicode-range: $cyrillic
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-greek-ext.woff2) format('woff2')
+  unicode-range: $greek-ext
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-greek.woff2) format('woff2')
+  unicode-range: $greek
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-vietnamese.woff2) format('woff2')
+  unicode-range: $vietnamese
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-latin-ext.woff2) format('woff2')
+  unicode-range: $latin-ext
+
+@font-face
+  font-family: 'Alegreya Sans'
+  font-style: normal
+  font-weight: 700
+  font-display: swap
+  src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(fonts/alegreya-sans-bold-latin.woff2) format('woff2')
+  unicode-range: $latin
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