summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_basics.scss2
-rw-r--r--assets/css/components/_header.scss9
-rw-r--r--templates/base.html14
-rw-r--r--templates/layouts/categorized_list.html68
-rw-r--r--templates/layouts/gallery.html11
-rw-r--r--templates/layouts/list.html28
-rw-r--r--templates/layouts/page.html2
-rw-r--r--templates/layouts/redirect.html2
8 files changed, 74 insertions, 62 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index f2b2624..9619862 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -31,7 +31,7 @@ body {
31 box-sizing: border-box; 31 box-sizing: border-box;
32 min-height: 100%; 32 min-height: 100%;
33 margin: 0; 33 margin: 0;
34 padding: 2px; 34 padding: 0;
35} 35}
36 36
37main { 37main {
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
index 15fa5a1..56d09cd 100644
--- a/assets/css/components/_header.scss
+++ b/assets/css/components/_header.scss
@@ -15,6 +15,7 @@
15 --height: 4rem, 15 --height: 4rem,
16 --icon: 1.5rem, 16 --icon: 1.5rem,
17 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))), 17 --pad-x: calc(.5 * (var(--header--dims--height) - var(--header--dims--icon))),
18 --gap: 2px,
18 ) 19 )
19 )); 20 ));
20 21
@@ -33,6 +34,8 @@
33 @include component(namespace()) { 34 @include component(namespace()) {
34 display: flex; 35 display: flex;
35 height: prop(--dims --height); 36 height: prop(--dims --height);
37 padding: prop(--dims --gap);
38 gap: prop(--dims --gap);
36 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); 39 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
37 40
38 @include element('item') { 41 @include element('item') {
@@ -43,10 +46,6 @@
43 line-height: prop(--dims --height); 46 line-height: prop(--dims --height);
44 text-decoration: none; 47 text-decoration: none;
45 48
46 @include next-twin-element {
47 margin-left: 2px;
48 }
49
50 &:hover, 49 &:hover,
51 &:focus { 50 &:focus {
52 border-left-color: prop(--colors --hover --bg); 51 border-left-color: prop(--colors --hover --bg);
@@ -73,7 +72,7 @@
73 72
74 @include media('>=lg') { 73 @include media('>=lg') {
75 position: sticky; 74 position: sticky;
76 top: 2px; 75 top: 0;
77 margin-bottom: calc(-.75 * #{prop(--dims --height)}); 76 margin-bottom: calc(-.75 * #{prop(--dims --height)});
78 } 77 }
79 78
diff --git a/templates/base.html b/templates/base.html
index c1e1f4f..252069a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -63,17 +63,17 @@
63 </nav> 63 </nav>
64 64
65 <main> 65 <main>
66 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 66 $if(layout.is_categorized_list)$
67 $if(layout.is_categorized_list)$
68${layouts/categorized_list()} 67${layouts/categorized_list()}
69 $elseif(layout.is_list)$ 68 $elseif(layout.is_list)$
70${layouts/list()} 69${layouts/list()}
71 $elseif(layout.is_redirect)$ 70 $elseif(layout.is_redirect)$
72${layouts/redirect()} 71${layouts/redirect()}
73 $else$ 72 $elseif(layout.is_gallery)$
73${layouts/gallery()}
74 $else$
74${layouts/page()} 75${layouts/page()}
75 $endif$ 76 $endif$
76 </div>
77 </main> 77 </main>
78 78
79 <footer class="c-footer"> 79 <footer class="c-footer">
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index fd21017..76b8af1 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,39 +1,41 @@
1<header class="s-headlines s-colored-links"> 1<div class="l-container l-container--pad-x l-container--pad-y l-container--content">
2 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 2 <header class="s-headlines s-colored-links">
3 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
3 4
4$body$ 5$body$
5</header> 6 </header>
6 7
7<div class="l-card-list"> 8 <div class="l-card-list">
8 $for(list)$ 9 $for(list)$
9 <section> 10 <section>
10 <h2 class="s-invisible-links"> 11 <h2 class="s-invisible-links">
11 <a href="$it.url.rel$">$it.title$</a> 12 <a href="$it.url.rel$">$it.title$</a>
12 </h2> 13 </h2>
13 $if(it.description)$ 14 $if(it.description)$
14 <div class="s-small s-colored-links">$it.description$</div> 15 <div class="s-small s-colored-links">$it.description$</div>
15 $endif$
16 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
17 $if(it.layout.is_grid)$
18 $it.items:partials/grid_card()$
19 $elseif(it.layout.is_gallery)$
20 $it.items:partials/gallery_card()$
21 $else$
22 $it.items:partials/list_card()$
23 $endif$ 16 $endif$
24 $if(it.omitted)$ 17 <div class="l-card-list__cards l-card-list__cards--$it.layout.id$">
25 <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline"> 18 $if(it.layout.is_grid)$
26 <div class="c-card__row"> 19 $it.items:partials/grid_card()$
27 <div class="c-card__block c-card__block--main"> 20 $elseif(it.layout.is_gallery)$
28 $it.omitted$ more items 21 $it.items:partials/gallery_card()$
22 $else$
23 $it.items:partials/list_card()$
24 $endif$
25 $if(it.omitted)$
26 <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
27 <div class="c-card__row">
28 <div class="c-card__block c-card__block--main">
29 $it.omitted$ more items
30 </div>
31 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
32 <use href="/symbols.svg#icon-arrow-right"></use>
33 </svg>
29 </div> 34 </div>
30 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 35 </a>
31 <use href="/symbols.svg#icon-arrow-right"></use> 36 $endif$
32 </svg> 37 </div>
33 </div> 38 </section>
34 </a> 39 $endfor$
35 $endif$ 40 </div>
36 </div>
37 </section>
38 $endfor$
39</div> 41</div>
diff --git a/templates/layouts/gallery.html b/templates/layouts/gallery.html
new file mode 100644
index 0000000..46c47a6
--- /dev/null
+++ b/templates/layouts/gallery.html
@@ -0,0 +1,11 @@
1<article class="s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
2 $if(date)$
3 <div class="s-body__meta">
4 $date.long$
5 </div>
6 $endif$
7
8 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
9
10$body$
11</article>
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 40d85f0..bc12805 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,19 +1,19 @@
1<header class="s-headlines s-colored-links"> 1<div class="l-container l-container--pad-x l-container--pad-y l-container--content">
2 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 2 <header class="s-headlines s-colored-links">
3 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
3 4
4$body$ 5$body$
5</header> 6 </header>
6 7
7<div class="l-card-list"> 8 <div class="l-card-list">
8 <div class="l-card-list__cards l-card-list__cards--$list_layout.id$"> 9 <div class="l-card-list__cards l-card-list__cards--$list_layout.id$">
9 $if(list_layout.is_grid)$ 10 $if(list_layout.is_grid)$
10 $list:partials/grid_card()$ 11 $list:partials/grid_card()$
11 $elseif(list_layout.is_gallery)$ 12 $elseif(list_layout.is_gallery)$
12 $list:partials/gallery_card()$ 13 $list:partials/gallery_card()$
13 $else$ 14 $else$
14 $list:partials/list_card()$ 15 $list:partials/list_card()$
15 $endif$ 16 $endif$
17 </div>
16 </div> 18 </div>
17</div> 19</div>
18
19
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index 46c47a6..e4078cc 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,4 @@
1<article class="s-body s-colored-links s-headlines $if(intro)$s-intro$endif$"> 1<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$">
2 $if(date)$ 2 $if(date)$
3 <div class="s-body__meta"> 3 <div class="s-body__meta">
4 $date.long$ 4 $date.long$
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index a62f4a2..1cfc67c 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,4 +1,4 @@
1<article class="s-body s-colored-links s-headlines"> 1<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines">
2 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 2 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
3 <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p> 3 <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
4</article> 4</article>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-01 12:48:01 +0000