Better list layouts, added 'random' link for Fediring

14 files changed, 46 insertions, 70 deletions

diff --git a/Makefile b/Makefile
index e8ece08..7cdea67 100644
--- a/Makefile
+++ b/Makefile
@@ -34,7 +34,6 @@ feed_files:    $(FEED_FILES)
 static_files:  $(STATIC_FILES)
 font_files:    $(FONT_FILES)
 css_files:     $(CSS_FILES)
-icons:         out/icons.svg
 
 #
 # RULES
@@ -141,14 +140,21 @@ out/%.css: assets/css/%.scss $(CSS_SRC) | out
 
         sass --load-path=node_modules "$<" | ./node_modules/.bin/postcss --use autoprefixer --no-map -o "$@"
 
-out/icons.svg: | out
-        $(info [ICON] $< -> $@)
+out/%: content/% | out
+        $(info [COPY] $< -> $@)
+
+        mkdir -p $(@D)
+        cp "$<" "$@"
+
+icons: | out
+        $(info [ICON] out/icons.svg)
 
         node ./node_modules/iro-icons/scripts/create_sprite.js \
                 asterisk \
                 arrow-left \
                 arrow-right \
                 arrow-up-right \
+                shuffle \
                 envelope \
                 hash \
                 messages \
@@ -162,14 +168,7 @@ out/icons.svg: | out
                 x \
                 chevron-left \
                 chevron-right \
-                "$@"
-
-
-out/%: content/% | out
-        $(info [COPY] $< -> $@)
-
-        mkdir -p $(@D)
-        cp "$<" "$@"
+                "out/icons.svg"
 
 .cache/meta: | .cache
         mkdir -p .cache/meta
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 7a09c54..b8d343b 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -7,18 +7,22 @@
             --margin-top: fn.global-dim(--size --700),
             --spacing:    fn.global-dim(--size --200),
             --gap:        fn.global-dim(--size --25),
-            --grid: (
+            --grid-2: (
                 --gap:       fn.global-dim(--size --75),
                 --col-width: fn.global-dim(--size --3400),
             ),
-            --small-gallery: (
-                --gap:       fn.global-dim(--size --250),
+            --grid-3: (
+                --gap:       fn.global-dim(--size --75),
                 --col-width: fn.global-dim(--size --2800),
             ),
-            --gallery: (
+            --gallery-2: (
                 --gap:       fn.global-dim(--size --250),
                 --col-width: fn.global-dim(--size --3400),
-            )
+            ),
+            --gallery-3: (
+                --gap:       fn.global-dim(--size --250),
+                --col-width: fn.global-dim(--size --2800),
+            ),
         )
     ), 'dims');
 
@@ -40,7 +44,7 @@
             gap:            fn.dim(--gap);
             margin-top:     fn.dim(--spacing);
 
