From 8c83a2ef92be845c5ffecb1434028d0c68915936 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 18 Apr 2021 15:44:32 +0200 Subject: Update --- assets/css/_utils.scss | 2 +- assets/css/_vars.scss | 28 ++--- assets/css/components/_card.scss | 2 +- assets/css/components/_footer.scss | 4 +- assets/css/components/_header.scss | 22 ++++ assets/css/components/_landing-banner.scss | 2 +- assets/css/components/_logo.scss | 19 ---- assets/css/components/_outer-button.scss | 31 +++--- assets/css/components/_section-heading.scss | 29 ----- assets/css/layouts/_landing.scss | 4 + assets/css/layouts/_section.scss | 28 ++++- assets/css/scopes/_body.scss | 26 +++++ assets/css/style.scss | 3 +- content/index.js | 2 +- content/notebook/index.md | 5 - content/projects/blobfox-emojis/index.md | 2 +- content/projects/bunhd-emojis/index.md | 2 +- metadata/metadata.yaml | 10 +- scripts/build_content.sh | 8 +- templates/base.html | 61 ++++++---- templates/layouts/categorized_list.html | 37 +++---- templates/layouts/index.html | 165 +++++++++++++--------------- templates/layouts/page.html | 18 +-- templates/symbols.svg | 6 + 24 files changed, 266 insertions(+), 250 deletions(-) create mode 100644 assets/css/components/_header.scss delete mode 100644 assets/css/components/_logo.scss delete mode 100644 assets/css/components/_section-heading.scss delete mode 100644 content/notebook/index.md diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss index 8f8170c..e8e98d2 100644 --- a/assets/css/_utils.scss +++ b/assets/css/_utils.scss @@ -1,4 +1,4 @@ -@include utility('hidden') { +@include utility('dn') { display: none; @each $breakpoint in map-keys($breakpoints) { diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 9b5fe86..71dc5d2 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss @@ -23,27 +23,29 @@ $subcontent--indent: 2em; $gray0: hsl(220, 0%, 6%); $gray1: hsl(220, 0%, 9%); $gray2: hsl(220, 0%, 15%); -$gray3: hsl(220, 0%, 29%); -$gray4: hsl(220, 0%, 54%); -$gray5: hsl(220, 0%, 73%); -$gray6: hsl(220, 0%, 100%); +$gray3: hsl(220, 0%, 20%); +$gray4: hsl(220, 0%, 33%); +$gray5: hsl(220, 0%, 54%); +$gray6: hsl(220, 0%, 73%); +$gray7: hsl(220, 0%, 100%); @include store(( --dims: ( --outer: 4rem, - --outer-spacing: 2rem, - --spacing-y: 3rem, + --outer-spacing: 1.7rem, + --spacing-y: 4rem, ), --colors: ( --bg-hi: $gray0, // Darker background --bg: $gray1, // Background --bg-lo: $gray2, // Lighter background - --obj: $gray3, + --obj-hi: $gray3, + --obj: $gray4, - --fg-hi: $gray4, // Faint text - --fg: $gray5, // Text - --fg-lo: $gray6, // Strong text + --fg-hi: $gray5, // Faint text + --fg: $gray6, // Text + --fg-lo: $gray7, // Strong text --accent: ( --h: 354, @@ -68,11 +70,11 @@ $gray6: hsl(220, 0%, 100%); } } -@include store(( +/* @include store(( --dims: ( - --outer: 4rem, + --outer: 3.5rem, ), -), 'sm'); +), 'sm'); */ :root { --heading--fg: var(--colors--fg-lo); diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 09b03b0..cb18810 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss @@ -15,7 +15,7 @@ @include store(( --dims: ( --pad-x: 1em, - --pad-y: .6em + --pad-y: .7em ) ), 'md'); diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index c20bc22..c127d02 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss @@ -2,7 +2,7 @@ @include store(( --colors: ( --fg: prop(--colors --obj, $global: true), - --border: prop(--colors --bg-lo, $global: true), + --border: prop(--colors --obj-hi, $global: true), ) )); @@ -11,6 +11,8 @@ 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') { width: 100%; diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss new file mode 100644 index 0000000..61f6f4a --- /dev/null +++ b/assets/css/components/_header.scss @@ -0,0 +1,22 @@ +@include namespace('header') { + @include store(( + --colors: ( + --fg: prop(--colors --fg-lo, $global: true), + --bg: prop(--colors --bg-hi, $global: true), + --hover: ( + --fg: prop(--colors --bg-hi, $global: true), + --bg: prop(--colors --accent --color, $global: true), + ) + ) + )); + + @include component(namespace()) { + display: flex; + position: fixed; + z-index: 10000; + top: 0; + left: 0; + flex-direction: row; + justify-content: flex-start; + } +} diff --git a/assets/css/components/_landing-banner.scss b/assets/css/components/_landing-banner.scss index f6016c4..58d64d7 100644 --- a/assets/css/components/_landing-banner.scss +++ b/assets/css/components/_landing-banner.scss @@ -10,7 +10,7 @@ @include element('title') { max-width: 7em; margin-top: 0; - transform: translateX(-.05em); + transform: translateX(-.06em); font-family: $font-fam--large; font-weight: 350; text-transform: none; diff --git a/assets/css/components/_logo.scss b/assets/css/components/_logo.scss deleted file mode 100644 index 13587c8..0000000 --- a/assets/css/components/_logo.scss +++ /dev/null @@ -1,19 +0,0 @@ -@include namespace('logo') { - @include store(( - --colors: ( - --fg: prop(--colors --fg-lo, $global: true), - --bg: prop(--colors --bg-hi, $global: true), - --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), - ) - ) - )); - - @include component(namespace()) { - position: fixed; - z-index: 10000; - top: 0; - left: 0; - } -} diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss index b92dd9e..774281d 100644 --- a/assets/css/components/_outer-button.scss +++ b/assets/css/components/_outer-button.scss @@ -7,13 +7,9 @@ --bg: prop(--colors --accent --color, $global: true), --fg: prop(--colors --bg-hi, $global: true), ), - --icon: ( + --inverted: ( --fg: prop(--colors --fg-lo, $global: true), --bg: prop(--colors --bg-hi, $global: true), - --hover: ( - --fg: prop(--colors --bg-hi, $global: true), - --bg: prop(--colors --accent --color, $global: true), - ) ) ) )); @@ -24,9 +20,17 @@ transition: background-color .2s, color .2s; background-color: prop(--colors --bg); color: prop(--colors --fg); + font-size: 1rem; font-weight: 450; text-decoration: none; + @include modifier('scroll-top') { + position: fixed; + z-index: 9000; + right: 0; + bottom: 0; + } + @include element('icon') { display: flex; position: relative; @@ -36,19 +40,16 @@ width: prop(--dims --outer, $global: true); height: 100%; transition: background-color .2s, color .2s; - background-color: prop(--colors --icon --bg); - color: prop(--colors --icon --fg); } - @include modifier('icon-only') { - @include element('icon') { - background-color: prop(--colors --bg); - color: prop(--colors --fg); - } + @include modifier('inverted') { + background-color: prop(--colors --inverted --bg); + color: prop(--colors --inverted --fg); } - - &:hover { - @include multi('&', 'element' 'icon') { + + &:link, + &:visited { + &:hover { background-color: prop(--colors --hover --bg); color: prop(--colors --hover --fg); } diff --git a/assets/css/components/_section-heading.scss b/assets/css/components/_section-heading.scss deleted file mode 100644 index 717442b..0000000 --- a/assets/css/components/_section-heading.scss +++ /dev/null @@ -1,29 +0,0 @@ -@include namespace('section-heading') { - @include store(( - --dims: ( - --pad-y: $line-height * 1rem - ), - --colors: ( - --line: prop(--colors --accent --color, $global: true), - ) - )); - - @include component(namespace()) { - margin: 0 0 prop(--dims --pad-y); - font-family: $font-fam--text; - font-size: 1 / 16 * 13em; - font-weight: bold; - letter-spacing: .2em; - text-transform: uppercase; - - &::before { - content: ''; - display: inline-block; - width: 3em; - height: 2px; - margin-right: 1.3em; - background-color: prop(--colors --line); - vertical-align: middle; - } - } -} diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss index 500849e..d1169dd 100644 --- a/assets/css/layouts/_landing.scss +++ b/assets/css/layouts/_landing.scss @@ -10,8 +10,12 @@ @include layout(namespace()) { display: flex; + box-sizing: border-box; flex-direction: row; align-items: center; + min-height: 100%; + margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); + padding-bottom: prop(--dims --outer, $global: true); @include element('banner') { width: 70%; diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss index a005ece..0ad9a61 100644 --- a/assets/css/layouts/_section.scss +++ b/assets/css/layouts/_section.scss @@ -1,10 +1,11 @@ @include namespace('section') { - @include layout(namespace()) { - box-sizing: border-box; - min-height: 100%; - margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); - padding-bottom: prop(--dims --outer, $global: true); + @include store(( + --colors: ( + --border: prop(--colors --obj-hi, $global: true), + ) + )); + @include layout(namespace()) { @include modifier('no-head') { padding-top: prop(--dims --outer, $global: true); } @@ -17,6 +18,23 @@ left: 0; flex-direction: row; justify-self: flex-start; + padding-right: prop(--dims --outer, $global: true); + font-size: 1 / 16 * 15em; + + &::after { + content: ''; + width: 100%; + height: 100%; + margin-right: prop(--dims --outer-spacing, $global: true); + margin-left: prop(--dims --outer-spacing, $global: true); + border-top: 1px solid prop(--colors --border); + } + } + + @include media('<=sm') { + @include element('head') { + padding-right: 0; + } } } } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 6fbacff..9b3a862 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -5,3 +5,29 @@ } } } +@include namespace('body') { + @include scope(namespace()) { + font-size: 1 / 16 * 18em; + + > :first-child { + margin-top: 0; + } + + h1 { + transform: translateX(-.06em); + font-family: $font-fam--large; + font-weight: 550; + text-transform: none; + } + + img { + max-width: 100%; + } + + @include iro-responsive-env(('xs', 'md')) { + h1 { + font-size: iro-responsive-set((1.8rem, 3rem)); + } + } + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index d095dec..1d19aae 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -18,9 +18,8 @@ @import 'objects/button'; @import 'components/outer-button'; -@import 'components/logo'; +@import 'components/header'; @import 'components/landing-banner'; -@import 'components/section-heading'; @import 'components/footer'; @import 'components/card'; diff --git a/content/index.js b/content/index.js index 8a24e3a..e03dec1 100644 --- a/content/index.js +++ b/content/index.js @@ -2,5 +2,5 @@ var headerEl = document.querySelector(".c-hero"); var headerTemplateEl = document.getElementById("header-sm"); var headerSmEl = headerTemplateEl.content.cloneNode("true"); -headerEl.classList.remove("u-hidden@sm-down"); +headerEl.classList.remove("u-dn@sm-down"); headerEl.appendChild(headerSmEl); diff --git a/content/notebook/index.md b/content/notebook/index.md deleted file mode 100644 index 1175625..0000000 --- a/content/notebook/index.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Notebook -layout: categorized_list -create_feed: true ---- diff --git a/content/projects/blobfox-emojis/index.md b/content/projects/blobfox-emojis/index.md index 97a186e..92c26d4 100644 --- a/content/projects/blobfox-emojis/index.md +++ b/content/projects/blobfox-emojis/index.md @@ -1,5 +1,5 @@ --- -title: Blobfox Emojis +title: Blobfox category: emj --- diff --git a/content/projects/bunhd-emojis/index.md b/content/projects/bunhd-emojis/index.md index bd89b1d..361b15d 100644 --- a/content/projects/bunhd-emojis/index.md +++ b/content/projects/bunhd-emojis/index.md @@ -1,5 +1,5 @@ --- -title: BunHD Emojis +title: BunHD category: emj --- diff --git a/metadata/metadata.yaml b/metadata/metadata.yaml index 6980efb..8716b43 100644 --- a/metadata/metadata.yaml +++ b/metadata/metadata.yaml @@ -7,16 +7,9 @@ author: menus: main: - - id: index - label: Home - url: / - id: projects label: Projects - url: /projects/ - - id: notebook - label: Notebook - url: /notebook/ - hidden: true + url: /#projects - id: personal label: Personal label_long: Personal Notebook @@ -49,6 +42,7 @@ profiles: icon: envelope username: me@volpeon.ink featured: true + url: "mailto:me@volpeon.ink" - platform: Fediverse icon: graph diff --git a/scripts/build_content.sh b/scripts/build_content.sh index c20eca8..83b6908 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh @@ -69,10 +69,10 @@ get_subpages_metadata() { fi local pages="[]" - local sections="{}" + local subsections="{}" for file_in in "${child_pages[@]}"; do - local section=$(basename "${file_in%/index.md}") + local subsection=$(basename "${file_in%/index.md}") local content=$(get_content "$file_in" | sed -z 's/\\/\\\\/g;s/\n/\\n/g;s/"/\\"/g') local metadata=$(get_metadata "$file_in" | jq "{ \ file_out: .file_out, \ @@ -92,10 +92,10 @@ get_subpages_metadata() { fi pages=$(echo "$pages" | jq ". += [ $metadata ]") - sections=$(echo "$sections" | jq ". += { \"$section\": { title: $title, pages: $subpages } }") + subsections=$(echo "$subsections" | jq ". += { \"$subsection\": { title: $title, pages: $subpages } }") done - echo "{ \"pages\": $pages, \"sections\": $sections }" + echo "{ \"pages\": $pages, \"subsections\": $subsections }" } handle () { diff --git a/templates/base.html b/templates/base.html index c7f641c..625b025 100644 --- a/templates/base.html +++ b/templates/base.html @@ -32,32 +32,51 @@ - - - + $if(section.is_index)$ + $else$ + $for(menus.main.items)$ + $if(it.active)$ + + + $it.label$ + + + $endif$ + $endfor$ + $endif$ + - $if(section.is_index)$ +
+ $if(section.is_index)$ ${layouts/index()} - $elseif(layout.is_categorized_list)$ + $elseif(layout.is_categorized_list)$ ${layouts/categorized_list()} - $else$ + $else$ ${layouts/page()} - $endif$ + $endif$ + + + + + + + + + +
+
+ 9thPK7O3xn +
+
+
${symbols.svg()} diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 8c25ec0..0e9142f 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html @@ -1,23 +1,22 @@ -
-
-
+
+
$body$ - $for(pages.by_category)$ -

- $for(it.value/first)$ - $it.category.name$ - $endfor$ -

- - $endfor$ -
+ $for(pages.by_category)$ +

+ $for(it.value/first)$ + $it.category.name$ + $endfor$ +

+ + $endfor$
-
+ + diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 4163093..327f9f5 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html @@ -1,95 +1,80 @@ -
-
-
-
-

- - I'm a red fox in disguise. - -

-

- Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. -

-
-
+
+
+
+

+ + I'm a red fox in disguise. + +

+

+ Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. +

+
+
-
-
-
- $for(profiles)$ - $if(it.featured)$ - $if(it.url)$ - - $else$ -
- $endif$ - $if(it.icon)$ - - - - $endif$ -
- $it.platform$ - $it.username$ -
- $if(it.url)$ - - - - $endif$ - $if(it.url)$ - - $else$ -
- $endif$ - $endif$ - $endfor$ -
+
+
+
+ $for(profiles)$ + $if(it.featured)$ + $if(it.url)$ + + $else$ +
+ $endif$ + $if(it.icon)$ + + + + $endif$ +
+ $it.platform$ + $it.username$ +
+ $if(it.url)$ + + + + $endif$ + $if(it.url)$ + + $else$ +
+ $endif$ + $endif$ + $endfor$ +
$body$ -
-
-
+ +
+
-
-
- - - - - - - - $sections.projects.title$ - - -
+
+
+ + + + + + + + $subsections.projects.title$ + + +
-
- $for(sections.projects.pages)$ - -
- $it.category.name$ - $it.title$ -
- - - - - $endfor$ -
-
- - -
+
+ $for(subsections.projects.pages)$ + +
+ $it.category.name$ + $it.title$ +
+ + + + + $endfor$ +
+ diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 9e7d85a..e006ddc 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html @@ -1,15 +1,7 @@ -
-
-
-
-

$title$

- $if(category)$ -

in $category.name$

- $endif$ -
+
+
+

$title$

-$body$ -
+ $body$
-
- + diff --git a/templates/symbols.svg b/templates/symbols.svg index d884bc0..958e271 100644 --- a/templates/symbols.svg +++ b/templates/symbols.svg @@ -55,5 +55,11 @@ d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015" fill="none" stroke="currentColor" /> + + + + -- cgit v1.2.3-54-g00ecf