From f963a8993d0610fc45bfa2e21fb38e2040fc38b2 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Mon, 6 May 2024 08:02:07 +0000 Subject: [PATCH 1/3] feat: add page glow effect (#21) --- assets/css/document.css | 41 ++++++++++++++++++++++++++++++++++++-- assets/css/pages/index.css | 6 ++++++ 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/assets/css/document.css b/assets/css/document.css index ff7177c..ebd5489 100755 --- a/assets/css/document.css +++ b/assets/css/document.css @@ -33,6 +33,29 @@ body { font-size: 15px; } +body::before { + transition: 1s opacity; + content: ""; + position: absolute; + top: -5%; + right: 0; + width: 20%; + height: 5%; + border-radius: 100%; + z-index: 1000; + box-shadow: + 0 0 30svh 10svh rgba(var(--primer-color-accent), .2), + 0 0 30svh 60svh rgba(var(--primer-color-accent), .1), + 0 0 30svh 150svh rgba(var(--primer-color-accent), .02) + ; + opacity: 0; +} + +/* "enable" the corner glow effect on initial load when a page has been fully loaded */ +body[vv-page]::before { + opacity: 1; +} + body.search-dialog-open { overflow: hidden; } @@ -309,6 +332,20 @@ dialog.search search search-results > svg { /* # Size queries */ @media (min-width: 700px) { + /* # Cornerstones */ + + body::before { + right: unset; + left: 0; + box-shadow: + 0 0 30svh 10svh rgba(var(--primer-color-accent), .1), + 0 0 30svh 60svh rgba(var(--primer-color-accent), .05), + 0 0 30svh 150svh rgba(var(--primer-color-accent), .02) + ; + } + + /* ## Header */ + header { grid-template-columns: 1fr 250px var(--running-size); } @@ -318,9 +355,9 @@ dialog.search search search-results > svg { margin: 0 calc(var(--padding) / 2); } - /* # Menu */ + /* ### Menu */ - /* < Move the search box to the header */ + /* Move the search box to the header */ header searchbox { display: grid; } diff --git a/assets/css/pages/index.css b/assets/css/pages/index.css index 777db69..9c2c4e3 100755 --- a/assets/css/pages/index.css +++ b/assets/css/pages/index.css @@ -1,3 +1,9 @@ +/* # Overrides */ + +body[vv-page="/"]::before { + opacity: 0; +} + /* # Main styles */ /* ## Picture */ From 3154afab3c35b70b7ae7c8acfd988190dc8a24b9 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Mon, 6 May 2024 08:02:18 +0000 Subject: [PATCH 2/3] fix: interests explosion effects clamped to screen size (#22) --- assets/css/pages/about.css | 8 ++++---- assets/js/pages/about.js | 38 +++++++++++++++++++++----------------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/assets/css/pages/about.css b/assets/css/pages/about.css index e244c68..9bd3615 100755 --- a/assets/css/pages/about.css +++ b/assets/css/pages/about.css @@ -50,6 +50,8 @@ section.version { /* # Interests */ div.interests { + --text-shadow-blur: 30px; + transition: 300ms opacity; position: fixed; top: 0; @@ -58,7 +60,7 @@ div.interests { height: 100%; font-weight: bold; pointer-events: none; - font-size: 50px; + font-size: clamp(16px, 15vw, 50px); color: var(--color-accent); overflow: hidden; opacity: 0; @@ -70,9 +72,7 @@ div.interests.active { } div.interests p { - --text-shadow-blur: 30px; - - transition: 300ms transform; + transition: 500ms transform cubic-bezier(.34,0,0,.99); position: absolute; text-shadow: 0 0 var(--text-shadow-blur) black, diff --git a/assets/js/pages/about.js b/assets/js/pages/about.js index 10fe584..be75c4f 100755 --- a/assets/js/pages/about.js +++ b/assets/js/pages/about.js @@ -6,26 +6,35 @@ const randomIntFromInterval = (min, max) => { // Interest explosion effect from origin position const explodeInterests = (originX, originY) => { - // Elements can not translate more than negative- and positive from this number - const TRANS_LIMIT = 300; - const wrapper = document.querySelector("div.interests"); wrapper.classList.add("active"); + // Elements can not expand further than positive or negative of these values + const transLimitX = window.innerWidth / 4; + const transLimitY = window.innerHeight / 3; + [...wrapper.querySelectorAll("p")].forEach(element => { - /* - Generate random visuals for current element - */ + const size = element.getBoundingClientRect(); + + // Generate random HUE wheel rotation degrees const hue = randomIntFromInterval(0, 360); + // Generate random element transform rotation const rotate = randomIntFromInterval(-5, 5); - const transX = randomIntFromInterval(TRANS_LIMIT * -1, TRANS_LIMIT); - const transY = randomIntFromInterval(TRANS_LIMIT * -1, TRANS_LIMIT); + + // Generate random offsets in each direction clamped to translation limit + let transX = randomIntFromInterval(transLimitX * -1, transLimitX); + let transY = randomIntFromInterval(transLimitY * -1, transLimitY); + + // Clamp translation to screen left and right X size + transX = Math.max(0 - originX, Math.min((window.innerWidth - originX) - size.width, transX)); + // Clamp translation to top and bottom Y size + transY = Math.max(0 - originY, Math.min((window.innerHeight - originY) - size.height, transY)); // Set initial position element.style.setProperty("top", `${originY}px`); element.style.setProperty("left", `${originX}px`); - // Set random HUE rotation + // Set HUE rotation element.style.setProperty("-webkit-filter", `hue-rotate(${hue}deg)`); element.style.setProperty("filter", `hue-rotate(${hue}deg)`); @@ -39,10 +48,8 @@ const implodeInterests = () => { const wrapper = document.querySelector("div.interests"); wrapper.classList.remove("active"); - [...wrapper.querySelectorAll("p")].forEach(element => { - // Reset to initial position - element.style.setProperty("transform", "translate(0, 0)"); - }); + // Reset to initial position + [...wrapper.querySelectorAll("p")].forEach(element => element.style.setProperty("transform", "translate(0, 0)")); }; // Bind triggers for interests explosion and implotion @@ -55,10 +62,7 @@ const implodeInterests = () => { // Get absolute position of the trigger element const size = interestsElement.getBoundingClientRect(); - const x = size.x - 80; - const y = size.y - 10; - - explodeInterests(x, y); + explodeInterests(size.x, size.y); }); interestsElement.addEventListener(canHover ? "mouseleave" : "touchend", () => implodeInterests()); From 87cf63c8845d07ba8fdf3d1d25e22681c9b286a5 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Mon, 6 May 2024 08:02:28 +0000 Subject: [PATCH 3/3] fix: remove unused searchbox queryselect from index js (#23) --- assets/js/pages/index.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/assets/js/pages/index.js b/assets/js/pages/index.js index f3219e8..0eeb43f 100755 --- a/assets/js/pages/index.js +++ b/assets/js/pages/index.js @@ -106,15 +106,3 @@ if (window.matchMedia("(hover: hover)")) { // Reset color on navigation document.querySelector(vv._env.MAIN).addEventListener(vv.Navigation.events.LOADED, () => updateColor(), { once: true }); } - -// Open search box from mobile fullscreen menu -{ - // Open search dialog when searchbox is clicked - document.querySelector("menu searchbox").addEventListener("click", () => { - // Search box dialog element - document.querySelector("dialog.search").showModal(); - - // Close fullscreen menu - document.querySelector("menu").classList.remove("active"); - }); -} \ No newline at end of file