From 40001c6b491eed2a91cd5662fbf0271db4a2e42a Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 26 Apr 2021 09:43:34 +0200 Subject: Update --- assets/css/_basics.scss | 17 ++++++++++------ assets/css/_vars.scss | 40 ++++++++++++++++++------------------- assets/css/components/_card.scss | 3 ++- assets/css/components/_footer.scss | 2 +- assets/css/components/_project.scss | 9 ++------- assets/css/scopes/_body.scss | 2 +- 6 files changed, 37 insertions(+), 36 deletions(-) (limited to 'assets') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index becf68a..648a4fc 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -7,6 +7,11 @@ img::selection { background-color: prop(--colors --select --img-bg); } +:focus { + outline: 2px solid prop(--colors --fg-lo); + outline-offset: 3px; +} + html, pre, code { @@ -71,13 +76,13 @@ ol { li { position: relative; - padding-left: $subcontent--indent; + padding-left: prop(--dims --indent); &::before { display: inline-block; position: absolute; - width: $subcontent--indent; - margin-left: -1 * $subcontent--indent; + width: prop(--dims --indent); + margin-left: calc(-1 * #{prop(--dims --indent)}); color: prop(--colors --fg-hi); font-family: $font-fam--mono; } @@ -166,19 +171,19 @@ p { :link, :visited { - color: var(--link--idle--fg); + color: prop(--colors --link --idle); } hr { height: 1px; margin: ($line-height * 1em) 0; border: 0; - background-color: prop(--colors --obj); + background-color: prop(--colors --obj-hi); } blockquote, pre { margin: ($line-height * 1em) 0 0 1px; - padding-left: calc(#{$subcontent--indent} - 3px); + 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 52723a3..2fd7b53 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -12,26 +12,26 @@ $unit-intervals: ( '': 0 ); -$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; -$font-size: 16px; -$line-height: 1.7; -$content--width: 42rem; -$subcontent--indent: 2em; +$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; +$font-size: 16px; +$line-height: 1.7; +$content--width: 42rem; -$gray0: hsl(220, 0%, 6%); -$gray1: hsl(220, 0%, 9%); -$gray2: hsl(220, 0%, 15%); -$gray3: hsl(220, 0%, 20%); -$gray4: hsl(220, 0%, 33%); -$gray5: hsl(220, 0%, 54%); -$gray6: hsl(220, 0%, 73%); -$gray7: hsl(220, 0%, 100%); +$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%); +$gray7: hsl(220, 7%, 100%); @include store(( --dims: ( - --outer: 4rem, + --outer: 4rem, + --indent: 2rem, ), --colors: ( --bg-hi: $gray0, // Darker background @@ -57,6 +57,10 @@ $gray7: hsl(220, 0%, 100%); --img-bg: hsla(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l), .5), --fg: var(--colors--bg-hi), ), + + --link: ( + --idle: var(--colors--fg-lo) + ) ) )); @@ -81,10 +85,6 @@ $gray7: hsl(220, 0%, 100%); --code-block--fg: var(--colors--fg-hi); - --link--idle--fg: var(--colors--fg-lo); - --link--hover--bg: var(--link--idle--fg); - --link--hover--fg: #000; - --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866; --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%); // var(--fg-lo); // #f59458; --page--link--hover--bg: var(--page--link--idle--fg); diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 37d4b0e..f444daf 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -50,7 +50,8 @@ color: currentColor; text-decoration: none; - &:hover { + &:hover, + &:focus { transform: translateY(#{prop(--dims --hover-offset)}); background-color: prop(--colors --hover --bg); color: prop(--colors --hover --fg); diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index cf02d04..4e809a4 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -8,10 +8,10 @@ @include component(namespace()) { display: flex; + position: relative; align-items: center; justify-content: space-between; height: prop(--dims --outer, $global: true); - font-size: 1 / 16 * 15em; @include element('content') { width: 100%; diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss index 580e70b..3df48d2 100644 --- a/assets/css/components/_project.scss +++ b/assets/css/components/_project.scss @@ -22,7 +22,8 @@ color: currentColor; text-decoration: none; - &:hover { + &:hover, + &:focus { @include element('picture') { opacity: .75; filter: blur(0); @@ -64,11 +65,5 @@ max-width: calc(100% - 2em); box-shadow: 0 .8em 2.5em rgba(#000, .25); } - - @include media('<=sm') { - @include element('picture') { - mask-image: iro-easing-gradient(linear, to top, rgba(#000, .75) 2em, ease, #000 17em); - } - } } } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 9b3a862..5f41f29 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -16,7 +16,7 @@ h1 { transform: translateX(-.06em); font-family: $font-fam--large; - font-weight: 550; + font-weight: 600; text-transform: none; } -- cgit v1.2.3-70-g09d2