From 7531a7125c72227198f7605c6c129d15cd926857 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 23 Mar 2021 18:14:39 +0100 Subject: WIP: Redesign --- assets/css/_basics.scss | 24 ++++-------- assets/css/_utils.scss | 4 ++ assets/css/_vars.scss | 4 +- assets/css/components/_card.scss | 59 +++++++++++++++++++++++++++++ assets/css/components/_section-heading.scss | 28 ++++++++++++++ assets/css/layouts/_card-grid.scss | 7 ++++ assets/css/objects/_icon.scss | 12 ++++++ assets/css/style.scss | 5 +++ 8 files changed, 124 insertions(+), 19 deletions(-) create mode 100644 assets/css/components/_card.scss create mode 100644 assets/css/components/_section-heading.scss create mode 100644 assets/css/layouts/_card-grid.scss create mode 100644 assets/css/objects/_icon.scss (limited to 'assets') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index eee48f4..64b11cf 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -76,6 +76,11 @@ strong { font-weight: bold; } +small { + color: prop(--colors --fg-hi); + font-size: 1 / 16 * 14em; +} + ul, ol { margin: ($line-height * 1em) 0 0; @@ -175,27 +180,12 @@ h1 { } p { - margin: ($line-height * 1em) 0 0; - hyphens: auto; + margin: ($line-height * 1em) 0 0; } :link, :visited { - position: relative; - z-index: 1; - margin: 0 -.3em; - padding: .2em .3em; - color: var(--link--idle--fg); - - &:hover { - background-color: var(--link--hover--bg); - color: var(--link--hover--fg); - text-decoration: none; - } - - strong { - color: currentColor; - } + color: var(--link--idle--fg); } hr { diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index bca50d8..3eff6fc 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss @@ -19,3 +19,7 @@ @include utility('mt0') { margin-top: 0; } + +@include utility('db') { + display: block; +} diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 0c6102d..1ef0c8a 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -2,7 +2,7 @@ $breakpoints: ( xs: 320px, sm: 600px, md: 900px, - lg: 1400px, + lg: 1500px, ); $unit-intervals: ( @@ -22,7 +22,7 @@ $subcontent--indent: 2em; $gray0: hsl(220, 0%, 6%); $gray1: hsl(220, 0%, 9%); -$gray2: hsl(220, 0%, 16%); +$gray2: hsl(220, 0%, 15%); $gray3: hsl(220, 0%, 29%); $gray4: hsl(220, 0%, 54%); $gray5: hsl(220, 0%, 73%); diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss new file mode 100644 index 0000000..4b3a094 --- /dev/null +++ b/assets/css/components/_card.scss @@ -0,0 +1,59 @@ +@include namespace('card') { + @include store(( + --dims: ( + --pad-x: 1.3em, + --pad-y: 1em + ), + --colors: ( + --bg: prop(--colors --bg-lo, $global: true), + --flip: ( + --bg: prop(--colors --bg-lo, $global: true), + ) + ) + )); + + @include component(namespace()) { + display: block; + position: relative; + background-color: prop(--colors --bg); + line-height: 1.4; + + &:hover { + @include element('content') { + @include modifier('flip') { + visibility: visible; + transition: + visibility 0s, + opacity .2s; + opacity: 1; + } + } + } + + @include element('content') { + display: flex; + box-sizing: border-box; + flex-direction: row; + align-items: center; + padding: prop(--dims --pad-y) prop(--dims --pad-x); + + @include modifier('flip') { + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: + visibility 0s linear .2s, + opacity .2s; + opacity: 0; + background-color: prop(--colors --flip --bg); + } + } + + @include element('icon') { + margin-left: auto; + } + } +} diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss new file mode 100644 index 0000000..db75159 --- /dev/null +++ b/assets/css/components/_section-heading.scss @@ -0,0 +1,28 @@ +@include namespace('section-heading') { + @include store(( + --dims: ( + --pad-y: $line-height * 2rem + ), + --colors: ( + --line: prop(--colors --accent --color, $global: true), + ) + )); + + @include component(namespace()) { + margin: 0 0 prop(--dims --pad-y); + font-size: .8em; + font-weight: 400; + letter-spacing: .2em; + text-transform: uppercase; + + &::before { + content: ''; + display: inline-block; + width: 3em; + height: 1px; + margin-right: 1.3em; + background-color: prop(--colors --line); + vertical-align: middle; + } + } +} diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss new file mode 100644 index 0000000..7998952 --- /dev/null +++ b/assets/css/layouts/_card-grid.scss @@ -0,0 +1,7 @@ +@include namespace('card-grid') { + @include layout(namespace()) { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + gap: .7rem; + } +} diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss new file mode 100644 index 0000000..cb966c8 --- /dev/null +++ b/assets/css/objects/_icon.scss @@ -0,0 +1,12 @@ +@include namespace('icon') { + @include object(namespace()) { + display: block; + width: 16px; + height: 16px; + stroke-width: 1.5px; + stroke-linecap: round; + stroke: currentColor; + stroke-linejoin: round; + fill: none; + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index f4c6db7..90cbe5d 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -8,12 +8,17 @@ @import 'functions'; @import 'basics'; +@import 'objects/icon'; + @import 'components/nav'; @import 'components/landing-banner'; +@import 'components/section-heading'; @import 'components/footer'; +@import 'components/card'; @import 'layouts/landing'; @import 'layouts/container'; +@import 'layouts/card-grid'; @import 'scopes/body'; -- cgit v1.2.3-70-g09d2