Removed private section, various improvements

26 files changed, 118 insertions, 136 deletions

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index dd24fed..ac6b989 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -9,6 +9,7 @@ code {
 
 body {
     box-sizing: border-box;
+    height:     auto;
     min-height: 100%;
 }
 
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f8f106d..6c15145 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -135,7 +135,7 @@
             position:    relative;
             width:       100%;
             height:      2em;
-            padding-top: 46%;
+            padding-top: 50%;
         }
 
         @include iro.bem-elem('thumbnail-img') {
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 4097373..6eea345 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -10,20 +10,18 @@
 
     @include iro.props-store((
         --dims: (
-            --margin-top: fn.global-dim(--size --600),
-            --gap:        2em,
-            --pad-y:      .5em
+            --gap: 1.5em,
+            --margin-top:    fn.global-dim(--paragraph --margin-top),
+            --margin-bottom: fn.global-dim(--size --900),
         )
     ), 'dims');
 
     @include iro.bem-component(iro.props-namespace()) {
-        display:      flex;
-        gap:          fn.dim(--gap);
-        align-items:  baseline;
-        margin-top:   fn.dim(--margin-top);
-        padding:      fn.dim(--pad-y) 0 0;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: fn.color(--border);
+        display:       flex;
+        gap:           fn.dim(--gap);
+        align-items:   baseline;
+        margin:        fn.dim(--margin-top) 0 fn.dim(--margin-bottom);
+        padding-top:   fn.dim(--margin-top);
+        border-top:    1px solid fn.color(--border);
     }
 }
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 96f9060..6d388e6 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -6,7 +6,19 @@
         --dims: (
             --margin-top: fn.global-dim(--size --600),
             --spacing:    fn.global-dim(--size --200),
-            --col-width:  17em,
+            --gap:        fn.global-dim(--size --25),
+            --grid: (
+                --gap:       fn.global-dim(--size --75),
+                --col-width: fn.global-dim(--size --3400),
+            ),
+            --small-gallery: (
+                --gap:       fn.global-dim(--size --250),
+                --col-width: fn.global-dim(--size --2800),
+            ),
+            --gallery: (
+                --gap:       fn.global-dim(--size --250),
+                --col-width: fn.global-dim(--size --3400),
+            )
         )
     ), 'dims');
 
@@ -14,24 +26,23 @@
         margin-top: fn.dim(--margin-top);
         font-size:  1rem;
 
