From c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 19 Mar 2021 22:10:55 +0100 Subject: WIP: Redesign --- assets/css/_basics.scss | 64 ++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 36 deletions(-) (limited to 'assets/css/_basics.scss') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 1536605..1cd5547 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -1,41 +1,23 @@ @font-face { - font-family: 'Iosevka Term SS09'; - font-style: normal; - font-weight: normal; - src: //local('Iosevka SS09'), - url('/iosevka-term-ss09-regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Term SS09'; - font-style: normal; - font-weight: bold; - src: //local('Iosevka SS09 Bold'), - url('/iosevka-term-ss09-bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Aile'; + font-family: 'IBM Plex Sans'; font-style: normal; font-weight: normal; - src: //local('Iosevka Aile'), - url('/iosevka-aile-regular.woff2') format('woff2'); + src: //local('IBM Plex Sans'), + url('/IBMPlexSans-Regular.woff2') format('woff2'); } @font-face { - font-family: 'Iosevka Aile'; + font-family: 'IBM Plex Sans'; font-style: normal; font-weight: bold; - src: //local('Iosevka Aile Bold'), - url('/iosevka-aile-bold.woff2') format('woff2'); + src: url('/IBMPlexSans-Bold.woff2') format('woff2'); } @font-face { - font-family: 'IBM Plex Sans'; + font-family: 'Garet Variable'; font-style: normal; - font-weight: normal; - src: //local('IBM Plex Sans'), - url('/IBMPlexSans-Regular.woff2') format('woff2'); + font-weight: 50 950; + src: url('/GaretVariable.woff2') format('woff2-variations'); } ::selection { @@ -54,8 +36,8 @@ code { } html { - background-color: var(--bg); - color: var(--fg); + background-color: prop(--colors --bg); + color: prop(--colors --fg); font-family: $font-fam--text; font-size: px-to-em($font-size, 16px); line-height: $line-height; @@ -85,7 +67,7 @@ pre { } strong { - color: var(--fg-lo); + color: prop(--colors --fg-lo); font-weight: bold; } @@ -105,7 +87,7 @@ li { position: absolute; width: $subcontent--indent; margin-left: -1 * $subcontent--indent; - color: var(--fg-hi); + color: prop(--colors --fg-hi); font-family: $font-fam--mono; } } @@ -141,12 +123,12 @@ dd { } dt { - color: var(--fg-lo); + color: prop(--colors --fg-lo); font-weight: bold; &::after { content: ':'; - color: var(--fg); + color: prop(--colors --fg); font-weight: normal; } } @@ -157,13 +139,23 @@ dd { h1, h2, -h3 { +h3, +h4, +h5, +h6 { margin: ($line-height * 2em) 0 0; + font-family: $font-fam--large; font-size: 1em; + font-weight: 600; + line-height: 1.2; + font-feature-settings: 'ss02' 1; + h1, + h2, - + h3 { + + h3, + + h4, + + h5, + + h6 { margin-top: $line-height * 1em; } } @@ -205,12 +197,12 @@ hr { height: 1px; margin: ($line-height * 1em) 0; border: 0; - background-color: var(--obj); + background-color: prop(--colors --obj); } blockquote, pre { margin: ($line-height * 1em) 0 0 1px; padding-left: calc(#{$subcontent--indent} - 3px); - border-left: 2px solid var(--obj); + border-left: 2px solid prop(--colors --obj); } -- cgit v1.2.3-54-g00ecf