summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-10 12:42:16 +0100
committerVolpeon <git@volpeon.ink>2023-01-10 12:42:16 +0100
commit416436b6a757479de8ce58fd87c4927cb52b541d (patch)
tree210d1844066982a9022ed69bbf532e7b2d5edcf8
parentImproved appearance of related content (diff)
downloadvolpeon.ink-416436b6a757479de8ce58fd87c4927cb52b541d.tar.gz
volpeon.ink-416436b6a757479de8ce58fd87c4927cb52b541d.tar.bz2
volpeon.ink-416436b6a757479de8ce58fd87c4927cb52b541d.zip
Improved list page header
-rw-r--r--assets/css/components/_subheader.scss39
-rw-r--r--assets/css/objects/_emoji.scss (renamed from assets/css/objects/emoji.scss)0
-rw-r--r--assets/css/scopes/_links.scss46
-rw-r--r--assets/css/style.scss2
-rw-r--r--content/art/drawings/index.md11
-rw-r--r--content/art/emojis/index.md3
-rw-r--r--content/art/index.md4
-rw-r--r--content/index.md4
-rw-r--r--content/notebook/index.md2
-rw-r--r--content/notebook/pages/i-want-to-be-a-fox.md3
-rw-r--r--content/profiles/index.md1
-rw-r--r--content/projects/index.md2
-rw-r--r--content/services/index.md1
-rw-r--r--templates/layouts/categorized_list.html20
-rw-r--r--templates/layouts/exhibit.html2
-rw-r--r--templates/layouts/list.html9
-rw-r--r--templates/layouts/page.html4
-rw-r--r--templates/layouts/redirect.html2
18 files changed, 114 insertions, 41 deletions
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 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3@use 'iro-design/src/mixins' as mx;
4
5@include iro.props-namespace('subheader') {
6 @include iro.props-store((
7 --colors: (
8 --fg: fn.global-color(--fg),
9 --strong: fn.global-color(--fg-lo),
10 ),
11 ), 'colors');
12
13 @include iro.bem-component(iro.props-namespace()) {
14 @include mx.set-font(--headline, (
15 --line-height: null,
16 --size: fn.global-dim(--font-size --400),
17 --weight: normal
18 ));
19
20 color: fn.color(--fg);
21
22 > * {
23 display: inline;
24 margin: 0;
25 }
26
27 strong {
28 color: fn.color(--strong);
29 font-weight: 500;
30 }
31
32 @include iro.bem-elem('title') {
33 font-size: inherit;
34 font-weight: 800;
35 letter-spacing: 1px;
36 text-transform: uppercase;
37 }
38 }
39}
diff --git a/assets/css/objects/emoji.scss b/assets/css/objects/_emoji.scss
index 8387e1d..8387e1d 100644
--- a/assets/css/objects/emoji.scss
+++ b/assets/css/objects/_emoji.scss
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 @@
1@use 'iro-sass/src/index' as iro;
2@use 'iro-design/src/functions' as fn;
3
4@include iro.props-namespace('links') {
5 @include iro.props-store((
6 --colors: (
7 --idle: fn.global-color(--accent --link-idle --obj-lo),
8 --visited: fn.global-color(--accent --link-visited --obj-lo),
9 --key-focus: (
10 --border: fn.global-color(--focus --fill),
11 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi),
12 ),
13 )
14 ), 'colors');
15
16 @include iro.bem-scope(iro.props-namespace()) {
17 :link {
18 text-decoration: underline;
19 }
20
21 :visited {
22 text-decoration: underline;
23 }
24
25 :link,
26 :visited {
27 border-radius: .5px;
28
29 @include iro.bem-at-theme('keyboard') {
30 &:focus {
31 box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
32 }
33 }
34 }
35
36 @include iro.bem-modifier('colored') {
37 :link {
38 color: fn.color(--idle);
39 }
40
41 :visited {
42 color: fn.color(--visited);
43 }
44 }
45 }
46}
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 @@
22@use 'components/main'; 22@use 'components/main';
23@use 'components/footer'; 23@use 'components/footer';
24@use 'components/header'; 24@use 'components/header';
25@use 'components/subheader';
25@use 'components/hnav'; 26@use 'components/hnav';
26@use 'components/card'; 27@use 'components/card';
27@use 'components/figure'; 28@use 'components/figure';
@@ -36,6 +37,7 @@
36@use 'iro-design/src/scopes/tables' as iro-tables; 37@use 'iro-design/src/scopes/tables' as iro-tables;
37@use 'scopes/small'; 38@use 'scopes/small';
38@use 'scopes/alerts'; 39@use 'scopes/alerts';
40@use 'scopes/links';
39 41
40@use 'iro-design/src/utils'; 42@use 'iro-design/src/utils';
41 43
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 @@
1--- 1---
2title: Drawings 2title: Drawings
3icon: image 3position: 1
4position: 1 4list_layout: gallery-3
5list_layout: gallery-2 5list_order: date_desc
6list_order: date_desc 6feed: true
7feed: true
8--- 7---
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 @@
1--- 1---
2title: Emojis 2title: Emojis
3icon: smile
4position: 2 3position: 2
5list_layout: gallery-2 4list_layout: gallery-3
6list_order: date_desc 5list_order: date_desc
7feed: true 6feed: true
8--- 7---
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 @@
1--- 1---
2title: Art 2title: Art
3position: 2 3position: 2
4list_layout: gallery-2 4list_layout: gallery-3
5list_order: date_desc 5list_order: date_desc
6list_flatten: true 6list_flatten: true
7list_limit: 4 7list_limit: 3
8feed: true 8feed: true
9--- 9---
10 10
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 @@
1--- 1---
2title: Volpeon's Den 2title: Volpeon
3--- 3---
4 4
5A red fox disguised as a software developer. I write code, create vector art and experiment with AI. 5A 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
3position: 4 3position: 4
4list_order: date_desc 4list_order: date_desc
5list_flatten: true 5list_flatten: true
6list_limit: 4 6list_limit: 3
7feed: true 7feed: true
8--- 8---
9 9
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 @@
1--- 1---
2schema_type: DigitalDocument 2schema_type: DigitalDocument
3title: I Want To Be a Fox 3title: I Want To Be a Fox
4date: 2022-08-27 4date: 2022-12-28
5draft: true 5draft: true
6--- 6---
7
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
3position: 1 3position: 1
4list_layout: grid-2 4list_layout: grid-2
5list_post_icon: arrow-up-right 5list_post_icon: arrow-up-right
6list_limit: 4
6--- 7---
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
3position: 3 3position: 3
4list_layout: grid-2 4list_layout: grid-2
5list_flatten: true 5list_flatten: true
6list_limit: 4 6list_limit: 2
7--- 7---
8 8
9Source code and various other projects can be found at [git.vulpes.one](//git.vulpes.one/). 9Source 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
3position: 5 3position: 5
4list_layout: grid-2 4list_layout: grid-2
5list_post_icon: arrow-up-right 5list_post_icon: arrow-up-right
6list_limit: 4
6--- 7---
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 @@
5 itemtype="https://schema.org/DataFeed" 5 itemtype="https://schema.org/DataFeed"
6 itemid="$url.full$" 6 itemid="$url.full$"
7> 7>
8 <header class="s-colored-links"> 8 <header class="c-subheader s-links">
9 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline"> 9 <h1 class="o-heading c-subheader__title p-name" itemprop="name headline">$title$.</h1>
10 <span class="o-heading__primary">$title$</span> 10 $body$
11 </h1>
12
13$body$
14 </header> 11 </header>
15 12
16 $if(notoc)$$else$
17 <nav class="c-hnav s-invisible-links" aria-label="Sections">
18 <h2 class="u-mt-0">Jump to</h2>
19 $for(list)$
20 <a class="c-hnav__item" href="#$it.slug$">$it.title$</a>
21 $endfor$
22 </nav>
23 $endif$
24
25 <div class="l-card-list"> 13 <div class="l-card-list">
26 $for(list)$ 14 $for(list)$
27 <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed"> 15 <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed">
@@ -34,7 +22,7 @@ $body$
34 $endif$ 22 $endif$
35 </h2> 23 </h2>
36 $if(it.description)$ 24 $if(it.description)$
37 <div class="s-small s-colored-links">$it.description$</div> 25 <div class="s-small s-links s-links--colored">$it.description$</div>
38 $endif$ 26 $endif$
39 </header> 27 </header>
40 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$"> 28 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
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 @@
49 49
50 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-0"> 50 <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-0">
51 <div class="l-container l-container--narrow u-ml-0"> 51 <div class="l-container l-container--narrow u-ml-0">
52 <div class="s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody"> 52 <div class="s-links s-links--colored s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
53$body$ 53$body$
54 </div> 54 </div>
55 </div> 55 </div>
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 @@
5 itemtype="https://schema.org/DataFeed" 5 itemtype="https://schema.org/DataFeed"
6 itemid="$url.full$" 6 itemid="$url.full$"
7> 7>
8 <header class="s-colored-links"> 8 <header class="c-subheader s-links">
9 <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline"> 9 <h1 class="o-heading c-subheader__title p-name" itemprop="name headline">$title$.</h1>
10 <span class="o-heading__primary">$title$</span> 10 $body$
11 </h1>
12
13$body$
14 </header> 11 </header>
15 12
16 <div class="l-card-list"> 13 <div class="l-card-list">
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 @@
22 <span class="s-headings__primary">$title$</span> 22 <span class="s-headings__primary">$title$</span>
23 </h1> 23 </h1>
24 24
25 <div class="s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody"> 25 <div class="s-links s-links--colored s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
26 <div class="l-container l-container--narrow u-ml-0"> 26 <div class="l-container l-container--narrow u-ml-0">
27$body$ 27$body$
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 $if(references)$ 31 $if(references)$
32 <footer class="s-colored-links s-lists"> 32 <footer class="s-links s-links--colored s-lists">
33 <h1>References</h1> 33 <h1>References</h1>
34 <ul> 34 <ul>
35 $for(references)$ 35 $for(references)$
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index d515abe..8e40b72 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,4 +1,4 @@
1<main class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow s-colored-links s-headlines"> 1<main class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow s-links s-links--colored s-headlines">
2 <h1 class="u-mt-0"> 2 <h1 class="u-mt-0">
3 <span class="s-headlines__title-inner">$title$</span> 3 <span class="s-headlines__title-inner">$title$</span>
4 </h1> 4 </h1>