Improved list page header

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 @@
+@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
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 @@
+@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$"
 >
-    <header class="s-colored-links">
-        <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
-            <span class="o-heading__primary">$title$</span>
-        </h1>
-
-$body$
+    <header class="c-subheader s-links">
+        <h1 class="o-heading c-subheader__title p-name" itemprop="name headline">$title$.</h1>
+        $body$
     </header>
 
-    $if(notoc)$$else$
-        <nav class="c-hnav s-invisible-links" aria-label="Sections">
-            <h2 class="u-mt-0">Jump to</h2>
-            $for(list)$
-                <a class="c-hnav__item" href="#$it.slug$">$it.title$</a>
-            $endfor$
-        </nav>
-    $endif$
-
     <div class="l-card-list">
         $for(list)$
             <section class="h-entry h-feed" itemprop="dataFeedElement" itemscope itemtype="https://schema.org/DataFeed">
@@ -34,7 +22,7 @@ $body$
                         $endif$
                     </h2>
                     $if(it.description)$
-                        <div class="s-small s-colored-links">$it.description$</div>
+                        <div class="s-small s-links s-links--colored">$it.description$</div>
                     $endif$ 
                 </header>
                 <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 @@
 
     <div class="l-container l-container--pad-x l-container--pad-y l-container--narrow-125 u-pt-0">
         <div class="l-container l-container--narrow u-ml-0">
-            <div class="s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
+            <div class="s-links s-links--colored s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
 $body$
             </div>
         </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 @@
     itemtype="https://schema.org/DataFeed"
     itemid="$url.full$"
 >
-    <header class="s-colored-links">
-        <h1 class="o-heading o-heading--xxl u-mt-0 p-name" itemprop="name headline">
-            <span class="o-heading__primary">$title$</span>
-        </h1>
-
-$body$
+    <header class="c-subheader s-links">
+        <h1 class="o-heading c-subheader__title p-name" itemprop="name headline">$title$.</h1>
+        $body$
     </header>
 
     <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 @@
             <span class="s-headings__primary">$title$</span>
         </h1>
 
-        <div class="s-colored-links s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
+        <div class="s-links s-links--colored s-headings s-blockquotes s-code s-lists s-tables s-alerts e-content" itemprop="articleBody">
             <div class="l-container l-container--narrow u-ml-0">
 $body$
             </div>
         </div>
 
         $if(references)$
-            <footer class="s-colored-links s-lists">
+            <footer class="s-links s-links--colored s-lists">
                 <h1>References</h1>
                 <ul>
                     $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 @@
-<main class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow s-colored-links s-headlines">
+<main class="c-main l-container l-container--pad-x l-container--pad-y l-container--narrow s-links s-links--colored s-headlines">
     <h1 class="u-mt-0">
         <span class="s-headlines__title-inner">$title$</span>
     </h1>