+        @include iro.bem-elem('header') {
+            margin-top: fn.dim(--margin-top);
+        }
+
         @include iro.bem-elem('cards') {
             display:        flex;
             flex-direction: column;
-            gap:            2px;
+            gap:            fn.dim(--gap);
             margin-top:     fn.dim(--spacing);
 
-            @include iro.bem-modifier('grid', 'gallery') {
-                display:               grid;
-                grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
-                align-items:           start;
-            }
-
-            @include iro.bem-modifier('grid') {
-                gap: 6px;
-            }
-
-            @include iro.bem-modifier('gallery') {
-                gap: 20px;
+            @each $mode in 'grid' 'small-gallery' 'gallery' {
+                @include iro.bem-modifier($mode) {
+                    display:               grid;
+                    align-items:           start;
+                    grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr));
+                    gap:                   fn.dim('--#{$mode}' --gap);
+                }
             }
         }
     }
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..10d6832
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,11 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('container') {
+    @include iro.props-store((
+        --dims: (
+            --width:    iro.fn-px-to-rem(730px),
+            --width-50: iro.fn-px-to-rem(380px),
+        )
+    ), 'dims');
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1184bb2..e160f91 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -7,6 +7,7 @@
 @use 'base';
 
 @use 'iro-design/src/layouts';
+@use 'layouts/container';
 @use 'layouts/media';
 @use 'layouts/card-list';
 
diff --git a/content/9thPK7O3xn/dreams/biological-experiments.md b/content/9thPK7O3xn/dreams/biological-experiments.md
deleted file mode 100644
index 94a7f63..0000000
--- a/content/9thPK7O3xn/dreams/biological-experiments.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-date:  2012-01-01
-title: Biological Experiments
----
-
-*I don't remember the real date of this dream, just that it happened in 2012.*
-
-I'm at a large gym. It is separated in two halves by a huge wall with a goal in front of it. The wall doesn't stretch all the way to the outer walls so it's possible to go from one side to the other. It looks quite different from the gym where I used to have PE, but it still feels like it somehow. My classmates are there as well and are playing soccer together.
-
-Suddenly, the environment changes. It's still the same gym, but now the dividing wall and the goal are gone. Instead, there are many tables and the walls are plastered with scientific posters.  
-My biology teacher shows up and gives all of us an assignment: Form groups of two, create a mixture with some specific chemicals, and inject it into our eyes. So that's what I do, until it's finally time for the injection. I'm too scared and refuse to do it.
-
-The situation changes again. I'm now inside of a tavern, sitting at a table with some of my classmates. The tavern reminds me of a log cabin I was once at -- the walls and the furniture are made of heavy wooden logs.  
-My legs feel strange, but I'm not bothered by it because that's an expected effect of the mixture we previously produced. Looks like I've changed my mind between the last scene and this one.  
-After some time, I finally get curios and take a look at my legs. Instead of my feet, there are black paws. My classmates must've noticed their changes as well, as one of them says: "Ah, so it has begun."
-
-The dream gets hazy and all I know is that the changes keep progressing.
-
-There's a moment of clarity. The changes have gotten very far since my body is now covered in black fur, I have a muzzle, and due to the anatomical changes I can only barely stand on two legs. I start talking with my teacher and ask: "How long will it take/last?" He answers: "As long as you want, but you'll have to return."
-
-The dream gets hazy again, followed by one last scene: I'm in front of the tavern with four other people. The changes are complete and we are now werewolves. We run into the forest that surrounds us.
-
-This isn't the end of the dream yet, but I don't remember anything from this point.
diff --git a/content/9thPK7O3xn/dreams/false-awakening.md b/content/9thPK7O3xn/dreams/false-awakening.md
deleted file mode 100644
index 4f2a0b2..0000000
--- a/content/9thPK7O3xn/dreams/false-awakening.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-date:  2015-07-29
-title: False Awakening
----
-
-It was noon. I was tired and decided to lie down for a bit. I didn't want to fall asleep, though, so I tried to stay awake and kept checking the time since I had to go to the uni later. This went on for quite a while, resulting in a constant cycle of dozing → remembering to check the time → looking at my smartphone to check the time → going back to dozing → and so on.
-
-At some point, I actually must have fallen asleep for quite a while. I opened my eyes to take my smartphone once again when I noticed that my room was dark. It must've been late -- about 9 or 10pm -- which immediately irritated me. I had been tired, but not _that_ tired.
-
-I stood up and groggily went to my desk to switch on my desk lamp. I pressed the button and heard the usual click noise, but nothing happened. After a few more tries, I eventually pulled the lamp towards me to see if the LED bulb at least flickered. It was completely dead.
-
-I walked back to my bed to check on my smartphone what time it actually was. I was greeted by my lock screen, but it looked different than usual: There was only empty space where the clock should have been and overall it just looked "wrong."
-
-This whole situation felt strange and I started to wonder what was going on, when I suddenly felt like all of my strength was sucked out of my body. My head was spinning and I collapsed onto my bed. I couldn't even think straight anymore and just wished for it to stop, for me to wake up... and that's when I did. For real, this time.
diff --git a/content/9thPK7O3xn/dreams/index.md b/content/9thPK7O3xn/dreams/index.md
deleted file mode 100644
index 95e613d..0000000
--- a/content/9thPK7O3xn/dreams/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title:                Dream Journal
-position:             1
-list_order:           date_desc
-list_read_indicators: true
-feed:                 true
----
diff --git a/content/9thPK7O3xn/dreams/infinite-skyscrapers.md b/content/9thPK7O3xn/dreams/infinite-skyscrapers.md
deleted file mode 100644
index 1086379..0000000
--- a/content/9thPK7O3xn/dreams/infinite-skyscrapers.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-date:  2021-01-09
-title: Infinite Skyscrapers
----
-
-I'm in some strange world that consist of huge buildings, looking a lot like very simple skyscrapers, except they were all interconnected. I'm not even sure if there's a floor since I'm just floating, being able to fly around at will. There is also something chasing me and I'm trying to get away from it.
-
-The buildings around me get denser and more chaotic, some look like glitches in a computer game. The creature chasing me seems to absorb buildings into its body, growing larger and more powerful.
-
-Then there's a cut and I'm presumably inside one of those buildings. I'm in a dark room with barely any lighting which looks somewhat like a large office. It's very cluttered, though. There's another similar room next to this one, separated by a glass wall and a door. There's also a person with me who I seem to know, and that creature that chased me. It seems like it managed to capture us.
-
-It dares us to escape from this situation, and as soon as it said that, the room begins to get locked off. There are some red lights blinking and the door connecting our current room with the neighboring room is about to close permanently. Panicked, I quickly run through it, but the other person couldn't make it.
-
-I suddenly realize I'm a cat and the other person an even smaller critter, I don't know what. It's obvious that the creature is just playing with us, watching our futile efforts to escape for its amusement.
-
-The other person tries to get the door to open again by messing with its circuitry, and I do my best to block the creature's view from what was going on without looking suspicious.
-
-After a while, I start exploring the room and notice that there's a hallway in front of it, also separated by a glass wall and a door. However, the wall is broken in one place and has a hole large enough for me to jump through. So that's what I do. I land in a bunch of glass disks lying on the floor, breaking them, but I'm unharmed.
-
-Now being a human again, I take a glass shard with me and run through a door which leads to a staircase. It is huge, having the shape of a pill with stairs going along the edge. The center is empty so I can see all the floors coming before and after. There's no end in any direction. I know the creature will come after me soon and so I run upwards as fast as I can.
-
-I made it about 5 floors when I hear a door burst open. I quickly enter the room next to me, hoping that the creature hasn't seen me.
-
-This floor was very large and open and brightly lit. The dream starts to make no sense anymore and that's it.
diff --git a/content/9thPK7O3xn/index.md b/content/9thPK7O3xn/index.md
deleted file mode 100644
index de7fb0f..0000000
--- a/content/9thPK7O3xn/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title:    Personal
-unlisted: true
-feed:     true
----
-
-Content that doesn't belong in the public sections of my website such as test pages or posts about more personal topics.
-
-The purpose of this section is simply to be a bit tricky, but not impossible to discover.
-Feel free to share pages from here *privately* if you think someone would like them.
diff --git a/content/9thPK7O3xn/posts/index.md b/content/9thPK7O3xn/posts/index.md
deleted file mode 100644
index 8801530..0000000
--- a/content/9thPK7O3xn/posts/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title:                Posts
-position:             0
-list_read_indicators: true
-feed:                 true
----
diff --git a/content/art/index.md b/content/art/index.md
index 5ed1858..eadac7a 100644
--- a/content/art/index.md
+++ b/content/art/index.md
@@ -1,7 +1,7 @@
 ---
 title:       Art
 position:    2
-list_layout: gallery
-list_limit:  4
+list_layout: small-gallery
+list_limit:  6
 feed:        true
 ---
diff --git a/content/notebook/index.md b/content/notebook/index.md
new file mode 100644
index 0000000..8d58834
--- /dev/null
+++ b/content/notebook/index.md
@@ -0,0 +1,6 @@
+---
+title:       Notebook
+position:    3
+list_limit:  4
+feed:        true
+---
diff --git a/content/9thPK7O3xn/misc/design-test.md b/content/notebook/scrap/design-test.md
index 2367513..2367513 100644
--- a/content/9thPK7O3xn/misc/design-test.md
+++ b/content/notebook/scrap/design-test.md
diff --git a/content/9thPK7O3xn/misc/index.md b/content/notebook/scrap/index.md
index 99bc5e7..4cc3c2e 100644
--- a/content/9thPK7O3xn/misc/index.md
+++ b/content/notebook/scrap/index.md
@@ -1,6 +1,6 @@
 ---
-title:                Stuff
-position:             2
+title:                Scrap
+position:             100
 list_read_indicators: true
 feed:                 true
 ---
diff --git a/content/posts/index.md b/content/posts/index.md
deleted file mode 100644
index 4396e20..0000000
--- a/content/posts/index.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title:    Posts
-position: 3
----
diff --git a/content/services/index.md b/content/services/index.md
index 1aa41a6..9f0dce0 100644
--- a/content/services/index.md
+++ b/content/services/index.md
@@ -1,6 +1,6 @@
 ---
 title:          Services
-position:       3
+position:       4
 list_layout:    grid
 list_post_icon: arrow-up-right
 ---
diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml
index 679cdcb..35b7209 100644
--- a/metadata/metadata.yaml
+++ b/metadata/metadata.yaml
@@ -7,15 +7,18 @@ author:
 
 menus:
   main:
-    - id:     projects
-      label:  Projects
-      url:    /projects/
+    - id:     art
+      label:  Art
+      url:    /art/
+
+    - id:     notebook
+      label:  Notebook
+      url:    /notebook/
 
     - id:     profiles
       label:  Profiles
       url:    /profiles/
 
-    - id:     9thPK7O3xn
-      label:  Personal
-      url:    /9thPK7O3xn/
-      hidden: true
+    - id:     services
+      label:  Services
+      url:    /services/
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 7f94ff4..8217fd9 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -3,12 +3,10 @@
         <h1 class="o-heading o-heading--xxl u-mt-0"><span class="o-heading__primary">$title$</span></h1>
 
 $body$
-
     </header>
 
     $if(notoc)$$else$
         <nav class="c-hnav s-invisible-links">
-            $-- <h2 class="u-mt-0">Sections:</h2>
             $for(list)$
                 <small><a href="#$it.slug$">$it.title$</a></small>
             $endfor$
@@ -18,9 +16,9 @@ $body$
     <div class="l-card-list">
         $for(list)$
             <section>
-                <div class="l-media l-media--flush">
+                <header class="l-card-list__header l-media l-media--flush">
                     <div class="l-media__block l-media__block--main">
-                        <h2 class="s-invisible-links" id="$it.slug$">
+                        <h2 class="s-invisible-links u-mt-0" id="$it.slug$">
                             <a href="$it.url.rel$">$it.title$</a>
                         </h2>
                     </div>
@@ -29,13 +27,15 @@ $body$
                             $it.omitted$ more items <span class="u-ml-10">→</span>
                         </a>
                     $endif$
-                </div>
+                </header>
                 $if(it.description)$
                     <div class="s-small s-colored-links">$it.description$</div>
                 $endif$
                 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
                     $if(it.layout.is_grid)$
                         $it.items:partials/grid_card()$
+                    $elseif(it.layout.is_small-gallery)$
+                        $it.items:partials/small_gallery_card()$
                     $elseif(it.layout.is_gallery)$
                         $it.items:partials/gallery_card()$
                     $else$
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 324a01c..1037938 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,4 @@
-<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headings s-blockquotes s-code $if(intro)$s-intro$endif$">
+<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headings s-blockquotes s-code s-lists $if(intro)$s-intro$endif$">
     $if(date)$
         <div class="o-badge s-body__meta u-mb-125">
             $date.long$
diff --git a/templates/partials/ascii_fox.html b/templates/partials/ascii_fox.html
index f5e5316..bdce36b 100644
--- a/templates/partials/ascii_fox.html
+++ b/templates/partials/ascii_fox.html
@@ -3,7 +3,7 @@
          '                  '       '      '      '            '      '             '   '       '            '      '          '         
  '  .    |                  |       |      '      '            '      '             '   |       |            '      '          |       ' 
  '     | |                  |     ' |      '      '            '      '             '   |    :  |            '      '          | .     ' 
- '     ' |                  |  .    |      '      9thPK7O3xn   '      '             '   |       |            '      '          |       ' 
+ '     ' |                  |  .    |      '      '            '      '             '   |       |            '      '          |       ' 
  '       |               __~|  |    |      '      '            '      '             '   | |     |            '      '          | |     ' 
  '  '    |__          ,(    |'      |_     '      '            '       <strong>//\_</strong>         '   | '   . |            '      '          | '     ' 
  '       |   )~._   _(    . )      .|  )   '      <strong>____,...,______..,_~``  -`..,</strong>     '   |     ' |        . ( '      '          |       ' 
diff --git a/templates/partials/ascii_fox_small.html b/templates/partials/ascii_fox_small.html
index ea05aa2..97ce600 100644
--- a/templates/partials/ascii_fox_small.html
+++ b/templates/partials/ascii_fox_small.html
@@ -2,7 +2,7 @@
   '     '                                        '     '               
   |     |              '    '                '   |     |        '    ' 
   | '   |              '    '                '   |   ' |        '    ' 
-  |     |           9thPK7O3xn               '   |  .  |        '    ' 
+  |     |              '    '                '   |  .  |        '    ' 
   |   . |              '    '     <strong>//\__</strong>      '   |     |        '    ' 
   |     |          <strong>_.~-"""-----~``  ,-´</strong>      '   |'    |        '    ' 
   | |  '|       <strong>.´  ,~'\ ).,__,)/,,"</strong>         '   |  |  |        '    ' 
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index 386843f..8e6f95a 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -1,6 +1,6 @@
 $if(it.url)$
 $if(it.thumbnail)$
-    <a href="$it.url.rel$" class="l-card-list__card c-card">
+    <a href="$it.url.rel$" class="l-card-list__card c-card" title="$it.title/nowrap$">
         <div class="c-card__row l-media l-media--flush">
             <div class="c-card__thumbnail">
                 <img
diff --git a/templates/partials/small_gallery_card.html b/templates/partials/small_gallery_card.html
new file mode 100644
index 0000000..35d87e4
--- /dev/null
+++ b/templates/partials/small_gallery_card.html
@@ -0,0 +1,39 @@
+$if(it.url)$
+$if(it.thumbnail)$
+    <a href="$it.url.rel$" class="l-card-list__card c-card" title="$it.title/nowrap$">
+        <div class="c-card__row l-media l-media--flush">
+            <div class="c-card__thumbnail">
+                <img
+                    class="c-card__thumbnail-img"
+                    src="$it.thumbnail.rel$"
+                    alt="Preview thumbnail of &quot;$it.title$&quot;"
+                    loading="lazy"
+                />
+            </div>
+        </div>
+        <div class="c-card__row l-media c-card__row--hidden">
+            <div class="l-media__block l-media__block--main">
+                $if(it.subtitle)$
+                    <strong class="u-d-block u-elp">$it.title$</strong>
+                    <small class="u-d-block u-elp">$it.subtitle$</small>
+                $elseif(it.category)$
+                    <small class="u-d-block u-elp">$it.category$</small>
+                    <strong class="u-d-block u-elp">$it.title$</strong>
+                $elseif(it.date)$
+                    <time datetime="$it.date.yyyy_mm_dd$">
+                        <small class="u-d-none@sm-hi">
+                            $it.date.short$
+                        </small>
+                        <small class="u-d-none@sm-lo">
+                            $it.date.long$
+                        </small>
+                    </time>
+                    <strong class="u-d-block u-elp">$it.title$</strong>
+                $else$
+                    $it.title$
+                $endif$
+            </div>
+        </div>
+    </a>
+$endif$
+$endif$
diff --git a/yarn.lock b/yarn.lock
index 768544f..bdb8166 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,7 +1280,7 @@ internal-slot@^1.0.3:
 
 "iro-design@git+https://git.vulpes.one/git/iro-design.git":
   version "1.0.0"
-  resolved "git+https://git.vulpes.one/git/iro-design.git#df1c8e24bf97690fde881318cfb3b6285e5eda2f"
+  resolved "git+https://git.vulpes.one/git/iro-design.git#1cd5b777ee61f6713f532db30a25c53a250ceeff"
   dependencies:
     "@oddbird/blend" "^0.2.3"
     include-media "^1.4.9"