From 11947869e44d423171cfd3c6c76be0fbbbfb5da4 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 10 Jun 2022 14:31:33 +0200 Subject: Update --- assets/css/_vars.scss | 11 ++--------- assets/css/components/_card.scss | 1 - assets/css/components/_header.scss | 1 - assets/css/components/_hnav.scss | 22 ++++++++++++++++++++++ assets/css/layouts/_card-list.scss | 5 ----- assets/css/style.scss | 1 + 6 files changed, 25 insertions(+), 16 deletions(-) create mode 100644 assets/css/components/_hnav.scss (limited to 'assets/css') diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 2c0e9b5..ad9e16f 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -36,8 +36,7 @@ $content--width: 44rem; @include store(( --dims: ( - --indent: 2rem, - --obj-shadow: 0 .4em 2.8em, + --indent: 2rem, ), --colors: ( --bg-hi: $gray0, // Darker background @@ -51,8 +50,6 @@ $content--width: 44rem; --fg: $gray6, // Text --fg-lo: $gray7, // Strong text - --obj-shadow: transparent, - --accent: ( --h: 354, --s: 84%, @@ -107,7 +104,7 @@ $content--width: 44rem; @include iro-execute { $gray0: hsl(220, 5%, 100%); - $gray1: hsl(220, 5%, 96%); + $gray1: hsl(220, 5%, 95%); $gray2: hsl(220, 5%, 88%); $gray3: hsl(220, 5%, 83%); $gray4: hsl(220, 5%, 68%); @@ -128,8 +125,6 @@ $content--width: 44rem; --fg: $gray6, // Text --fg-lo: $gray7, // Strong text - --obj-shadow: rgba(#000, .05), - --accent: ( --h: 354, --s: 74%, @@ -182,8 +177,6 @@ $content--width: 44rem; --fg-hi: $black, // Faint text --fg: $black, // Text --fg-lo: $black, // Strong text - - --obj-shadow: transparent, ), ), 'print'); } diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 2e32a48..20614e7 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -35,7 +35,6 @@ transform: translateY(0); transition: transform .2s, background-color .2s, color .2s, border-color .2s; background-color: prop(--colors --bg); - box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); color: prop(--colors --fg); line-height: 1.4; diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss index a190eee..ca85438 100644 --- a/assets/css/components/_header.scss +++ b/assets/css/components/_header.scss @@ -37,7 +37,6 @@ height: prop(--dims --height); padding: prop(--dims --gap); gap: prop(--dims --gap); - filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); @include element('item') { padding: 0 prop(--dims --pad-x); diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss new file mode 100644 index 0000000..220afde --- /dev/null +++ b/assets/css/components/_hnav.scss @@ -0,0 +1,22 @@ +@include namespace('hnav') { + @include store(( + --colors: ( + --border: prop(--colors --obj-hi, $global: true) + ), + --dims: ( + --gap: 2em, + --pad-y: .5em + ) + )); + + @include component(namespace()) { + display: flex; + gap: prop(--dims --gap); + align-items: baseline; + margin-top: $line-height * 2rem; + padding: prop(--dims --pad-y) 0 0; + border-width: 1px 0 0; + border-style: solid; + border-color: prop(--colors --border); + } +} diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index bda0f4d..a53b771 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss @@ -14,7 +14,6 @@ flex-direction: column; gap: 2px; margin-top: $line-height * .625rem; - filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); @include modifier('grid', 'gallery') { display: grid; @@ -34,9 +33,5 @@ filter: none; } } - - @include element('card') { - box-shadow: none; - } } } diff --git a/assets/css/style.scss b/assets/css/style.scss index 535bc72..0b8f75c 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -19,6 +19,7 @@ @import 'components/card'; @import 'components/note'; @import 'components/lightbox'; +@import 'components/hnav'; @import 'layouts/card-list'; -- cgit v1.2.3-70-g09d2