summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_vars.scss2
-rw-r--r--assets/css/components/_footer.scss1
-rw-r--r--assets/css/components/_outer-button.scss7
-rw-r--r--assets/css/components/_project.scss55
-rw-r--r--assets/css/layouts/_card-grid.scss8
-rw-r--r--assets/css/layouts/_project-grid.scss17
-rw-r--r--assets/css/layouts/_section.scss7
-rw-r--r--assets/css/style.scss2
-rw-r--r--content/projects/blobfox-emojis/.preview.pngbin0 -> 564103 bytes
-rw-r--r--content/projects/blobfox-emojis/index.md1
-rw-r--r--content/projects/blobfox-emojis/preview.pngbin0 -> 196757 bytes
-rwxr-xr-xscripts/build_content.sh1
-rw-r--r--scripts/metadata_filter.lua10
-rwxr-xr-xscripts/watch_content.sh2
-rw-r--r--templates/base.html15
-rw-r--r--templates/layouts/index.html29
16 files changed, 115 insertions, 42 deletions
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 756ddb8..52723a3 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -2,7 +2,7 @@ $breakpoints: (
2 lg: 1500px, 2 lg: 1500px,
3 md: 900px, 3 md: 900px,
4 sm: 600px, 4 sm: 600px,
5 xs: 320px, 5 xs: 400px,
6); 6);
7 7
8$unit-intervals: ( 8$unit-intervals: (
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index fcea457..cf02d04 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -11,7 +11,6 @@
11 align-items: center; 11 align-items: center;
12 justify-content: space-between; 12 justify-content: space-between;
13 height: prop(--dims --outer, $global: true); 13 height: prop(--dims --outer, $global: true);
14 padding-right: prop(--dims --outer, $global: true);
15 font-size: 1 / 16 * 15em; 14 font-size: 1 / 16 * 15em;
16 15
17 @include element('content') { 16 @include element('content') {
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index d636f7d..4e7a242 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -27,13 +27,6 @@
27 font-weight: 450; 27 font-weight: 450;
28 text-decoration: none; 28 text-decoration: none;
29 29
30 @include modifier('scroll-top') {
31 position: fixed;
32 z-index: 9000;
33 right: 0;
34 bottom: 0;
35 }
36
37 @include modifier('inverted') { 30 @include modifier('inverted') {
38 background-color: prop(--colors --inverted --bg); 31 background-color: prop(--colors --inverted --bg);
39 color: prop(--colors --inverted --fg); 32 color: prop(--colors --inverted --fg);
diff --git a/assets/css/components/_project.scss b/assets/css/components/_project.scss
new file mode 100644
index 0000000..943bf68
--- /dev/null
+++ b/assets/css/components/_project.scss
@@ -0,0 +1,55 @@
1@include namespace('project') {
2 @include store((
3 --colors: (
4 --bg: prop(--colors --bg-hi, $global: true),
5 )
6 ));
7
8 @include component(namespace()) {
9 position: relative;
10
11 &::before {
12 content: '';
13 display: block;
14 padding-bottom: 20em;
15 background-color: prop(--colors --bg);
16 }
17
18 &::after {
19 content: '';
20 background-image: linear-gradient(340deg, rgba(#000, .85) 5em, transparent 100%);
21 }
22
23 @include multi('element' 'picture', '&::after') {
24 display: block;
25 position: absolute;
26 z-index: 10;
27 top: 0;
28 left: 0;
29 width: 100%;
30 height: 100%;
31 object-fit: cover;
32 object-position: center center;
33 }
34
35 @include element('card') {
36 position: absolute;
37 z-index: 20;
38 right: 1em;
39 bottom: 1em;
40 min-width: 15em;
41 box-shadow: 0 .3em 1em rgba(#000, .5);
42 }
43
44 @include media('<=sm') {
45 &::after {
46 background-image: linear-gradient(to top, rgba(#000, .85) 5em, transparent 100%);
47 }
48
49 @include element('card') {
50 left: 1em;
51 min-width: 0;
52 }
53 }
54 }
55}
diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index cbc4388..7c8ad8c 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,13 +1,17 @@
1@include namespace('card-grid') { 1@include namespace('card-grid') {
2 @include store(( 2 @include store((
3 --dims: ( 3 --dims: (
4 --card-width: 17em 4 --col-width: 17em
5 ) 5 )
6 )); 6 ));
7 7
8 @include layout(namespace()) { 8 @include layout(namespace()) {
9 display: grid; 9 display: grid;
10 grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr)); 10 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
11 gap: .6rem; 11 gap: .6rem;
12
13 @include media('<=sm') {
14 grid-template-columns: 1fr;
15 }
12 } 16 }
13} 17}
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
new file mode 100644
index 0000000..df2952b
--- /dev/null
+++ b/assets/css/layouts/_project-grid.scss
@@ -0,0 +1,17 @@
1@include namespace('project-grid') {
2 @include store((
3 --dims: (
4 --col-width: 26em
5 )
6 ));
7
8 @include layout(namespace()) {
9 display: grid;
10 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
11 gap: 1rem;
12
13 @include media('<=sm') {
14 grid-template-columns: 1fr;
15 }
16 }
17}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 70ace4c..51e3dc8 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -25,7 +25,6 @@
25 left: 0; 25 left: 0;
26 flex-direction: row; 26 flex-direction: row;
27 justify-self: flex-start; 27 justify-self: flex-start;
28 padding-right: prop(--dims --outer, $global: true);
29 font-size: 1 / 16 * 15em; 28 font-size: 1 / 16 * 15em;
30 29
31 &::after { 30 &::after {
@@ -38,11 +37,5 @@
38 border-top: 1px solid prop(--colors --border); 37 border-top: 1px solid prop(--colors --border);
39 } 38 }
40 } 39 }
41
42 @include media('<=sm') {
43 @include element('head') {
44 padding-right: 0;
45 }
46 }
47 } 40 }
48} 41}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1d19aae..958710c 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -13,6 +13,7 @@
13@import 'layouts/section'; 13@import 'layouts/section';
14@import 'layouts/landing'; 14@import 'layouts/landing';
15@import 'layouts/card-grid'; 15@import 'layouts/card-grid';
16@import 'layouts/project-grid';
16 17
17@import 'objects/icon'; 18@import 'objects/icon';
18@import 'objects/button'; 19@import 'objects/button';
@@ -22,6 +23,7 @@
22@import 'components/landing-banner'; 23@import 'components/landing-banner';
23@import 'components/footer'; 24@import 'components/footer';
24@import 'components/card'; 25@import 'components/card';
26@import 'components/project';
25 27
26@import 'scopes/body'; 28@import 'scopes/body';
27 29
diff --git a/content/projects/blobfox-emojis/.preview.png b/content/projects/blobfox-emojis/.preview.png
new file mode 100644
index 0000000..16c7bf0
--- /dev/null
+++ b/content/projects/blobfox-emojis/.preview.png
Binary files differ
diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md
index 92c26d4..aea2e45 100644
--- a/content/projects/blobfox-emojis/index.md
+++ b/content/projects/blobfox-emojis/index.md
@@ -1,6 +1,7 @@
1--- 1---
2title: Blobfox 2title: Blobfox
3category: emj 3category: emj
4preview: preview.png
4--- 5---
5 6
6![](screenshot.png) 7![](screenshot.png)
diff --git a/content/projects/blobfox-emojis/preview.png b/content/projects/blobfox-emojis/preview.png
new file mode 100644
index 0000000..7e30573
--- /dev/null
+++ b/content/projects/blobfox-emojis/preview.png
Binary files differ
diff --git a/scripts/build_content.sh b/scripts/build_content.sh
index 83b6908..e627edc 100755
--- a/scripts/build_content.sh
+++ b/scripts/build_content.sh
@@ -82,6 +82,7 @@ get_subpages_metadata() {
82 date: .date, \ 82 date: .date, \
83 last_update: .last_update, \ 83 last_update: .last_update, \
84 category: .category, \ 84 category: .category, \
85 preview: .preview, \
85 content: \"$content\" \ 86 content: \"$content\" \
86 } | del(.[] | nulls)") 87 } | del(.[] | nulls)")
87 local title=$(echo "$metadata" | jq ".title") 88 local title=$(echo "$metadata" | jq ".title")
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua
index 499cf3e..21698bd 100644
--- a/scripts/metadata_filter.lua
+++ b/scripts/metadata_filter.lua
@@ -260,14 +260,18 @@ function Meta(meta)
260 260
261 meta.file_out = get_file_out(meta.rewrites, meta.content_dir, 261 meta.file_out = get_file_out(meta.rewrites, meta.content_dir,
262 meta.output_dir, meta.file_in) 262 meta.output_dir, meta.file_in)
263 if meta.relative_to == nil then 263 if meta.relative_to == nil then meta.relative_to = meta.file_in end
264 meta.relative_to = meta.file_in
265 end
266 meta.relative_to_out = get_file_out(meta.rewrites, meta.content_dir, 264 meta.relative_to_out = get_file_out(meta.rewrites, meta.content_dir,
267 meta.output_dir, meta.relative_to) 265 meta.output_dir, meta.relative_to)
268 266
269 meta.url = resolve_url(meta.site.url, meta.output_dir, meta.relative_to_out, 267 meta.url = resolve_url(meta.site.url, meta.output_dir, meta.relative_to_out,
270 meta.file_out) 268 meta.file_out)
269 if meta.preview ~= nil then
270 meta.preview = pandoc.utils.stringify(meta.preview)
271 meta.preview = meta.file_out:gsub("/index%.html$", "/" .. meta.preview)
272 meta.preview = resolve_url(meta.site.url, meta.output_dir,
273 meta.relative_to_out, meta.preview)
274 end
271 275
272 meta.date = format_date(meta.date) 276 meta.date = format_date(meta.date)
273 if meta.last_update ~= nil then 277 if meta.last_update ~= nil then
diff --git a/scripts/watch_content.sh b/scripts/watch_content.sh
index dfaa638..30f8a6c 100755
--- a/scripts/watch_content.sh
+++ b/scripts/watch_content.sh
@@ -7,7 +7,7 @@ inotifywait -qrme close_write,delete,move --format "%w%f" "${CONTENT_DIR%/}" \
7 do 7 do
8 if [ -f "$file" ]; then 8 if [ -f "$file" ]; then
9 # scripts/build_content.sh "single" "$file" 9 # scripts/build_content.sh "single" "$file"
10 scripts/build_content.sh "all_md" 10 scripts/build_content.sh
11 elif [ ! -d "$file" ]; then 11 elif [ ! -d "$file" ]; then
12 scripts/build_content.sh "delete" "$file" 12 scripts/build_content.sh "delete" "$file"
13 fi 13 fi
diff --git a/templates/base.html b/templates/base.html
index 794f83f..4ebd507 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -63,18 +63,17 @@ ${layouts/categorized_list()}
63${layouts/page()} 63${layouts/page()}
64 $endif$ 64 $endif$
65 65
66 <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
67 <span class="c-outer-button__icon">
68 <svg class="c-outer-button__icon-symbol o-icon">
69 <use href="#icon-arrow-up"></use>
70 </svg>
71 </span>
72 </a>
73
74 <footer class="c-footer"> 66 <footer class="c-footer">
75 <div class="c-footer__content"> 67 <div class="c-footer__content">
76 9thPK7O3xn 68 9thPK7O3xn
77 </div> 69 </div>
70 <a class="c-outer-button" href="#" title="To the top">
71 <span class="c-outer-button__icon">
72 <svg class="c-outer-button__icon-symbol o-icon">
73 <use href="#icon-arrow-up"></use>
74 </svg>
75 </span>
76 </a>
78 </footer> 77 </footer>
79 </main> 78 </main>
80 79
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index f97588d..d1821f2 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -50,9 +50,9 @@ $body$
50 </section> 50 </section>
51</section> 51</section>
52 52
53<section class="l-section"> 53<section class="l-section" id="projects">
54 <header class="l-section__head"> 54 <header class="l-section__head">
55 <a class="c-outer-button" href="#projects" id="projects"> 55 <a class="c-outer-button" href="#projects">
56 <span class="c-outer-button__icon"> 56 <span class="c-outer-button__icon">
57 <svg class="c-outer-button__icon-symbol o-icon"> 57 <svg class="c-outer-button__icon-symbol o-icon">
58 <use href="#icon-arrow-down-right"></use> 58 <use href="#icon-arrow-down-right"></use>
@@ -64,17 +64,22 @@ $body$
64 </a> 64 </a>
65 </header> 65 </header>
66 66
67 <div class="l-container l-container--pad-x l-container--pad-y l-container--content l-card-grid"> 67 <div class="l-container l-container--pad-x l-container--pad-y l-project-grid">
68 $for(subsections.projects.pages)$ 68 $for(subsections.projects.pages)$
69 <a class="l-card-grid__card c-card" href="$it.url.rel$"> 69 <div class="c-project">
70 <div class="c-card__content"> 70 $if(it.preview)$
71 <small class="u-db">$it.category.name$</small> 71 <img class="c-project__picture" src="$it.preview.rel$" />
72 <strong class="u-db">$it.title$</strong> 72 $endif$
73 </div> 73 <a class="c-project__card c-card" href="$it.url.rel$">
74 <svg class="c-card__icon o-icon"> 74 <div class="c-card__content">
75 <use href="#icon-arrow-right"></use> 75 <small class="u-db">$it.category.name$</small>
76 </svg> 76 <strong class="u-db">$it.title$</strong>
77 </a> 77 </div>
78 <svg class="c-card__icon o-icon">
79 <use href="#icon-arrow-right"></use>
80 </svg>
81 </a>
82 </div>
78 $endfor$ 83 $endfor$
79 </div> 84 </div>
80</section> 85</section>
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-01 12:45:00 +0000