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 + content/profiles/index.md | 2 +- content/projects/emojis/index.md | 2 +- content/projects/index.md | 3 +++ filters/icons.lua | 4 ++-- templates/layouts/categorized_list.html | 21 ++++++++----------- templates/partials/grid_card.html | 2 +- 11 files changed, 40 insertions(+), 48 deletions(-) create mode 100644 assets/css/scopes/_invisible-links.scss 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'; diff --git a/content/profiles/index.md b/content/profiles/index.md index 265a23b..0d8df9f 100644 --- a/content/profiles/index.md +++ b/content/profiles/index.md @@ -2,5 +2,5 @@ title: Profiles position: 1 list_grid: true -list_post_icon: icon-arrow-up-right +list_post_icon: arrow-up-right --- diff --git a/content/projects/emojis/index.md b/content/projects/emojis/index.md index 58ad85b..728ade5 100644 --- a/content/projects/emojis/index.md +++ b/content/projects/emojis/index.md @@ -1,5 +1,5 @@ --- title: Emojis icon: smile -list_post_icon: icon-arrow-right +list_post_icon: arrow-right --- diff --git a/content/projects/index.md b/content/projects/index.md index 3b6b718..eaaf808 100644 --- a/content/projects/index.md +++ b/content/projects/index.md @@ -4,3 +4,6 @@ position: 2 list_grid: true list_limit: 4 --- + +A selection of projects I wasn't too lazy to create a page for. +You can find more projects on [git.vulpes.one](https://git.vulpes.one/). diff --git a/filters/icons.lua b/filters/icons.lua index 3800e5d..fb6a608 100644 --- a/filters/icons.lua +++ b/filters/icons.lua @@ -3,8 +3,8 @@ function Str(el) if icon then return pandoc.RawInline('html', - '') + '') end return el diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 690ab68..6f06a63 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -7,23 +7,18 @@ $body$
$for(list)$
-
-
-

- $it.title$ -

- $if(it.omitted)$$it.omitted$ more$endif$ -
- $if(it.description)$ - $it.description$ - $endif$ -
+

+ $it.title$ +

+ $if(it.description)$ +
$it.description$
+ $endif$ $if(it.grid)$ -
+
$it.items:partials/grid_card()$
$else$ -
+
$it.items:partials/list_card()$
$endif$ diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html index 449b25c..e1b7f78 100644 --- a/templates/partials/grid_card.html +++ b/templates/partials/grid_card.html @@ -30,7 +30,7 @@
$if(it.post_icon)$ - + $endif$ -- cgit v1.2.3-70-g09d2