From 94e8476f38b876432aeb2cc34b3ba06e7792d25a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 15 Mar 2021 11:22:34 +0100 Subject: Added better font for text (Iosevka Aile) --- assets/css/_basics.scss | 39 ++++++++++++++++++++++++++++------ assets/css/_vars.scss | 26 +++++++++++++---------- assets/css/components/_hero.scss | 1 + assets/css/components/_nav.scss | 1 + assets/css/components/_page.scss | 1 + assets/fonts/iosevka-aile-bold.ttf | Bin 0 -> 3529204 bytes assets/fonts/iosevka-aile-regular.ttf | Bin 0 -> 3478480 bytes content/index.md | 6 ++++-- 8 files changed, 54 insertions(+), 20 deletions(-) create mode 100644 assets/fonts/iosevka-aile-bold.ttf create mode 100644 assets/fonts/iosevka-aile-regular.ttf diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 8db3505..1536605 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -14,6 +14,30 @@ url('/iosevka-term-ss09-bold.woff2') format('woff2'); } +@font-face { + font-family: 'Iosevka Aile'; + font-style: normal; + font-weight: normal; + src: //local('Iosevka Aile'), + url('/iosevka-aile-regular.woff2') format('woff2'); +} + +@font-face { + font-family: 'Iosevka Aile'; + font-style: normal; + font-weight: bold; + src: //local('Iosevka Aile Bold'), + url('/iosevka-aile-bold.woff2') format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-style: normal; + font-weight: normal; + src: //local('IBM Plex Sans'), + url('/IBMPlexSans-Regular.woff2') format('woff2'); +} + ::selection { background-color: var(--select--bg); color: var(--select--fg); @@ -26,14 +50,13 @@ img::selection { html, pre, code { - font-family: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier, - monospace; - font-feature-settings: 'calt' 0, 'dlig' 1; + font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; } html { background-color: var(--bg); color: var(--fg); + font-family: $font-fam--text; font-size: px-to-em($font-size, 16px); line-height: $line-height; } @@ -43,6 +66,11 @@ body { padding: 0; } +pre, +code { + font-family: $font-fam--mono; +} + code { color: var(--code--fg); } @@ -54,10 +82,6 @@ pre { code { color: currentColor; } - - strong { - font-weight: normal; - } } strong { @@ -82,6 +106,7 @@ li { width: $subcontent--indent; margin-left: -1 * $subcontent--indent; color: var(--fg-hi); + font-family: $font-fam--mono; } } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index f40faad..ea831a6 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,13 +1,17 @@ -$font-size: 17px; +$font-fam--text: 'Iosevka Aile', 'IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', + Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif; +$font-fam--mono: 'Iosevka Term SS09', 'Lucida Console', 'Courier New', Courier, + monospace; +$font-size: 16px; $line-height: 1.7; -$code-block--font-size: $font-size - 1; +$code-block--font-size: 16px; $code-block--line-height: 1.4; -$content--width: 80ch; +$content--width: 42em; $content--h1--font-size: $font-size + 1; -$subcontent--indent: 4ch; +$subcontent--indent: 2em; $container--pad-h: 2rem; $container--pad-h--sm: 1rem; @@ -15,18 +19,18 @@ $container--pad-v: $line-height * 2rem; $container--pad-v--sm: $line-height * 1rem; $nav--font-size: $font-size - 1; -$nav--item--spacing: 4ch; -$nav--item--spacing--sm: 3ch; -$nav--item--pad-h: 1ch; -$nav--item--pad-v: .8em; +$nav--item--spacing: 2em; +$nav--item--spacing--sm: 1.5em; +$nav--item--pad-h: .5em; +$nav--item--pad-v: .9em; $footer--pad-v: .8em; -$page--item-prefix--max-chars: 3ch; -$page--item-prefix--pad: 2ch; +$page--item-prefix--max-chars: 1.5em; +$page--item-prefix--pad: 1em; $page--item-prefix--width: $page--item-prefix--max-chars + $page--item-prefix--pad; -$page--item-prefix--max-chars--sm: 2ch; +$page--item-prefix--max-chars--sm: 1em; $page--item-prefix--width--sm: $page--item-prefix--max-chars--sm + $page--item-prefix--pad; $breakpoints: ( diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss index 7fa79e1..bfcdc16 100644 --- a/assets/css/components/_hero.scss +++ b/assets/css/components/_hero.scss @@ -3,6 +3,7 @@ margin-left: -1 * $page--item-prefix--width; padding-left: $page--item-prefix--width; overflow: hidden; + font-family: $font-fam--mono; &::after { content: str-repeat('░', 120); diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 6bed7ae..cd3ef14 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -15,6 +15,7 @@ margin: 0; padding: $nav--item--pad-v 0; color: var(--nav--logo--fg); + font-family: $font-fam--mono; text-decoration: none; &:link, diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 67e5387..9d1e991 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -12,6 +12,7 @@ margin-left: -1 * $page--item-prefix--width; padding-right: $page--item-prefix--pad; color: var(--page--item-prefix--fg); + font-family: $font-fam--mono; font-weight: normal; text-align: right; } diff --git a/assets/fonts/iosevka-aile-bold.ttf b/assets/fonts/iosevka-aile-bold.ttf new file mode 100644 index 0000000..6db4acf Binary files /dev/null and b/assets/fonts/iosevka-aile-bold.ttf differ diff --git a/assets/fonts/iosevka-aile-regular.ttf b/assets/fonts/iosevka-aile-regular.ttf new file mode 100644 index 0000000..7dba5b6 Binary files /dev/null and b/assets/fonts/iosevka-aile-regular.ttf differ diff --git a/content/index.md b/content/index.md index 84be80b..9050478 100644 --- a/content/index.md +++ b/content/index.md @@ -19,5 +19,7 @@ Welcome to my website! I'm Volpeon, a red fox doing human things such as program ## OMEMO Fingerprints -- CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 -- C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 +```plain +CB07051B E223EF70 8EE8F665 BBFCEF00 83415C45 DCA31906 F2362543 F5543449 +C2C575EE 0236965C 4DBAA7EA 12F9EC90 AFD57B2C F75B3F32 70F3D393 2EDA3A08 +``` -- cgit v1.2.3-70-g09d2