From b292cd39bf5e5c2d96f2f64eb1a94d8fd63fae9e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 22 Mar 2021 20:52:20 +0100 Subject: WIP: Redesign --- assets/css/_basics.scss | 6 +++ assets/css/_vars.scss | 42 ++++++++++++--------- assets/css/components/_hero.scss | 53 -------------------------- assets/css/components/_landing-banner.scss | 40 ++++++++++++++++++++ assets/css/components/_nav.scss | 27 +++++++++----- assets/css/layouts/_container.scss | 19 +++++++--- assets/css/layouts/_landing.scss | 60 ++++++++++++++++++++++++++++++ assets/css/layouts/_site.scss | 46 ----------------------- assets/css/scopes/_body.scss | 7 ++++ assets/css/style.scss | 6 ++- 10 files changed, 173 insertions(+), 133 deletions(-) delete mode 100644 assets/css/components/_hero.scss create mode 100644 assets/css/components/_landing-banner.scss create mode 100644 assets/css/layouts/_landing.scss delete mode 100644 assets/css/layouts/_site.scss create mode 100644 assets/css/scopes/_body.scss (limited to 'assets/css') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 740b293..eee48f4 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -34,6 +34,12 @@ code { font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; } +html, +body, +main { + height: 100%; +} + html { background-color: prop(--colors --bg); color: prop(--colors --fg); diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 3461b81..0c6102d 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -1,9 +1,8 @@ -$iro-root-size: 16px; - $breakpoints: ( xs: 320px, - sm: 700px, - md: 1100px, + sm: 600px, + md: 900px, + lg: 1400px, ); $unit-intervals: ( @@ -18,28 +17,35 @@ $font-fam--large: 'Garet Variable', $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: 56rem; +$content--width: 42rem; $subcontent--indent: 2em; -$gray0: hsl(220, 0%, 7%); -$gray1: hsl(220, 0%, 10%); -$gray2: hsl(220, 0%, 29%); -$gray3: hsl(220, 0%, 54%); -$gray4: hsl(220, 0%, 73%); -$gray5: hsl(220, 0%, 100%); +$gray0: hsl(220, 0%, 6%); +$gray1: hsl(220, 0%, 9%); +$gray2: hsl(220, 0%, 16%); +$gray3: hsl(220, 0%, 29%); +$gray4: hsl(220, 0%, 54%); +$gray5: hsl(220, 0%, 73%); +$gray6: hsl(220, 0%, 100%); @include store(( --colors: ( - --bg-hi: $gray0, // Lighter background + --bg-hi: $gray0, // Darker background --bg: $gray1, // Background + --bg-lo: $gray2, // Lighter background - --obj: $gray2, + --obj: $gray3, - --fg-hi: $gray3, // Faint text - --fg: $gray4, // Text - --fg-lo: $gray5, // Strong text - - --accent: hsl(354, 84%, 55%), + --fg-hi: $gray4, // Faint text + --fg: $gray5, // Text + --fg-lo: $gray6, // Strong text + + --accent: ( + --h: 354, + --s: 84%, + --l: 55%, + --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)), + ) ) )); diff --git a/assets/css/components/_hero.scss b/assets/css/components/_hero.scss deleted file mode 100644 index 3d8890e..0000000 --- a/assets/css/components/_hero.scss +++ /dev/null @@ -1,53 +0,0 @@ -@include namespace('hero') { - @include store(( - --colors: ( - --emph-fg: prop(--colors --accent, $global: true), - --back-fg: prop(--colors --bg-hi, $global: true) - ) - )); - - @include component(namespace()) { - display: flex; - position: relative; - align-items: center; - justify-content: center; - text-align: center; - - @include element('title') { - margin-top: 0; - font-family: $font-fam--large; - text-transform: none; - - @include modifier('front') { - max-width: 7em; - font-size: 2.5rem; - font-weight: 200; - } - - @include modifier('back') { - position: absolute; - z-index: -10; - transform: translateY(-.08em); - color: prop(--colors --back-fg); - } - } - - @include element('emph') { - color: prop(--colors --emph-fg); - font-weight: 500; - } - - @include iro-responsive-env(('xs', 'sm', 'md')) { - @include element('title') { - @include modifier('front') { - padding: iro-responsive-set((7rem, 7rem, 10rem)) 0; - font-size: iro-responsive-set((2.2rem, 3rem, 3.5rem)); - } - - @include modifier('back') { - font-size: iro-responsive-set((12rem, 14rem, 16rem)); - } - } - } - } -} diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss new file mode 100644 index 0000000..ee5deab --- /dev/null +++ b/assets/css/components/_landing-banner.scss @@ -0,0 +1,40 @@ +@include namespace('landing-banner') { + @include store(( + --colors: ( + --emph-fg: prop(--colors --accent --color, $global: true), + --emph-bg: prop(--colors --bg-hi, $global: true) + ) + )); + + @include component(namespace()) { + @include element('title') { + max-width: 7em; + margin-top: 0; + transform: translateX(-.04em); + font-family: $font-fam--large; + font-weight: 350; + text-transform: none; + } + + @include element('title-inner') { + background-image: linear-gradient( + to top, + transparent .15em, + #{prop(--colors --emph-bg)} .15em, + #{prop(--colors --emph-bg)} .6em, + transparent .6em + ); + } + + @include element('emph') { + color: prop(--colors --emph-fg); + font-weight: 550; + } + + @include iro-responsive-env(('md', 'lg')) { + @include element('title') { + font-size: iro-responsive-set((2.6rem, 3rem)); + } + } + } +} diff --git a/assets/css/components/_nav.scss b/assets/css/components/_nav.scss index 8fc4564..03118a9 100644 --- a/assets/css/components/_nav.scss +++ b/assets/css/components/_nav.scss @@ -2,16 +2,17 @@ @include store(( --dims: ( --font-size: 15px, - --pad-y: 1em, + --pad-y: .5rem, --item: ( - --pad-x: 1em, - --pad-y: 1em, + --pad-x: 1rem, + --pad-y: 1rem, ), ), --colors: ( + --bg: prop(--colors --bg-hi, $global: true), --logo: ( --idle: ( - --fg: prop(--colors --fg-hi, $global: true), + --fg: prop(--colors --accent --color, $global: true), ), --hover: ( --fg: prop(--colors --fg-lo, $global: true), @@ -33,7 +34,6 @@ @include store(( --dims: ( - --pad-y: .5em, --item: ( --pad-x: .75em, --pad-y: .75em, @@ -42,10 +42,15 @@ ), 'sm'); @include component(namespace()) { - display: flex; - align-items: center; - padding: prop(--dims --pad-y) 0; - font-size: prop(--dims --font-size); + display: flex; + position: fixed; + z-index: 10000; + top: 0; + left: 0; + align-items: center; + padding: prop(--dims --pad-y) 0; + background-color: prop(--colors --bg); + font-size: prop(--dims --font-size); @include element('logo') { display: inline-block; @@ -90,5 +95,9 @@ font-weight: bold; } } + + @include media('<=md') { + position: static; + } } } diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss index 2e102ee..0726950 100644 --- a/assets/css/layouts/_container.scss +++ b/assets/css/layouts/_container.scss @@ -1,10 +1,17 @@ @include namespace('container') { + @include store(( + --dims: ( + --pad-x: 3rem, + --pad-y: $line-height * 3rem + ) + )); + @include store(( --dims: ( --pad-x: 2rem, --pad-y: $line-height * 2rem ) - )); + ), 'md'); @include store(( --dims: ( @@ -14,16 +21,18 @@ ), 'sm'); @include layout(namespace()) { - padding-right: prop(--dims --pad-x); - padding-left: prop(--dims --pad-x); - @include modifier('content') { max-width: $content--width; margin-right: auto; margin-left: auto; } - @include modifier('pad-v') { + @include modifier('pad-x') { + padding-right: prop(--dims --pad-x); + padding-left: prop(--dims --pad-x); + } + + @include modifier('pad-y') { padding-top: prop(--dims --pad-y); padding-bottom: prop(--dims --pad-y); } diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss new file mode 100644 index 0000000..b824005 --- /dev/null +++ b/assets/css/layouts/_landing.scss @@ -0,0 +1,60 @@ +@include namespace('landing') { + @include store(( + --dims: ( + --banner-width: 30rem, + ), + --colors: ( + --banner-bg: prop(--colors --bg, $global: true) + ) + )); + + @include layout(namespace()) { + display: flex; + flex-direction: row; + align-items: center; + min-height: 100%; + + @include element('banner') { + flex-shrink: 1.2; + width: 100%; + max-width: prop(--dims --banner-width); + background-color: prop(--colors --banner-bg); + } + + @include element('content') { + width: 100%; + min-width: 0; + } + + @include iro-responsive-env(('md', 'lg')) { + @include element('banner') { + padding: + iro-responsive-set((2rem, 6rem)) + iro-responsive-set((0, 6rem)); + } + + @include element('content') { + padding: + iro-responsive-set((2rem, 6rem)) + iro-responsive-set((0, 6rem)) + iro-responsive-set((2rem, 6rem)) + 0; + } + } + + @include media('<=md') { + display: block; + height: auto; + + @include element('banner', 'content') { + width: auto; + padding-right: 0; + padding-left: 0; + } + + @include element('banner') { + max-width: none; + } + } + } +} diff --git a/assets/css/layouts/_site.scss b/assets/css/layouts/_site.scss deleted file mode 100644 index 2c06606..0000000 --- a/assets/css/layouts/_site.scss +++ /dev/null @@ -1,46 +0,0 @@ -@include namespace('site') { - @include store(( - --dims: ( - --outer-pad-x: 6rem, - --inner-pad-x: 2rem, - --pad-y: 6rem, - ) - )); - - @include layout(namespace()) { - display: flex; - flex-direction: row; - justify-content: space-around; - - @include element('col') { - box-sizing: border-box; - flex: 0 0 auto; - width: 100%; - min-width: 0; - max-width: 35rem; - height: 100%; - padding: prop(--dims --pad-y) prop(--dims --inner-pad-x) prop(--dims --pad-y) prop(--dims --outer-pad-x); - - @include next-twin-element { - flex: 1 1 auto; - max-width: 45rem; - height: auto; - padding-right: prop(--dims --outer-pad-x); - padding-left: prop(--dims --inner-pad-x); - } - } - - @include media('<=sm') { - display: block; - - @include element('col') { - width: auto; - height: auto; - - @include next-twin-element { - width: auto; - } - } - } - } -} diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss new file mode 100644 index 0000000..7adda03 --- /dev/null +++ b/assets/css/scopes/_body.scss @@ -0,0 +1,7 @@ +@include namespace('body') { + @include scope(namespace()) { + > :first-child { + margin-top: 0; + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index c8fd0c1..f4c6db7 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -9,12 +9,14 @@ @import 'basics'; @import 'components/nav'; -@import 'components/hero'; +@import 'components/landing-banner'; @import 'components/footer'; -@import 'layouts/site'; +@import 'layouts/landing'; @import 'layouts/container'; +@import 'scopes/body'; + @import 'utils'; :root { -- cgit v1.2.3-54-g00ecf