From e99681e1abb802e486a7042434ec2697585a9d0e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 6 May 2021 21:53:04 +0200 Subject: Update --- assets/css/_basics.scss | 7 ++- assets/css/_vars.scss | 4 +- assets/css/components/_landing-banner.scss | 5 +- assets/css/components/_outer-button.scss | 11 ++--- assets/css/scopes/_body.scss | 74 +++--------------------------- assets/css/scopes/_colored-links.scss | 20 ++++++++ assets/css/scopes/_headlines.scss | 58 +++++++++++++++++++++++ assets/css/style.scss | 2 + 8 files changed, 96 insertions(+), 85 deletions(-) create mode 100644 assets/css/scopes/_colored-links.scss create mode 100644 assets/css/scopes/_headlines.scss (limited to 'assets') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 2a271ff..b2a437b 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -84,7 +84,6 @@ li { width: prop(--dims --indent); margin-left: calc(-1 * #{prop(--dims --indent)}); color: prop(--colors --fg-hi); - font-family: $font-fam--mono; } } @@ -144,7 +143,7 @@ h6 { font-family: $font-fam--large; font-size: 1em; font-weight: 600; - line-height: 1.2; + line-height: 1.4; font-feature-settings: 'ss02' 1; & + & { @@ -163,7 +162,7 @@ p { hr { height: 1px; - margin: ($line-height * 1rem) 0; + margin: ($line-height * 2rem) 0; border: 0; background-color: prop(--colors --obj-hi); } @@ -172,5 +171,5 @@ blockquote, pre { margin: ($line-height * 1rem) 0 0 1px; padding-left: calc(#{prop(--dims --indent)} - 3px); - border-left: 2px solid prop(--colors --obj); + border-left: 3px solid prop(--colors --obj); } diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 263cb5d..3adce04 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -66,9 +66,7 @@ $gray7: hsl(220, 7%, 100%); ), --link: ( - --idle: var(--colors--fg-lo), - --idle-body: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), - --visited-body: hsl(270, 60%, 75%), // hsl(354, 50%, 66%), + --idle: var(--colors--fg-lo), ) ) )); diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index 58d64d7..0e44e35 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -13,13 +13,10 @@ transform: translateX(-.06em); font-family: $font-fam--large; font-weight: 350; + line-height: 1.2; text-transform: none; } - @include element('text') { - font-size: 1 / 16 * 18em; - } - @include element('title-inner') { background-image: linear-gradient( to top, diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index d1da93c..22fa251 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -24,10 +24,10 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); - font-family: $font-fam--large; - font-size: 1rem; - font-weight: 500; + font-size: 1 / 16 * 15rem; + letter-spacing: 1px; text-decoration: none; + text-transform: uppercase; @include modifier('inverted') { background-color: prop(--colors --inverted --bg); @@ -51,8 +51,8 @@ @include element('icon-symbol') { display: block; - width: 1.35em; - height: 1.35em; + width: 1.45em; + height: 1.45em; } @include element('content') { @@ -60,7 +60,6 @@ padding-right: prop(--dims --pad-x); padding-left: prop(--dims --pad-x); transition: border-color .2s; - font-size: 1 / 16 * 15em; line-height: prop(--dims --outer, $global: true); white-space: nowrap; } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index b4d0a3c..8e5f876 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -1,10 +1,6 @@ @include namespace('body') { @include store(( --colors: ( - --emph: ( - --fg: prop(--colors --accent --color, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - ), --meta: ( --fg: prop(--colors --fg-hi, $global: true), ) @@ -12,73 +8,15 @@ )); @include scope(namespace()) { - font-size: 1 / 16 * 18em; - - > :first-child { - 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); - } - - h1 { - @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); - } - - h2 { - @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); - } - - h3 { - @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); - - letter-spacing: .05em; - text-transform: uppercase; - } - - h4, - h5, - h6 { - @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); - - letter-spacing: .1em; - text-transform: uppercase; - } - - h5, - h6 { - color: currentColor; - font-weight: 400; - } - - @include element('title-inner') { - background-image: linear-gradient( - to top, - transparent .15em, - #{prop(--colors --emph --bg)} .15em, - #{prop(--colors --emph --bg)} .6em, - transparent .6em - ); - } + font-size: 1 / 16 * 19em; @include element('meta') { - color: prop(--colors --meta --fg); - font-size: 1 / 18 * 16em; + margin-top: $line-height * 1rem; + color: prop(--colors --meta --fg); + font-size: 1 / 16 * 15rem; - + h1 { - margin-top: $line-height * 1rem; + + * { + margin-top: $line-height * 1.5rem; } } diff --git a/assets/css/scopes/_colored-links.scss b/assets/css/scopes/_colored-links.scss new file mode 100644 index 0000000..25ed289 --- /dev/null +++ b/assets/css/scopes/_colored-links.scss @@ -0,0 +1,20 @@ +@include namespace('colored-links') { + @include store(( + --colors: ( + --link: ( + --idle: hsl(210, 90%, 72%), // hsl(354, 100%, 66%), + --visited: hsl(270, 60%, 75%), // hsl(354, 50%, 66%), + ) + ) + )); + + @include scope(namespace()) { + :link { + color: prop(--colors --link --idle); + } + + :visited { + color: prop(--colors --link --visited); + } + } +} diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss new file mode 100644 index 0000000..6b28e9c --- /dev/null +++ b/assets/css/scopes/_headlines.scss @@ -0,0 +1,58 @@ +@include namespace('headlines') { + @include store(( + --colors: ( + --emph: ( + --bg: prop(--colors --bg-hi, $global: true), + ) + ) + )); + + @include scope(namespace()) { + h1, + h2, + h3, + h4 { + transform: translateX(-.06em); + } + + h1 { + @include iro-responsive-modular-scale(font-size, 3, $responsive-mod-scale); + } + + h2 { + @include iro-responsive-modular-scale(font-size, 2, $responsive-mod-scale); + } + + h3 { + @include iro-responsive-modular-scale(font-size, 1, $responsive-mod-scale); + + letter-spacing: .05em; + text-transform: uppercase; + } + + h4, + h5, + h6 { + @include iro-responsive-modular-scale(font-size, 0, $responsive-mod-scale); + + letter-spacing: .1em; + text-transform: uppercase; + } + + h5, + h6 { + color: currentColor; + font-weight: 400; + } + + @include element('title-inner') { + background-image: linear-gradient( + to top, + transparent .15em, + #{prop(--colors --emph --bg)} .15em, + #{prop(--colors --emph --bg)} .6em, + transparent .6em + ); + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index aa83f85..e4a36b0 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -24,6 +24,8 @@ @import 'components/card'; @import 'components/project'; +@import 'scopes/colored-links'; +@import 'scopes/headlines'; @import 'scopes/body'; @import 'utils'; -- cgit v1.2.3-70-g09d2