-            @each $mode in 'grid' 'small-gallery' 'gallery' {
+            @each $mode in 'grid-2' 'grid-3' 'gallery-2' 'gallery-3' {
                 @include iro.bem-modifier($mode) {
                     display:               grid;
                     align-items:           start;
diff --git a/content/art/doodles/index.md b/content/art/doodles/index.md
index a650a89..3605873 100644
--- a/content/art/doodles/index.md
+++ b/content/art/doodles/index.md
@@ -2,7 +2,7 @@
 title:          Doodles
 icon:           image
 position:       2
-list_layout:    gallery
+list_layout:    gallery-2
 list_order:     date_desc
 feed:           true
 ---
diff --git a/content/art/drawings/index.md b/content/art/drawings/index.md
index 31d092d..e22731e 100644
--- a/content/art/drawings/index.md
+++ b/content/art/drawings/index.md
@@ -2,7 +2,7 @@
 title:          Drawings
 icon:           image
 position:       0
-list_layout:    gallery
+list_layout:    gallery-2
 list_order:     date_desc
 feed:           true
 ---
diff --git a/content/art/emojis/index.md b/content/art/emojis/index.md
index efeda37..e897989 100644
--- a/content/art/emojis/index.md
+++ b/content/art/emojis/index.md
@@ -2,7 +2,7 @@
 title:          Emojis
 icon:           smile
 position:       1
-list_layout:    gallery
+list_layout:    gallery-2
 list_order:     date_desc
 feed:           true
 ---
diff --git a/content/art/index.md b/content/art/index.md
index 0b5072b..63032a3 100644
--- a/content/art/index.md
+++ b/content/art/index.md
@@ -1,7 +1,7 @@
 ---
 title:       Art
 position:    2
-list_layout: small-gallery
+list_layout: gallery-3
 list_order:  date_desc
 list_limit:  6
 feed:        true
diff --git a/content/fediring/index.md b/content/fediring/index.md
index 1caffef..fc5a43e 100644
--- a/content/fediring/index.md
+++ b/content/fediring/index.md
@@ -1,7 +1,7 @@
 ---
 title:       Fediring
 position:    100
-list_layout: grid
+list_layout: grid-3
 url:         https://fediring.net/
 ---
 
diff --git a/content/fediring/next.md b/content/fediring/next.md
index 3aa08a7..cb85ad7 100644
--- a/content/fediring/next.md
+++ b/content/fediring/next.md
@@ -1,6 +1,6 @@
 ---
 title:     Next website
-position:  2
+position:  3
 icon:      blank
 post_icon: arrow-right
 url:       https://fediring.net/next?host=volpeon.ink
diff --git a/content/fediring/random.md b/content/fediring/random.md
new file mode 100644
index 0000000..5911a85
--- /dev/null
+++ b/content/fediring/random.md
@@ -0,0 +1,6 @@
+---
+title:     Random website
+position:  2
+icon:      shuffle
+url:       https://fediring.net/random
+---
diff --git a/content/profiles/index.md b/content/profiles/index.md
index 3007c62..9fe9d8b 100644
--- a/content/profiles/index.md
+++ b/content/profiles/index.md
@@ -1,6 +1,6 @@
 ---
 title:          Profiles
 position:       1
-list_layout:    grid
+list_layout:    grid-2
 list_post_icon: arrow-up-right
 ---
diff --git a/content/services/index.md b/content/services/index.md
index 9f0dce0..343e028 100644
--- a/content/services/index.md
+++ b/content/services/index.md
@@ -1,6 +1,6 @@
 ---
 title:          Services
 position:       4
-list_layout:    grid
+list_layout:    grid-2
 list_post_icon: arrow-up-right
 ---
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index e8466f7..3fabd16 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -30,11 +30,13 @@ $body$
                     $endif$ 
                 </header>
                 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
-                    $if(it.layout.is_grid)$
+                    $if(it.layout.is_grid-2)$
                         $it.items:partials/grid_card()$
-                    $elseif(it.layout.is_small-gallery)$
-                        $it.items:partials/small_gallery_card()$
-                    $elseif(it.layout.is_gallery)$
+                    $elseif(it.layout.is_grid-3)$
+                        $it.items:partials/grid_card()$
+                    $elseif(it.layout.is_gallery-2)$
+                        $it.items:partials/gallery_card()$
+                    $elseif(it.layout.is_gallery-3)$
                         $it.items:partials/gallery_card()$
                     $else$
                         $it.items:partials/list_card()$
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 88102b9..ebbc2d4 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -7,9 +7,13 @@ $body$
 
     <div class="l-card-list">
         <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
-            $if(list_layout.is_grid)$
+            $if(list_layout.is_grid-2)$
                 $list:partials/grid_card()$
-            $elseif(list_layout.is_gallery)$
+            $elseif(list_layout.is_grid-3)$
+                $list:partials/grid_card()$
+            $elseif(list_layout.is_gallery-2)$
+                $list:partials/gallery_card()$
+            $elseif(list_layout.is_gallery-3)$
                 $list:partials/gallery_card()$
             $else$
                 $list:partials/list_card()$
diff --git a/templates/partials/small_gallery_card.html b/templates/partials/small_gallery_card.html
deleted file mode 100644
index 921d612..0000000
--- a/templates/partials/small_gallery_card.html
+++ /dev/null
@@ -1,39 +0,0 @@
-$if(it.url)$
-$if(it.thumbnail)$
-    <a href="$it.url.rel$" class="l-card-list__card c-card">
-        <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$