From 6a92a0bbeb9349cf95f1151287c3a595897ea490 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Sat, 1 Feb 2025 01:41:52 +0100 Subject: [PATCH] wip: 2025-01-31T16:07:49+0100 (1738336069) --- public/assets/css/pages/about.css | 1 + public/assets/css/pages/contact.css | 16 ++++++------ public/assets/css/pages/work.css | 22 ++++++++-------- public/assets/css/pages/work/timeline.css | 3 ++- public/assets/css/pages/work/wip.css | 1 + public/assets/css/shell.css | 29 +++++++++++++++++++++- public/assets/js/shell.js | 7 +++--- public/assets/media/spinner.gif | Bin 0 -> 1806 bytes public/work/wip.php | 12 ++++++++- 9 files changed, 66 insertions(+), 25 deletions(-) create mode 100644 public/assets/media/spinner.gif diff --git a/public/assets/css/pages/about.css b/public/assets/css/pages/about.css index 8907ddd..47248b3 100644 --- a/public/assets/css/pages/about.css +++ b/public/assets/css/pages/about.css @@ -3,6 +3,7 @@ :root { --primer-color-accent: 148, 255, 21; --color-accent: rgb(var(--primer-color-accent)); + --hue-accent: 390deg; --primer-color-go: 0, 173, 216; --primer-color-php: 79, 93, 149; diff --git a/public/assets/css/pages/contact.css b/public/assets/css/pages/contact.css index bb7b2ff..41f46ae 100644 --- a/public/assets/css/pages/contact.css +++ b/public/assets/css/pages/contact.css @@ -3,6 +3,7 @@ :root { --primer-color-accent: 255, 195, 255; --color-accent: rgb(var(--primer-color-accent)); + --hue-accent: 200deg; } vv-shell { @@ -28,10 +29,6 @@ section.center { text-align: center; } -section.fade { - opacity: .3; -} - /* ## Social */ section.social { @@ -81,11 +78,12 @@ section.pgp { max-width: 800px; position: relative; display: flex; + border-radius: 12px; flex-direction: column; gap: var(--padding); text-align: center; background-color: rgba(var(--primer-color-accent), .15); - padding: calc(var(--padding) * 1.5); + padding: var(--padding); transform: rotate(-1.5deg); } @@ -108,10 +106,6 @@ section.pgp .buttons { gap: var(--padding); } -section.pgp .buttons .download svg.chevron { - transform: unset; -} - /* ## Contact form */ section.form :is(input, textarea) { @@ -200,6 +194,10 @@ section.form-message.sent + section.form { /* # Size queries */ @media (min-width: 460px) { + section.pgp { + padding: calc(var(--padding) * 1.5); + } + section.pgp .buttons { flex-direction: row; justify-content: center; diff --git a/public/assets/css/pages/work.css b/public/assets/css/pages/work.css index c9fb172..0cb02c4 100644 --- a/public/assets/css/pages/work.css +++ b/public/assets/css/pages/work.css @@ -3,9 +3,10 @@ :root { --primer-color-accent: 3, 255, 219; --color-accent: rgb(var(--primer-color-accent)); + --hue-accent: 90deg; - --color-reflect: 220, 26, 0; - --color-vegvisir: 0, 128, 255; + --primer-color-reflect: 220, 26, 0; + --primer-color-vegvisir: 0, 128, 255; } vv-shell { @@ -22,7 +23,7 @@ vv-shell { /* ## Hero */ section.hero { - --color-accent: rgba(255, 255, 255); + --color-accent: rgb(255, 255, 255); display: grid; gap: var(--padding); @@ -65,19 +66,21 @@ section.hero .actions { /* ### Vegivisr */ section.hero .item.vegvisir { - --color-accent: var(--color-vegvisir); + --primer-color-accent: var(--primer-color-vegvisir); + --color-accent: rgb(var(--primer-color-vegvisir)); - color: rgb(var(--color-vegvisir)); - background-color: rgba(var(--color-vegvisir), .1); + color: var(--color-vegvisir); + background-color: rgba(var(--primer-color-vegvisir), .1); } /* ### Reflect */ section.hero .item.reflect { - --color-accent: var(--color-reflect); + --primer-color-accent: var(--primer-color-reflect); + --color-accent: rgb(var(--primer-color-reflect)); - color: rgb(var(--color-reflect)); - background-color: rgba(var(--color-reflect), .2); + color: var(--color-reflect); + background-color: rgba(var(--primer-color-reflect), .2); } /* ## Heading */ @@ -90,7 +93,6 @@ section.heading { } section.heading svg { - fill: white; height: 2em; } diff --git a/public/assets/css/pages/work/timeline.css b/public/assets/css/pages/work/timeline.css index d3228d6..9556582 100644 --- a/public/assets/css/pages/work/timeline.css +++ b/public/assets/css/pages/work/timeline.css @@ -3,6 +3,7 @@ :root { --primer-color-accent: 3, 255, 219; --color-accent: rgb(var(--primer-color-accent)); + --hue-accent: 90deg; } vv-shell { @@ -27,7 +28,7 @@ section.git { border-radius: 6px; } -section.git svg { +section.git > svg { fill: white; width: 60px; } diff --git a/public/assets/css/pages/work/wip.css b/public/assets/css/pages/work/wip.css index aa7c498..1e71dc1 100644 --- a/public/assets/css/pages/work/wip.css +++ b/public/assets/css/pages/work/wip.css @@ -3,6 +3,7 @@ :root { --primer-color-accent: 3, 255, 219; --color-accent: rgb(var(--primer-color-accent)); + --hue-accent: 90deg; } vv-shell { diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css index e940adf..c66c464 100644 --- a/public/assets/css/shell.css +++ b/public/assets/css/shell.css @@ -11,7 +11,8 @@ /* # Cornerstones */ * { - margin: 0; + margin: 0; + fill: inherit; box-sizing: border-box; font-family: "Roboto Mono", sans-serif; color: inherit; @@ -88,6 +89,32 @@ h3 { font-size: 25px; } +/* ## Page transition */ + +[vv-loading] * { + transition: 200ms opacity; +} + +[vv-loading="true"] * { + opacity: 0; + pointer-events: none; +} + +[vv-loading="true"]::after { + content: ""; + position: fixed; + top: 50%; + left: 50%; + width: 45px; + height: 49px; + background-size: contain; + image-rendering: pixelated; + transform: translate(-50%, -50%); + background-image: url("/assets/media/spinner.gif"); + -webkit-filter: hue-rotate(var(--hue-accent)); + filter: hue-rotate(var(--hue-accent)); +} + /* ## Buttons */ button { diff --git a/public/assets/js/shell.js b/public/assets/js/shell.js index 25e6c3e..3b307c8 100644 --- a/public/assets/js/shell.js +++ b/public/assets/js/shell.js @@ -2,6 +2,9 @@ import { Elevent } from "/assets/js/modules/npm/Elevent.mjs"; const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive"; +// Set global Vegvisir naviation delay for page transition effect +globalThis.vegvisir.globalNavigationDelayMs = 100; + // Handle search box open/close buttons { // Open search box @@ -50,6 +53,4 @@ const CLASSNAME_SEARCHBOX_ACTIVE = "searchboxActive"; } // Scroll page to top on navigation -{ - document.addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => window.scrollTo({top: 0})); -} \ No newline at end of file +document.addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => window.scrollTo({ top: 0 })); \ No newline at end of file diff --git a/public/assets/media/spinner.gif b/public/assets/media/spinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5975c047d17e5e80ab2024a712ee4dfee57693d GIT binary patch literal 1806 zcmZ?wbhEHbdXVG?IV zZ?^oGB;6SxGfwMh$947JVrUY*L6#XJAT#zRvGfR?&}Qa{$PjK>7)ZKrfbp{Ow64yh ziHcF2uXxof@<~r&V9zLM&+EE0)8XYo$yRa$M2q`Ugipb|0L4R0{!e51+1TR)mlq8p198P3n6u94ZbD?RGlsep$xDo%GBi%#xCMs7gkrq(AJ`1n!wd z+%A6P7}By#BTMFvV4#}i#~hslR1H$;e~W!Z^t#@K+quxb`I$M-v1Ne@+^85z?z zNj?%z^sWAQaoHz+CNj-9DYVEyL+A7~yWPL}>qs|45af=NLP^cq5*s(&+w+^B^n?mE zVo|g9oYu|v_EeLT`9ZG8lvu=^$hvjf37{*g$n?ohA+Q+~_+;8nfko8;7nR>#-19q> Hfx#L8XrSo} literal 0 HcmV?d00001 diff --git a/public/work/wip.php b/public/work/wip.php index b43bd06..c2e4ec6 100644 --- a/public/work/wip.php +++ b/public/work/wip.php @@ -1,8 +1,18 @@ +

Soon, very soon!

Bear with me as I cook up some texts about this project! Hopefully with some pictures too.

- +
\ No newline at end of file