From 416436b6a757479de8ce58fd87c4927cb52b541d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 10 Jan 2023 12:42:16 +0100 Subject: Improved list page header --- assets/css/components/_subheader.scss | 39 +++++++++++++++++++++++ assets/css/objects/_emoji.scss | 33 ++++++++++++++++++++ assets/css/objects/emoji.scss | 33 -------------------- assets/css/scopes/_links.scss | 46 ++++++++++++++++++++++++++++ assets/css/style.scss | 2 ++ content/art/drawings/index.md | 11 +++---- content/art/emojis/index.md | 3 +- content/art/index.md | 4 +-- content/index.md | 4 +-- content/notebook/index.md | 2 +- content/notebook/pages/i-want-to-be-a-fox.md | 3 +- content/profiles/index.md | 1 + content/projects/index.md | 2 +- content/services/index.md | 1 + templates/layouts/categorized_list.html | 20 +++--------- templates/layouts/exhibit.html | 2 +- templates/layouts/list.html | 9 ++---- templates/layouts/page.html | 4 +-- templates/layouts/redirect.html | 2 +- 19 files changed, 147 insertions(+), 74 deletions(-) create mode 100644 assets/css/components/_subheader.scss create mode 100644 assets/css/objects/_emoji.scss delete mode 100644 assets/css/objects/emoji.scss create mode 100644 assets/css/scopes/_links.scss diff --git a/assets/css/components/_subheader.scss b/assets/css/components/_subheader.scss new file mode 100644 index 0000000..df8eb50 --- /dev/null +++ b/assets/css/components/_subheader.scss @@ -0,0 +1,39 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; +@use 'iro-design/src/mixins' as mx; + +@include iro.props-namespace('subheader') { + @include iro.props-store(( + --colors: ( + --fg: fn.global-color(--fg), + --strong: fn.global-color(--fg-lo), + ), + ), 'colors'); + + @include iro.bem-component(iro.props-namespace()) { + @include mx.set-font(--headline, ( + --line-height: null, + --size: fn.global-dim(--font-size --400), + --weight: normal + )); + + color: fn.color(--fg); + + > * { + display: inline; + margin: 0; + } + + strong { + color: fn.color(--strong); + font-weight: 500; + } + + @include iro.bem-elem('title') { + font-size: inherit; + font-weight: 800; + letter-spacing: 1px; + text-transform: uppercase; + } + } +} diff --git a/assets/css/objects/_emoji.scss b/assets/css/objects/_emoji.scss new file mode 100644 index 0000000..8387e1d --- /dev/null +++ b/assets/css/objects/_emoji.scss @@ -0,0 +1,33 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('emoji') { + @include iro.props-store(( + --dims: ( + --size: 1em, + --rounding: 3px, + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline; + width: fn.dim(--size); + height: fn.dim(--size); + margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); + padding: fn.dim(--rounding); + transform: scale(1.5); + transition: transform .2s ease, background-color .2s ease; + border-radius: calc(fn.dim(--rounding) / 3); + + &:hover { + transform: scale(3); + background-color: fn.color(--bg); + } + } +} diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/emoji.scss deleted file mode 100644 index 8387e1d..0000000 --- a/assets/css/objects/emoji.scss +++ /dev/null @@ -1,33 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use 'iro-design/src/functions' as fn; - -@include iro.props-namespace('emoji') { - @include iro.props-store(( - --dims: ( - --size: 1em, - --rounding: 3px, - ) - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --bg: fn.global-color(--obj-hi), - ) - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline; - width: fn.dim(--size); - height: fn.dim(--size); - margin: calc(-1 * fn.dim(--rounding) - fn.dim(--size) + 1em) calc(.25em - fn.dim(--rounding)); - padding: fn.dim(--rounding); - transform: scale(1.5); - transition: transform .2s ease, background-color .2s ease; - border-radius: calc(fn.dim(--rounding) / 3); - - &:hover { - transform: scale(3); - background-color: fn.color(--bg); - } - } -} diff --git a/assets/css/scopes/_links.scss b/assets/css/scopes/_links.scss new file mode 100644 index 0000000..a08ccd8 --- /dev/null +++ b/assets/css/scopes/_links.scss @@ -0,0 +1,46 @@ +@use 'iro-sass/src/index' as iro; +@use 'iro-design/src/functions' as fn; + +@include iro.props-namespace('links') { + @include iro.props-store(( + --colors: ( + --idle: fn.global-color(--accent --link-idle --obj-lo), + --visited: fn.global-color(--accent --link-visited --obj-lo), + --key-focus: ( + --border: fn.global-color(--focus --fill), + --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), + ), + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + :link { + text-decoration: underline; + } + + :visited { + text-decoration: underline; + } + + :link, + :visited { + border-radius: .5px; + + @include iro.bem-at-theme('keyboard') { + &:focus { + box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); + } + } + } + + @include iro.bem-modifier('colored') { + :link { + color: fn.color(--idle); + } + + :visited { + color: fn.color(--visited); + } + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 20bcc27..1225b2e 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -22,6 +22,7 @@ @use 'components/main'; @use 'components/footer'; @use 'components/header'; +@use 'components/subheader'; @use 'components/hnav'; @use 'components/card'; @use 'components/figure'; @@ -36,6 +37,7 @@ @use 'iro-design/src/scopes/tables' as iro-tables; @use 'scopes/small'; @use 'scopes/alerts'; +@use 'scopes/links'; @use 'iro-design/src/utils'; diff --git a/content/art/drawings/index.md b/content/art/drawings/index.md index 1627ec5..49bdaf8 100644 --- a/content/art/drawings/index.md +++ b/content/art/drawings/index.md @@ -1,8 +1,7 @@ --- -title: Drawings -icon: image -position: 1 -list_layout: gallery-2 -list_order: date_desc -feed: true +title: Drawings +position: 1 +list_layout: gallery-3 +list_order: date_desc +feed: true --- diff --git a/content/art/emojis/index.md b/content/art/emojis/index.md index a949043..aab53de 100644 --- a/content/art/emojis/index.md +++ b/content/art/emojis/index.md @@ -1,8 +1,7 @@ --- title: Emojis -icon: smile position: 2 -list_layout: gallery-2 +list_layout: gallery-3 list_order: date_desc feed: true --- diff --git a/content/art/index.md b/content/art/index.md index 3280f79..531798d 100644 --- a/content/art/index.md +++ b/content/art/index.md @@ -1,10 +1,10 @@ --- title: Art position: 2 -list_layout: gallery-2 +list_layout: gallery-3 list_order: date_desc list_flatten: true -list_limit: 4 +list_limit: 3 feed: true --- diff --git a/content/index.md b/content/index.md index c65e7c3..97cec60 100644 --- a/content/index.md +++ b/content/index.md @@ -1,5 +1,5 @@ --- -title: Volpeon's Den +title: Volpeon --- -A red fox disguised as a software developer. I write code, create vector art and experiment with AI. +A red fox disguised as a software developer. Code, vector art and AI experiments. diff --git a/content/notebook/index.md b/content/notebook/index.md index 524bebb..2bcaf28 100644 --- a/content/notebook/index.md +++ b/content/notebook/index.md @@ -3,7 +3,7 @@ title: Notebook position: 4 list_order: date_desc list_flatten: true -list_limit: 4 +list_limit: 3 feed: true --- diff --git a/content/notebook/pages/i-want-to-be-a-fox.md b/content/notebook/pages/i-want-to-be-a-fox.md index f43cac3..08e99a1 100644 --- a/content/notebook/pages/i-want-to-be-a-fox.md +++ b/content/notebook/pages/i-want-to-be-a-fox.md @@ -1,6 +1,7 @@ --- schema_type: DigitalDocument title: I Want To Be a Fox -date: 2022-08-27 +date: 2022-12-28 draft: true --- + diff --git a/content/profiles/index.md b/content/profiles/index.md index 9fe9d8b..27ef74b 100644 --- a/content/profiles/index.md +++ b/content/profiles/index.md @@ -3,4 +3,5 @@ title: Profiles position: 1 list_layout: grid-2 list_post_icon: arrow-up-right +list_limit: 4 --- diff --git a/content/projects/index.md b/content/projects/index.md index 5dcf939..82bbbc4 100644 --- a/content/projects/index.md +++ b/content/projects/index.md @@ -3,7 +3,7 @@ title: Projects position: 3 list_layout: grid-2 list_flatten: true -list_limit: 4 +list_limit: 2 --- Source code and various other projects can be found at [git.vulpes.one](//git.vulpes.one/). diff --git a/content/services/index.md b/content/services/index.md index 8a2b7bd..7f94a52 100644 --- a/content/services/index.md +++ b/content/services/index.md @@ -3,4 +3,5 @@ title: Services position: 5 list_layout: grid-2 list_post_icon: arrow-up-right +list_limit: 4 --- diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 67dc466..6c3c7f3 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -5,23 +5,11 @@ itemtype="https://schema.org/DataFeed" itemid="$url.full$" > -
-

- $title$ -

- -$body$ +
+

$title$.

+ $body$
- $if(notoc)$$else$ - - $endif$ -
$for(list)$
@@ -34,7 +22,7 @@ $body$ $endif$ $if(it.description)$ -
$it.description$
+
$it.description$
$endif$
diff --git a/templates/layouts/exhibit.html b/templates/layouts/exhibit.html index 7a50635..e378f74 100644 --- a/templates/layouts/exhibit.html +++ b/templates/layouts/exhibit.html @@ -49,7 +49,7 @@
-
+
$body$
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index cf54c4b..6fe65c4 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html @@ -5,12 +5,9 @@ itemtype="https://schema.org/DataFeed" itemid="$url.full$" > -
-

- $title$ -

- -$body$ +
+

$title$.

+ $body$
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index b1f7835..4bc6e17 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html @@ -22,14 +22,14 @@ $title$ -
+
$body$
$if(references)$ -