From 269433c6f84ce631d38fd7ffaed04ed3f7c2bf4f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 20 Apr 2021 21:45:36 +0200 Subject: Support project previews --- assets/css/_vars.scss | 2 +- assets/css/components/_footer.scss | 1 - assets/css/components/_outer-button.scss | 7 ---- assets/css/components/_project.scss | 55 +++++++++++++++++++++++++++ assets/css/layouts/_card-grid.scss | 8 +++- assets/css/layouts/_project-grid.scss | 17 +++++++++ assets/css/layouts/_section.scss | 7 ---- assets/css/style.scss | 2 + content/projects/blobfox-emojis/.preview.png | Bin 0 -> 564103 bytes content/projects/blobfox-emojis/index.md | 1 + content/projects/blobfox-emojis/preview.png | Bin 0 -> 196757 bytes scripts/build_content.sh | 1 + scripts/metadata_filter.lua | 10 +++-- scripts/watch_content.sh | 2 +- templates/base.html | 15 ++++---- templates/layouts/index.html | 29 ++++++++------ 16 files changed, 115 insertions(+), 42 deletions(-) create mode 100644 assets/css/components/_project.scss create mode 100644 assets/css/layouts/_project-grid.scss create mode 100644 content/projects/blobfox-emojis/.preview.png create mode 100644 content/projects/blobfox-emojis/preview.png 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: ( lg: 1500px, md: 900px, sm: 600px, - xs: 320px, + xs: 400px, ); $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 @@ align-items: center; justify-content: space-between; height: prop(--dims --outer, $global: true); - padding-right: prop(--dims --outer, $global: true); font-size: 1 / 16 * 15em; @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 @@ font-weight: 450; text-decoration: none; - @include modifier('scroll-top') { - position: fixed; - z-index: 9000; - right: 0; - bottom: 0; - } - @include modifier('inverted') { background-color: prop(--colors --inverted --bg); 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 @@ +@include namespace('project') { + @include store(( + --colors: ( + --bg: prop(--colors --bg-hi, $global: true), + ) + )); + + @include component(namespace()) { + position: relative; + + &::before { + content: ''; + display: block; + padding-bottom: 20em; + background-color: prop(--colors --bg); + } + + &::after { + content: ''; + background-image: linear-gradient(340deg, rgba(#000, .85) 5em, transparent 100%); + } + + @include multi('element' 'picture', '&::after') { + display: block; + position: absolute; + z-index: 10; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; + } + + @include element('card') { + position: absolute; + z-index: 20; + right: 1em; + bottom: 1em; + min-width: 15em; + box-shadow: 0 .3em 1em rgba(#000, .5); + } + + @include media('<=sm') { + &::after { + background-image: linear-gradient(to top, rgba(#000, .85) 5em, transparent 100%); + } + + @include element('card') { + left: 1em; + min-width: 0; + } + } + } +} 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 @@ @include namespace('card-grid') { @include store(( --dims: ( - --card-width: 17em + --col-width: 17em ) )); @include layout(namespace()) { display: grid; - grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); gap: .6rem; + + @include media('<=sm') { + grid-template-columns: 1fr; + } } } 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 @@ +@include namespace('project-grid') { + @include store(( + --dims: ( + --col-width: 26em + ) + )); + + @include layout(namespace()) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); + gap: 1rem; + + @include media('<=sm') { + grid-template-columns: 1fr; + } + } +} 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 @@ left: 0; flex-direction: row; justify-self: flex-start; - padding-right: prop(--dims --outer, $global: true); font-size: 1 / 16 * 15em; &::after { @@ -38,11 +37,5 @@ border-top: 1px solid prop(--colors --border); } } - - @include media('<=sm') { - @include element('head') { - padding-right: 0; - } - } } } 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 @@ @import 'layouts/section'; @import 'layouts/landing'; @import 'layouts/card-grid'; +@import 'layouts/project-grid'; @import 'objects/icon'; @import 'objects/button'; @@ -22,6 +23,7 @@ @import 'components/landing-banner'; @import 'components/footer'; @import 'components/card'; +@import 'components/project'; @import 'scopes/body'; diff --git a/content/projects/blobfox-emojis/.preview.png b/content/projects/blobfox-emojis/.preview.png new file mode 100644 index 0000000..16c7bf0 Binary files /dev/null and b/content/projects/blobfox-emojis/.preview.png 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 @@ --- title: Blobfox category: emj +preview: preview.png --- ![](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 Binary files /dev/null and b/content/projects/blobfox-emojis/preview.png 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() { date: .date, \ last_update: .last_update, \ category: .category, \ + preview: .preview, \ content: \"$content\" \ } | del(.[] | nulls)") 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) meta.file_out = get_file_out(meta.rewrites, meta.content_dir, meta.output_dir, meta.file_in) - if meta.relative_to == nil then - meta.relative_to = meta.file_in - end + if meta.relative_to == nil then meta.relative_to = meta.file_in end meta.relative_to_out = get_file_out(meta.rewrites, meta.content_dir, meta.output_dir, meta.relative_to) meta.url = resolve_url(meta.site.url, meta.output_dir, meta.relative_to_out, meta.file_out) + if meta.preview ~= nil then + meta.preview = pandoc.utils.stringify(meta.preview) + meta.preview = meta.file_out:gsub("/index%.html$", "/" .. meta.preview) + meta.preview = resolve_url(meta.site.url, meta.output_dir, + meta.relative_to_out, meta.preview) + end meta.date = format_date(meta.date) 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%/}" \ do if [ -f "$file" ]; then # scripts/build_content.sh "single" "$file" - scripts/build_content.sh "all_md" + scripts/build_content.sh elif [ ! -d "$file" ]; then scripts/build_content.sh "delete" "$file" 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()} ${layouts/page()} $endif$ - - - - - - - - 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$ -
+
- + @@ -64,17 +64,22 @@ $body$
-
+
$for(subsections.projects.pages)$ - -
- $it.category.name$ - $it.title$ -
- - - - +
+ $if(it.preview)$ + + $endif$ + +
+ $it.category.name$ + $it.title$ +
+ + + + +
$endfor$
-- cgit v1.2.3-54-g00ecf