summaryrefslogtreecommitdiffstatshomepage
path: root/sass
diff options
context:
space:
mode:
Diffstat (limited to 'sass')
-rw-r--r--sass/_responsive_fonts.sass18
-rw-r--r--sass/_webfonts.sass239
-rw-r--r--sass/style.sass172
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