From 93493c0714145dc8bb7d812700a0f4f3f577dd7f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 27 Apr 2021 21:40:34 +0200 Subject: Update --- assets/css/_basics.scss | 28 +++++++++----------------- assets/css/_vars.scss | 37 +++++++++++++++++++++------------- assets/css/scopes/_body.scss | 48 +++++++++++++++++++++++++++++++++++--------- 3 files changed, 71 insertions(+), 42 deletions(-) (limited to 'assets') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 0d6a2a7..2a271ff 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -8,7 +8,7 @@ img::selection { } :focus { - outline: 2px solid prop(--colors --fg-lo); + outline: 3px solid prop(--colors --focus-ring); outline-offset: 3px; } @@ -49,7 +49,7 @@ code { } pre { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1rem) 0 0; overflow-x: auto; code { @@ -69,7 +69,7 @@ small { ul, ol { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1rem) 0 0; padding: 0; list-style: none; } @@ -109,7 +109,7 @@ ul ul { } dl { - margin: ($line-height * 1em) 0 0; + margin: ($line-height * 1rem) 0 0; padding: 0; } @@ -139,27 +139,19 @@ h3, h4, h5, h6 { - margin: ($line-height * 2em) 0 0; + margin: ($line-height * 2rem) 0 0; + color: var(--heading--fg); font-family: $font-fam--large; font-size: 1em; font-weight: 600; line-height: 1.2; font-feature-settings: 'ss02' 1; - + & { - margin-top: $line-height * 1em; + & + & { + margin-top: $line-height * 1rem; } } -h1, -h2 { - color: var(--heading--fg); -} - -h1 { - text-transform: uppercase; -} - p { margin: ($line-height * 1rem) 0 0; } @@ -171,14 +163,14 @@ p { hr { height: 1px; - margin: ($line-height * 1em) 0; + margin: ($line-height * 1rem) 0; border: 0; background-color: prop(--colors --obj-hi); } blockquote, pre { - margin: ($line-height * 1em) 0 0 1px; + margin: ($line-height * 1rem) 0 0 1px; padding-left: calc(#{prop(--dims --indent)} - 3px); border-left: 2px solid prop(--colors --obj); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 2fd7b53..37262a6 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -12,6 +12,11 @@ $unit-intervals: ( '': 0 ); +$responsive-mod-scale: ( + xs: (1rem, 1.2), + sm: (.5rem, 1.6) +); + $font-fam--text: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; $font-fam--large: 'Garet', $font-fam--text; $font-fam--mono: 'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; @@ -19,13 +24,13 @@ $font-size: 16px; $line-height: 1.7; $content--width: 42rem; -$gray0: hsl(220, 7%, 6%); -$gray1: hsl(220, 7%, 9%); -$gray2: hsl(220, 7%, 15%); -$gray3: hsl(220, 7%, 20%); -$gray4: hsl(220, 7%, 33%); -$gray5: hsl(220, 7%, 54%); -$gray6: hsl(220, 7%, 73%); +$gray0: hsl(220, 7%, 7%); +$gray1: hsl(220, 7%, 11%); +$gray2: hsl(220, 7%, 18%); +$gray3: hsl(220, 7%, 23%); +$gray4: hsl(220, 7%, 38%); +$gray5: hsl(220, 7%, 58%); +$gray6: hsl(220, 7%, 76%); $gray7: hsl(220, 7%, 100%); @include store(( @@ -34,16 +39,16 @@ $gray7: hsl(220, 7%, 100%); --indent: 2rem, ), --colors: ( - --bg-hi: $gray0, // Darker background - --bg: $gray1, // Background - --bg-lo: $gray2, // Lighter background + --bg-hi: $gray0, // Darker background + --bg: $gray1, // Background + --bg-lo: $gray2, // Lighter background --obj-hi: $gray3, --obj: $gray4, - --fg-hi: $gray5, // Faint text - --fg: $gray6, // Text - --fg-lo: $gray7, // Strong text + --fg-hi: $gray5, // Faint text + --fg: $gray6, // Text + --fg-lo: $gray7, // Strong text --accent: ( --h: 354, @@ -52,6 +57,8 @@ $gray7: hsl(220, 7%, 100%); --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), ), + --focus-ring: var(--colors--accent--color), + --select: ( --bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .996), --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), @@ -59,7 +66,9 @@ $gray7: hsl(220, 7%, 100%); ), --link: ( - --idle: var(--colors--fg-lo) + --idle: var(--colors--fg-lo), + --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), + --visited-body: hsl(270, 60%, 72%), // hsl(354, 50%, 66%), ) ) )); diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 5f41f29..f725b0a 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -13,21 +13,49 @@ margin-top: 0; } + :link { + color: prop(--colors --link --idle-body, $global: true); + } + + :visited { + color: prop(--colors --link --visited-body, $global: true); + } + + h1, + h2, + h3, + h4 { + transform: translateX(-.06em); + font-family: $font-fam--large; + font-weight: 600; + } + h1 { - transform: translateX(-.06em); - font-family: $font-fam--large; - font-weight: 600; - text-transform: none; + @include iro-responsive-modular-scale(font-size, 4, $responsive-mod-scale); } - img { - max-width: 100%; + h2 { + @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); } - @include iro-responsive-env(('xs', 'md')) { - h1 { - font-size: iro-responsive-set((1.8rem, 3rem)); - } + h3 { + @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); + + letter-spacing: .1em; + text-transform: uppercase; + } + + h4, + h5, + h6 { + @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); + + letter-spacing: .1em; + text-transform: uppercase; + } + + img { + max-width: 100%; } } } -- cgit v1.2.3-70-g09d2