From 8c83a2ef92be845c5ffecb1434028d0c68915936 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 18 Apr 2021 15:44:32 +0200 Subject: Update --- assets/css/_utils.scss | 2 +- assets/css/_vars.scss | 28 ++++++++++++++------------ assets/css/components/_card.scss | 2 +- assets/css/components/_footer.scss | 4 +++- assets/css/components/_header.scss | 22 ++++++++++++++++++++ assets/css/components/_landing-banner.scss | 2 +- assets/css/components/_logo.scss | 19 ------------------ assets/css/components/_outer-button.scss | 31 +++++++++++++++-------------- assets/css/components/_section-heading.scss | 29 --------------------------- assets/css/layouts/_landing.scss | 4 ++++ assets/css/layouts/_section.scss | 28 +++++++++++++++++++++----- assets/css/scopes/_body.scss | 26 ++++++++++++++++++++++++ assets/css/style.scss | 3 +-- 13 files changed, 113 insertions(+), 87 deletions(-) create mode 100644 assets/css/components/_header.scss delete mode 100644 assets/css/components/_logo.scss delete mode 100644 assets/css/components/_section-heading.scss (limited to 'assets/css') diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index 8f8170c..e8e98d2 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss @@ -1,4 +1,4 @@ -@include utility('hidden') { +@include utility('dn') { display: none; @each $breakpoint in map-keys($breakpoints) { diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 9b5fe86..71dc5d2 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -23,27 +23,29 @@ $subcontent--indent: 2em; $gray0: hsl(220, 0%, 6%); $gray1: hsl(220, 0%, 9%); $gray2: hsl(220, 0%, 15%); -$gray3: hsl(220, 0%, 29%); -$gray4: hsl(220, 0%, 54%); -$gray5: hsl(220, 0%, 73%); -$gray6: hsl(220, 0%, 100%); +$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%); @include store(( --dims: ( --outer: 4rem, - --outer-spacing: 2rem, - --spacing-y: 3rem, + --outer-spacing: 1.7rem, + --spacing-y: 4rem, ), --colors: ( --bg-hi: $gray0, // Darker background --bg: $gray1, // Background --bg-lo: $gray2, // Lighter background - --obj: $gray3, + --obj-hi: $gray3, + --obj: $gray4, - --fg-hi: $gray4, // Faint text - --fg: $gray5, // Text - --fg-lo: $gray6, // Strong text + --fg-hi: $gray5, // Faint text + --fg: $gray6, // Text + --fg-lo: $gray7, // Strong text --accent: ( --h: 354, @@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%); } } -@include store(( +/* @include store(( --dims: ( - --outer: 4rem, + --outer: 3.5rem, ), -), 'sm'); +), 'sm'); */ :root { --heading--fg: var(--colors--fg-lo); diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 09b03b0..cb18810 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -15,7 +15,7 @@ @include store(( --dims: ( --pad-x: 1em, - --pad-y: .6em + --pad-y: .7em ) ), 'md'); diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index c20bc22..c127d02 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -2,7 +2,7 @@ @include store(( --colors: ( --fg: prop(--colors --obj, $global: true), - --border: prop(--colors --bg-lo, $global: true), + --border: prop(--colors --obj-hi, $global: true), ) )); @@ -11,6 +11,8 @@ align-items: center; justify-content: space-between; height: prop(--dims --outer, $global: true); + padding-right: prop(--dims --outer, $global: true); + font-size: 1 / 16 * 15em; @include element('content') { width: 100%; diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss new file mode 100644 index 0000000..61f6f4a --- /dev/null +++ b/assets/css/components/_header.scss @@ -0,0 +1,22 @@ +@include namespace('header') { + @include store(( + --colors: ( + --fg: prop(--colors --fg-lo, $global: true), + --bg: prop(--colors --bg-hi, $global: true), + --hover: ( + --fg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --accent --color, $global: true), + ) + ) + )); + + @include component(namespace()) { + display: flex; + position: fixed; + z-index: 10000; + top: 0; + left: 0; + flex-direction: row; + justify-content: flex-start; + } +} diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index f6016c4..58d64d7 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -10,7 +10,7 @@ @include element('title') { max-width: 7em; margin-top: 0; - transform: translateX(-.05em); + transform: translateX(-.06em); font-family: $font-fam--large; font-weight: 350; text-transform: none; diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss deleted file mode 100644 index 13587c8..0000000 --- a/assets/css/components/_logo.scss +++ /dev/null @@ -1,19 +0,0 @@ -@include namespace('logo') { - @include store(( - --colors: ( - --fg: prop(--colors --fg-lo, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), - ) - ) - )); - - @include component(namespace()) { - position: fixed; - z-index: 10000; - top: 0; - left: 0; - } -} diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index b92dd9e..774281d 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -7,13 +7,9 @@ --bg: prop(--colors --accent --color, $global: true), --fg: prop(--colors --bg-hi, $global: true), ), - --icon: ( + --inverted: ( --fg: prop(--colors --fg-lo, $global: true), --bg: prop(--colors --bg-hi, $global: true), - --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), - ) ) ) )); @@ -24,9 +20,17 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); + font-size: 1rem; font-weight: 450; text-decoration: none; + @include modifier('scroll-top') { + position: fixed; + z-index: 9000; + right: 0; + bottom: 0; + } + @include element('icon') { display: flex; position: relative; @@ -36,19 +40,16 @@ width: prop(--dims --outer, $global: true); height: 100%; transition: background-color .2s, color .2s; - background-color: prop(--colors --icon --bg); - color: prop(--colors --icon --fg); } - @include modifier('icon-only') { - @include element('icon') { - background-color: prop(--colors --bg); - color: prop(--colors --fg); - } + @include modifier('inverted') { + background-color: prop(--colors --inverted --bg); + color: prop(--colors --inverted --fg); } - - &:hover { - @include multi('&', 'element' 'icon') { + + &:link, + &:visited { + &:hover { background-color: prop(--colors --hover --bg); color: prop(--colors --hover --fg); } diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss deleted file mode 100644 index 717442b..0000000 --- a/assets/css/components/_section-heading.scss +++ /dev/null @@ -1,29 +0,0 @@ -@include namespace('section-heading') { - @include store(( - --dims: ( - --pad-y: $line-height * 1rem - ), - --colors: ( - --line: prop(--colors --accent --color, $global: true), - ) - )); - - @include component(namespace()) { - margin: 0 0 prop(--dims --pad-y); - font-family: $font-fam--text; - font-size: 1 / 16 * 13em; - font-weight: bold; - letter-spacing: .2em; - text-transform: uppercase; - - &::before { - content: ''; - display: inline-block; - width: 3em; - height: 2px; - margin-right: 1.3em; - background-color: prop(--colors --line); - vertical-align: middle; - } - } -} diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index 500849e..d1169dd 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss @@ -10,8 +10,12 @@ @include layout(namespace()) { display: flex; + box-sizing: border-box; flex-direction: row; align-items: center; + min-height: 100%; + margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); + padding-bottom: prop(--dims --outer, $global: true); @include element('banner') { width: 70%; diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index a005ece..0ad9a61 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss @@ -1,10 +1,11 @@ @include namespace('section') { - @include layout(namespace()) { - box-sizing: border-box; - min-height: 100%; - margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); - padding-bottom: prop(--dims --outer, $global: true); + @include store(( + --colors: ( + --border: prop(--colors --obj-hi, $global: true), + ) + )); + @include layout(namespace()) { @include modifier('no-head') { padding-top: prop(--dims --outer, $global: true); } @@ -17,6 +18,23 @@ left: 0; flex-direction: row; justify-self: flex-start; + padding-right: prop(--dims --outer, $global: true); + font-size: 1 / 16 * 15em; + + &::after { + content: ''; + width: 100%; + height: 100%; + margin-right: prop(--dims --outer-spacing, $global: true); + margin-left: prop(--dims --outer-spacing, $global: true); + border-top: 1px solid prop(--colors --border); + } + } + + @include media('<=sm') { + @include element('head') { + padding-right: 0; + } } } } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 6fbacff..9b3a862 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -5,3 +5,29 @@ } } } +@include namespace('body') { + @include scope(namespace()) { + font-size: 1 / 16 * 18em; + + > :first-child { + margin-top: 0; + } + + h1 { + transform: translateX(-.06em); + font-family: $font-fam--large; + font-weight: 550; + text-transform: none; + } + + img { + max-width: 100%; + } + + @include iro-responsive-env(('xs', 'md')) { + h1 { + font-size: iro-responsive-set((1.8rem, 3rem)); + } + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index d095dec..1d19aae 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -18,9 +18,8 @@ @import 'objects/button'; @import 'components/outer-button'; -@import 'components/logo'; +@import 'components/header'; @import 'components/landing-banner'; -@import 'components/section-heading'; @import 'components/footer'; @import 'components/card'; -- cgit v1.2.3-70-g09d2