From cda6973714d3770a887df6f6ff451636919170bb Mon Sep 17 00:00:00 2001 From: Elis Eriksson Date: Tue, 7 Jul 2026 22:35:51 +0200 Subject: more aesthetic changes + code formatting --- assets/css/highlight.css | 19 +-- assets/css/main.css | 309 ++++++++++++++++++++++------------------------- assets/css/theme.css | 21 ++-- assets/js/main.js | 38 +++--- assets/js/morph.js | 54 ++++----- assets/js/transitions.js | 90 +++++++------- 6 files changed, 258 insertions(+), 273 deletions(-) (limited to 'assets') diff --git a/assets/css/highlight.css b/assets/css/highlight.css index 26571a8..70bf1cf 100644 --- a/assets/css/highlight.css +++ b/assets/css/highlight.css @@ -9,7 +9,8 @@ code[class*="language-"], pre[class*="language-"] { background: #27212e; color: #ffffff; - font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* this is the default */ + font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + /* this is the default */ /* The following properties are standard, please leave them as they are */ font-size: 1em; direction: ltr; @@ -46,17 +47,21 @@ pre[class*="language-"] ::selection { /* Properties specific to code blocks */ pre[class*="language-"] { - padding: 1em; /* this is standard */ - margin: 0.5em 0; /* this is the default */ - overflow: auto; /* this is standard */ + padding: 1em; + /* this is standard */ + margin: 0.5em 0; + /* this is the default */ + overflow: auto; + /* this is standard */ border-radius: 0.5em; } /* Properties specific to inline code */ -:not(pre) > code[class*="language-"] { +:not(pre)>code[class*="language-"] { padding: 0.2em 0.3em; border-radius: 0.5rem; - white-space: normal; /* this is standard */ + white-space: normal; + /* this is standard */ } .token.comment, @@ -130,4 +135,4 @@ pre[class*="language-"] { .token.namespace { opacity: 0.7; -} \ No newline at end of file +} diff --git a/assets/css/main.css b/assets/css/main.css index 4b99331..4102e16 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,247 +1,226 @@ @import url("./theme.css"); body { - background: var(--base); - color: var(--text); - margin: 0; - padding: 0.5rem; + color: var(--text); + margin: 0; + background-color: #040404; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); } -main > h1 { +main>h1 { text-align: center; } -a { - color: var(--text); - --brackets-color: var(--accent); - padding: 0.2rem; - /* clip-path: polygon(0% 0,0% calc(100% - 0.2rem), 0.2rem 100%,100% 100%, 100% 0%); */ - border-radius: 0rem; - text-decoration: none; - position: relative; - isolation: isolate; -} -/* -a[target="_blank"]::before { - content: ""; - background-color: currentColor; - clip-path: polygon(0% 0, 100% 100%, 100% 0%); - position: absolute; - top: 0; - width: 0.4rem; - height: 0.4rem; - right: 0; - z-index: -1; +div.solidbg { + background-color: var(--base); + max-width: fit-content; + min-width: calc(90ch + 2.8rem); + margin-inline: auto; + padding: 1rem; + min-height: calc(100vh - 1rem); } +a { + color: var(--text); + --brackets-color: var(--accent); + padding: 0.2rem; + border-radius: 0rem; + text-decoration: none; + position: relative; + isolation: isolate; +} -a::after { - content: ""; - background-color: var(--text); - position: absolute; - width: 100%; - height: 0.2rem; - bottom: 0; - border-radius: 0; - left: 0; - z-index: -1; -}*/ a::after, a::before { - content: "["; - color: var(--brackets-color); + content: "["; + color: var(--brackets-color); } + a::after { - content: "]"; + content: "]"; } + a[target="_blank"]::before { - content: "{"; + content: "{"; } + a[target="_blank"]::after { - content: "}"; + content: "}"; } a.active, a:focus, a:hover { - background: var(--text); - color: var(--base); - --brackets-color: var(--base-3); + background: var(--text); + color: var(--base); + --brackets-color: var(--base-3); } header { - background: repeating-linear-gradient(45deg,var(--base) 0rem,var(--base) 1rem,var(--base-2) 1rem,var(--base-2) 2rem); - border: var(--base-2) 1px solid; - padding-inline: 0.4rem; - max-width: 90ch; - height: 4rem; - margin-inline: auto; - display: flex; - justify-content: space-between; - align-items: center; + background: repeating-linear-gradient(45deg, var(--base) 0rem, var(--base) 1rem, var(--base-2) 1rem, var(--base-2) 2rem); + border: var(--base-2) 1px solid; + padding-inline: 0.4rem; + max-width: 90ch; + height: 4rem; + margin-inline: auto; + display: flex; + justify-content: space-between; + align-items: center; } + header h1 { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } + header .logo { - display: flex; - align-items: center; - gap: 0.5rem; - padding-inline: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; + padding-inline: 0.5rem; } header .logo::before, header .logo::after { - content: none; + content: none; } + header .logo svg { - height: 2rem; - width: auto; + height: 2rem; + width: auto; } nav ul { - padding: 0; - margin: 0; - display: flex; - justify-content: right; - list-style: none; - font-size: large; - gap: 0.4rem; -} -/* -header a::after {display: none;} -header li a::after { - display: block; - top: 50%; left: -0.2rem; width: 1px; height: 50%; transform: translate(-50%, -50%); - opacity: 50%; + padding: 0; + margin: 0; + display: flex; + justify-content: right; + list-style: none; + font-size: large; + gap: 0.4rem; } -header li:first-child a::after {display: none;} -*/ main { - max-width: 80ch; - margin-inline: auto; + max-width: 80ch; + margin-inline: auto; } code:not([class*="language-"]) { - background-color: var(--code); - color: var(--code-text); - padding: 0.2rem; - border-radius: 0; - clip-path: polygon(0% 0,0% calc(100% - 0.4rem), 0.4rem 100%,100% 100%, 100% 0%); + background-color: var(--code); + color: var(--code-text); + padding: 0.2rem; + border-radius: 0; + clip-path: polygon(0% 0, 0% calc(100% - 0.4rem), 0.4rem 100%, 100% 100%, 100% 0%); } + pre[class*="language-"] { - position: relative; - padding: 1.5rem 1rem; - overflow-x: auto; - border-radius: 0; - clip-path: polygon(0% 0,0% calc(100% - 0.4rem), 0.4rem 100%,100% 100%, 100% 0%); - font-family: "JetBrains Mono", monospace; + position: relative; + padding: 1.5rem 1rem; + overflow-x: auto; + border-radius: 0; + clip-path: polygon(0% 0, 0% calc(100% - 0.4rem), 0.4rem 100%, 100% 100%, 100% 0%); + font-family: "JetBrains Mono", monospace; } + pre[class*="language-"] * { - font-family: "JetBrains Mono", monospace; + font-family: "JetBrains Mono", monospace; } footer { - max-width: 80ch; - margin-inline: auto; - margin-top: 4rem; + max-width: 80ch; + margin-inline: auto; + margin-top: 4rem; } + footer .social { - margin-top: 1rem; - max-width: fit-content; - display: flex; - gap: 0.2rem; - margin-inline: auto; - flex-wrap: wrap; - justify-content: center; + margin-top: 1rem; + max-width: fit-content; + display: flex; + gap: 0.2rem; + margin-inline: auto; + flex-wrap: wrap; + justify-content: center; } .my-age { - cursor:help; -} - -picture { - display: block; - text-align: center; - max-width: 100%; - margin-block: 2rem; -} -picture img { - max-width: 100%; + cursor: help; } @media screen and (max-width: 80ch) { - header h1 { - font-size: medium; - } + header h1 { + font-size: medium; + } } .mobile-menu { - display: none; + display: none; } @media screen and (max-width: 720px) { - nav { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-sizing: border-box; - background-color: var(--base); - z-index: 10000; - padding: 1.5rem 0.5rem; - transform: scale(0%); - filter: saturate(0) brightness(0); - pointer-events: none; - transition: transform steps(8) 200ms 300ms,filter steps(4) 200ms 0ms; - overflow-y: auto; - } - .mobile-menu { - display: block; - background: none; - color: var(--text); - border: none; - font-weight: bold; - padding: 0.8rem; - } - - nav.open { - transform: scale(100%); - pointer-events: all; - filter: saturate(1) brightness(1); - transition: transform steps(8) 200ms,filter steps(4) 200ms 300ms; - } - nav ul { - flex-direction: column; - } - nav .mobile-menu { - width: 100%; - text-align: right; - margin-bottom: 1rem; - } - nav ul a { - display: block; - padding: 0.5rem; - } + nav { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + background-color: var(--base); + z-index: 10000; + padding: 1.5rem 0.5rem; + transform: scale(0%); + filter: saturate(0) brightness(0); + pointer-events: none; + transition: transform steps(8) 200ms 300ms, filter steps(4) 200ms 0ms; + overflow-y: auto; + } + + .mobile-menu { + display: block; + background: none; + color: var(--text); + border: none; + font-weight: bold; + padding: 0.8rem; + } + + nav.open { + transform: scale(100%); + pointer-events: all; + filter: saturate(1) brightness(1); + transition: transform steps(8) 200ms, filter steps(4) 200ms 300ms; + } + + nav ul { + flex-direction: column; + } + + nav .mobile-menu { + width: 100%; + text-align: right; + margin-bottom: 1rem; + } + + nav ul a { + display: block; + padding: 0.5rem; + } } .split { - display: flex; + display: flex; } a.blogpost { - display:block; + display: block; } + a.blogpost:after, a.blogpost:before { content: ""; } -a.blogpost > h3 { - margin:0; +a.blogpost>h3 { + margin: 0; } blockquote { diff --git a/assets/css/theme.css b/assets/css/theme.css index d35448b..5476101 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -1,13 +1,14 @@ html { - --base: #151617; - --base-2: #1d2123; - --base-3: #2a3039; - --text: #d2e7efff; - --code: #1d2123; - --code-text: #abd1de; - --accent: #278db6; - font-family: "Kode Mono", monospace; + --base: #151617; + --base-2: #1d2123; + --base-3: #2a3039; + --text: #d2e7efff; + --code: #1d2123; + --code-text: #abd1de; + --accent: #278db6; + font-family: "Kode Mono", monospace; } + * { - font-family: "Kode Mono", monospace; -} \ No newline at end of file + font-family: "Kode Mono", monospace; +} diff --git a/assets/js/main.js b/assets/js/main.js index d32765e..587ee3e 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -3,8 +3,8 @@ const menu = document.getElementById("menu"); const menuClose = document.getElementById("menu-close"); if (menu && menuOpen && menuClose) { - menuOpen.addEventListener("click", () => menu.classList.add("open")); - menuClose.addEventListener("click", () => menu.classList.remove("open")); + menuOpen.addEventListener("click", () => menu.classList.add("open")); + menuClose.addEventListener("click", () => menu.classList.remove("open")); } @@ -12,24 +12,24 @@ const elements = document.querySelectorAll(".my-age") const specificDate = new Date("2010-05-11T22:50:00"); const updateAge = () => { - const currentDate = new Date(); - const age = ( - (currentDate - specificDate) / - (1000 * 60 * 60 * 24 * 365.25) - ).toFixed(15); - let nextBirthday = new Date(specificDate); - nextBirthday.setFullYear(currentDate.getFullYear()); - if (currentDate > nextBirthday) { - nextBirthday.setFullYear(currentDate.getFullYear() + 1); - } - const timeDiff = nextBirthday - currentDate; - const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); + const currentDate = new Date(); + const age = ( + (currentDate - specificDate) / + (1000 * 60 * 60 * 24 * 365.25) + ).toFixed(15); + let nextBirthday = new Date(specificDate); + nextBirthday.setFullYear(currentDate.getFullYear()); + if (currentDate > nextBirthday) { + nextBirthday.setFullYear(currentDate.getFullYear() + 1); + } + const timeDiff = nextBirthday - currentDate; + const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); - elements.forEach(e => { - e.textContent = `${age}`; - e.title = `${daysLeft} days left`; - }) - requestAnimationFrame(updateAge); + elements.forEach(e => { + e.textContent = `${age}`; + e.title = `${daysLeft} days left`; + }) + requestAnimationFrame(updateAge); } updateAge(); diff --git a/assets/js/morph.js b/assets/js/morph.js index 728ff1f..aea6dff 100644 --- a/assets/js/morph.js +++ b/assets/js/morph.js @@ -1,43 +1,43 @@ const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@._-"; function morph(element, target) { - clearInterval(element._timer); + clearInterval(element._timer); - const start = element.textContent; - const length = Math.max(start.length, target.length); + const start = element.textContent; + const length = Math.max(start.length, target.length); - let progress = 0; + let progress = 0; - element._timer = setInterval(() => { - progress += 0.05; + element._timer = setInterval(() => { + progress += 0.05; - const currentLength = Math.round( - start.length + (target.length - start.length) * progress - ); + const currentLength = Math.round( + start.length + (target.length - start.length) * progress + ); - let output = ""; + let output = ""; - for (let i = 0; i < currentLength; i++) { - if (progress > i / currentLength + 0.2 && target[i]) { - output += target[i]; - } else { - output += CHARS[Math.floor(Math.random() * CHARS.length)]; - } - } + for (let i = 0; i < currentLength; i++) { + if (progress > i / currentLength + 0.2 && target[i]) { + output += target[i]; + } else { + output += CHARS[Math.floor(Math.random() * CHARS.length)]; + } + } - element.textContent = output; + element.textContent = output; - if (progress >= 1) { - clearInterval(element._timer); - element.textContent = target; - } - }, 15); + if (progress >= 1) { + clearInterval(element._timer); + element.textContent = target; + } + }, 15); } for (const link of document.querySelectorAll(".morph")) { - const original = link.textContent; - const alternate = link.dataset.alt; + const original = link.textContent; + const alternate = link.dataset.alt; - link.addEventListener("mouseenter", () => morph(link, alternate)); - link.addEventListener("mouseleave", () => morph(link, original)); + link.addEventListener("mouseenter", () => morph(link, alternate)); + link.addEventListener("mouseleave", () => morph(link, original)); } diff --git a/assets/js/transitions.js b/assets/js/transitions.js index 3955a67..a8042b8 100644 --- a/assets/js/transitions.js +++ b/assets/js/transitions.js @@ -2,61 +2,61 @@ const displacement = document.getElementById("displacement"); const noise = document.getElementById("noise"); -var nextFunc = () => {} +var nextFunc = () => { } function transitionOut(callback) { - document.body.style.filter = "url(#transition)" - const src = new Number(displacement.getAttribute("scale")); - noise.setAttribute("seed",Math.random() * 1000) - if (src < 100) { - displacement.setAttribute("scale", src + 20 + src); - nextFunc = () => transitionOut(callback) - requestAnimationFrame(nextFunc) - } else { - setTimeout(() =>{ - document.body.style.filter = "" - },1000); - callback() - } + document.body.style.filter = "url(#transition)" + const src = new Number(displacement.getAttribute("scale")); + noise.setAttribute("seed", Math.random() * 1000) + if (src < 100) { + displacement.setAttribute("scale", src + 20 + src); + nextFunc = () => transitionOut(callback) + requestAnimationFrame(nextFunc) + } else { + setTimeout(() => { + document.body.style.filter = "" + }, 1000); + callback() + } } function transitionIn() { - document.body.style.filter = "url(#transition)" - const src = new Number(displacement.getAttribute("scale")); - noise.setAttribute("seed",Math.random() * 1000) - if (src > 0) { - displacement.setAttribute("scale", src - 1 - (Math.max(src,1)/4)); - nextFunc = () => transitionIn(); - requestAnimationFrame(nextFunc) - } else { - displacement.setAttribute("scale", 0); - document.body.style.filter = "" - } + document.body.style.filter = "url(#transition)" + const src = new Number(displacement.getAttribute("scale")); + noise.setAttribute("seed", Math.random() * 1000) + if (src > 0) { + displacement.setAttribute("scale", src - 1 - (Math.max(src, 1) / 4)); + nextFunc = () => transitionIn(); + requestAnimationFrame(nextFunc) + } else { + displacement.setAttribute("scale", 0); + document.body.style.filter = "" + } } if (noise && displacement) { - displacement.setAttribute("scale", 200); - transitionIn() - const links = document.querySelectorAll("a"); - links.forEach(l => { - if (l.hasAttribute("no-transition")) return; - if (l.href.startsWith(location.origin)) { - l.addEventListener("click", (e)=>{ - e.preventDefault() - displacement.setAttribute("scale", 0); - transitionOut(() => { - location.href = l.href - }); - }) - } - }) + displacement.setAttribute("scale", 200); + transitionIn() + const links = document.querySelectorAll("a"); + links.forEach(l => { + if (l.hasAttribute("no-transition")) return; + if (l.href.startsWith(location.origin)) { + l.addEventListener("click", (e) => { + e.preventDefault() + displacement.setAttribute("scale", 0); + transitionOut(() => { + location.href = l.href + }); + }) + } + }) } else { - console.log("Can't do transitions!!") + console.log("Can't do transitions!!") } // for when going forwards or back window.addEventListener("pageshow", (e) => { - if (e.persisted) { - displacement.setAttribute("scale", 200); - transitionIn(); - } + if (e.persisted) { + displacement.setAttribute("scale", 200); + transitionIn(); + } }); -- cgit v1.3-7-ge9ab