From 08843807299c0c23f2125eb1fd6947d1ea03fcba Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 20 Nov 2021 18:39:28 +0100 Subject: Improved list structure --- assets/css/_basics.scss | 2 +- assets/css/_vars.scss | 2 +- assets/css/components/_card-list.scss | 36 ++++++++------------------------- assets/css/scopes/_invisible-links.scss | 13 ++++++++++++ assets/css/style.scss | 1 + 5 files changed, 24 insertions(+), 30 deletions(-) create mode 100644 assets/css/scopes/_invisible-links.scss (limited to 'assets/css') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 4d9f2f5..efa0279 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -171,7 +171,7 @@ p { :link, :visited { - color: prop(--colors --link --idle); + color: prop(--colors --link --default); } hr { diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index a8c7fdf..9e1b661 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -80,7 +80,7 @@ $content--width: 46rem; ), --link: ( - --idle: var(--colors--fg-lo), + --default: var(--colors--fg-lo), --colored: ( --idle-h: 220, --idle-s: 100%, diff --git a/assets/css/components/_card-list.scss b/assets/css/components/_card-list.scss index 605c442..aa6eef9 100644 --- a/assets/css/components/_card-list.scss +++ b/assets/css/components/_card-list.scss @@ -1,12 +1,8 @@ @include namespace('card-list') { @include store(( --colors: ( - --cat: ( - --fg: prop(--colors --fg-lo, $global: true), - ), - --meta: ( - --fg: prop(--colors --fg-hi, $global: true), - ) + --title: prop(--colors --fg-lo, $global: true), + --text: prop(--colors --fg-hi, $global: true), ), --dims: ( --col-width: 17em @@ -17,36 +13,20 @@ margin-top: $line-height * 2rem; font-size: 1rem; - @include element('category-header') { - margin-top: $line-height * 2rem; - color: prop(--colors --cat --fg); + @include element('title') { + color: prop(--colors --title); } - @include element('category-title') { - display: inline-block; - margin-top: 0; - margin-right: 1em; - - :link, - :visited { - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - @include element('category-description') { - display: block; - font-size: px-to-em(15px); + @include element('text') { + color: prop(--colors --text); + line-height: 1.4; p { margin-top: $line-height * .25rem; } } - @include element('category-content') { + @include element('cards') { margin-top: $line-height * .625rem; filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); diff --git a/assets/css/scopes/_invisible-links.scss b/assets/css/scopes/_invisible-links.scss new file mode 100644 index 0000000..e4d149e --- /dev/null +++ b/assets/css/scopes/_invisible-links.scss @@ -0,0 +1,13 @@ +@include namespace('invisible-links') { + @include scope(namespace()) { + :link, + :visited { + color: currentColor; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 67f44ed..754b91e 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -19,6 +19,7 @@ @import 'components/card-list'; @import 'scopes/colored-links'; +@import 'scopes/invisible-links'; @import 'scopes/headlines'; @import 'scopes/body'; -- cgit v1.2.3-70-g09d2