diff options
Diffstat (limited to '')
| -rw-r--r-- | sass/_responsive_fonts.sass | 18 | ||||
| -rw-r--r-- | sass/_webfonts.sass | 239 | ||||
| -rw-r--r-- | sass/style.sass | 172 |
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 |