Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
parent
15b78a4e3e
commit
4f1df2b856
GPG key ID:
D2BBDF3EDE6BA9A6
7 changed files with 11 additions and 208 deletions
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 74 KiB |
|
|
@ -1,29 +1,9 @@
|
|||
---
|
||||
import ThemeIcon from './ThemeIcon.astro';
|
||||
---
|
||||
<script type="module" client:load>
|
||||
const updateSvgColorForTheme = () => {
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const svgPath = document.getElementById('gobackPath');
|
||||
if (svgPath) {
|
||||
svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#2E4033');
|
||||
}
|
||||
};
|
||||
|
||||
updateSvgColorForTheme();
|
||||
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', updateSvgColorForTheme);
|
||||
}
|
||||
</script>
|
||||
<header class="flex justify-between items-center py-5">
|
||||
<div>
|
||||
<a class="text-l font-semibold" href="/blog">
|
||||
<svg id="gobackSvg" class="w-6 h-6" aria-label="Go Back Icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path id="gobackPath" stroke="#3B2C29" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
|
||||
<path id="gobackPath" stroke="#cdd6f4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<ThemeIcon />
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,14 @@
|
|||
<script type="module" client:load>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const forgejoSvg = document.getElementById("forgejoSvg");
|
||||
const xxiivvwebringSvg = document.getElementById("xxiivvwebringSvg");
|
||||
const rssSvg = document.getElementById("rssIcon");
|
||||
|
||||
const updateSvgForTheme = () => {
|
||||
const currentTheme = document.documentElement.classList.contains("dark") ? "dark" : "light";
|
||||
const strokeColor = currentTheme === "dark" ? "#89b4fa" : "#00CC6A";
|
||||
const hoverColor = currentTheme === "dark" ? "#b4c0f4" : "#789085";
|
||||
|
||||
const addHoverEffect = (svg, strokeOrFill) => {
|
||||
const paths = svg.querySelectorAll("path");
|
||||
|
||||
svg.addEventListener("mouseenter", () => {
|
||||
paths.forEach((path) => {
|
||||
path.setAttribute(strokeOrFill, hoverColor);
|
||||
});
|
||||
});
|
||||
|
||||
svg.addEventListener("mouseleave", () => {
|
||||
paths.forEach((path) => {
|
||||
path.setAttribute(strokeOrFill, strokeColor);
|
||||
});
|
||||
});
|
||||
|
||||
paths.forEach((path) => {
|
||||
path.setAttribute(strokeOrFill, strokeColor);
|
||||
});
|
||||
};
|
||||
|
||||
addHoverEffect(forgejoSvg, "fill");
|
||||
addHoverEffect(xxiivvwebringSvg, "stroke");
|
||||
addHoverEffect(rssSvg, "fill");
|
||||
};
|
||||
|
||||
updateSvgForTheme();
|
||||
|
||||
const themeToggle = document.getElementById("themeToggle");
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener("click", updateSvgForTheme);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<footer class="flex justify-evenly py-5 mt-5 footerbg">
|
||||
<div class="flex gap-6">
|
||||
<a href="https://code.kjelsrud.dev/sidski" target="_blank" aria-label="Link to my ForgeJo instance">
|
||||
<div id="forgejoIcon">
|
||||
<svg id="forgejoSvg" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#00CC6A" d="M89.457 0C83.719 0 78.68 3.195 76.012 7.887h-7.176c-20.844 0-37.902 17.059-37.902 37.902v53.265c-4.691 2.672-7.883 7.709-7.883 13.443c0 8.488 6.977 15.471 15.465 15.471s15.465-6.982 15.465-15.471c0-5.738-3.199-10.775-7.887-13.443V87.027c0-12.645 10.094-22.738 22.742-22.738h7.176c2.668 4.688 7.707 7.883 13.445 7.883c8.484 0 15.465-6.98 15.465-15.465s-6.977-15.465-15.465-15.465c-5.738 0-10.777 3.195-13.445 7.883h-7.176c-8.515 0-16.396 2.849-22.742 7.639V45.789a22.62 22.62 0 0 1 22.742-22.738h7.176c2.668 4.688 7.707 7.883 13.445 7.883c8.488 0 15.465-6.98 15.465-15.465S97.945 0 89.457 0m0 9.098c3.574 0 6.367 2.797 6.367 6.371s-2.793 6.367-6.367 6.367a6.3 6.3 0 0 1-6.367-6.367a6.3 6.3 0 0 1 6.367-6.371m0 41.242c3.574 0 6.367 2.797 6.367 6.367a6.29 6.29 0 0 1-6.367 6.363a6.29 6.29 0 0 1-6.367-6.363a6.3 6.3 0 0 1 6.367-6.367m-50.941 55.793a6.3 6.3 0 0 1 6.363 6.367c0 3.574-2.797 6.371-6.363 6.371c-3.574 0-6.367-2.797-6.367-6.371s2.793-6.367 6.367-6.367"/></svg>
|
||||
<svg id="forgejoSvg" width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#89b4fa" d="M89.457 0C83.719 0 78.68 3.195 76.012 7.887h-7.176c-20.844 0-37.902 17.059-37.902 37.902v53.265c-4.691 2.672-7.883 7.709-7.883 13.443c0 8.488 6.977 15.471 15.465 15.471s15.465-6.982 15.465-15.471c0-5.738-3.199-10.775-7.887-13.443V87.027c0-12.645 10.094-22.738 22.742-22.738h7.176c2.668 4.688 7.707 7.883 13.445 7.883c8.484 0 15.465-6.98 15.465-15.465s-6.977-15.465-15.465-15.465c-5.738 0-10.777 3.195-13.445 7.883h-7.176c-8.515 0-16.396 2.849-22.742 7.639V45.789a22.62 22.62 0 0 1 22.742-22.738h7.176c2.668 4.688 7.707 7.883 13.445 7.883c8.488 0 15.465-6.98 15.465-15.465S97.945 0 89.457 0m0 9.098c3.574 0 6.367 2.797 6.367 6.371s-2.793 6.367-6.367 6.367a6.3 6.3 0 0 1-6.367-6.367a6.3 6.3 0 0 1 6.367-6.371m0 41.242c3.574 0 6.367 2.797 6.367 6.367a6.29 6.29 0 0 1-6.367 6.363a6.29 6.29 0 0 1-6.367-6.363a6.3 6.3 0 0 1 6.367-6.367m-50.941 55.793a6.3 6.3 0 0 1 6.363 6.367c0 3.574-2.797 6.371-6.363 6.371c-3.574 0-6.367-2.797-6.367-6.371s2.793-6.367 6.367-6.367"/></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://webring.xxiivv.com/#sid" target="_blank" aria-label="Link to my XXIIVV webring">
|
||||
<div id="xxiivvwebringIcon">
|
||||
<svg id="xxiivvwebringSvg" fill="none" height="30" width="30" viewBox="0 0 300 300" stroke="#00CC6A" stroke-linecap="square" stroke-width="28">
|
||||
<svg id="xxiivvwebringSvg" fill="none" height="30" width="30" viewBox="0 0 300 300" stroke="#89b4fa" stroke-linecap="square" stroke-width="28">
|
||||
<path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"></path>
|
||||
<path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"></path>
|
||||
<path d="M150 120a60 60 0 100 120h100"></path>
|
||||
|
|
@ -63,7 +18,7 @@
|
|||
|
||||
<a href="https://kjelsrud.dev/rss.xml" target="_blank" aria-label="RSS feed">
|
||||
<div id="rssIcon">
|
||||
<svg id="rssSvg" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><g fill="#00CC6A"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M5.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0a8 8 0 0 0-8-8a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1a6 6 0 0 1 6 6a1 1 0 1 1-2 0a4 4 0 0 0-4-4a1 1 0 0 1-1-1"/></g></svg>
|
||||
<svg id="rssSvg" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><g fill="#89b4fa"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/><path d="M5.5 12a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0a8 8 0 0 0-8-8a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1a6 6 0 0 1 6 6a1 1 0 1 1-2 0a4 4 0 0 0-4-4a1 1 0 0 1-1-1"/></g></svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
---
|
||||
import ThemeIcon from './ThemeIcon.astro';
|
||||
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
const pathSegments = pathname.slice(1).split('/').filter(segment => segment !== '');
|
||||
|
||||
|
|
@ -25,6 +23,5 @@ const isLandingPage = pathSegments.length === 0;
|
|||
</>
|
||||
))}
|
||||
</div>
|
||||
<ThemeIcon />
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
---
|
||||
---
|
||||
<button id="themeToggle" aria-label="Theme Toggle">
|
||||
<svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"/>
|
||||
<path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
#themeToggle {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
.sun { fill: #2E4033; }
|
||||
.moon { fill: transparent; }
|
||||
|
||||
|
||||
:global(.dark) .sun { fill: transparent; }
|
||||
:global(.dark) .moon { fill: #cdd6f4; }
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
const theme = (() => {
|
||||
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
|
||||
return localStorage.getItem('theme');
|
||||
}
|
||||
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
return 'light';
|
||||
}
|
||||
return 'dark';
|
||||
})();
|
||||
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
|
||||
window.localStorage.setItem('theme', theme);
|
||||
|
||||
const handleToggleClick = () => {
|
||||
const element = document.documentElement;
|
||||
element.classList.toggle("dark");
|
||||
|
||||
const isDark = element.classList.contains("dark");
|
||||
localStorage.setItem("theme", isDark ? "dark" : "light");
|
||||
}
|
||||
|
||||
document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
|
||||
</script>
|
||||
|
|
@ -7,22 +7,6 @@ type Props = CollectionEntry<'blog'>['data'];
|
|||
|
||||
const { title, description, pubDate } = Astro.props;
|
||||
---
|
||||
<script type="module" client:load>
|
||||
const jollyroger = document.getElementById('jr');
|
||||
|
||||
const updateImageForTheme = () => {
|
||||
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
jollyroger.src = currentTheme === 'dark' ? '/img/jollyroger_dark.svg' : '/img/jollyroger_light.svg';
|
||||
};
|
||||
|
||||
updateImageForTheme();
|
||||
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener('click', updateImageForTheme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<BlogContainer>
|
||||
<main class="flex flex-col flex-1 mb-auto break-words mt-4">
|
||||
<article class="flex flex-col gap-1">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
:root {
|
||||
--light-bg: #E6F5E5; /* Soft Pastel Green Background */
|
||||
--light-1: #2E4033; /* Dark Olive Green Text */
|
||||
--light-2: #5F7A6D; /* Sage Green Secondary Text */
|
||||
--light-3: #88A597; /* Mint Green Accents */
|
||||
--light-hover: #789085; /* Darker Moss Green */
|
||||
--light-link: #00CC6A; /* Spring Green */
|
||||
--light-blockquote: #CCE3CC; /* Light Mint */
|
||||
--dark-bg: #1e1e2e; /* Midnight Navy */
|
||||
--dark-1: #cdd6f4; /* Lavender Mist */
|
||||
--dark-2: #8f5cf4; /* Amethyst Glow */
|
||||
|
|
@ -19,11 +12,6 @@
|
|||
}
|
||||
|
||||
html {
|
||||
background-color: var(--light-bg);
|
||||
color: var(--light-1);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-1);
|
||||
}
|
||||
|
|
@ -46,11 +34,6 @@ hr {
|
|||
|
||||
/* FOOTER */
|
||||
.footerbg {
|
||||
background-color: var(--light-bg);
|
||||
border-top: 1px solid var(--light-1);
|
||||
}
|
||||
|
||||
.dark .footerbg {
|
||||
background-color: var(--dark-bg);
|
||||
border-top: 1px solid var(--dark-1);
|
||||
}
|
||||
|
|
@ -61,9 +44,7 @@ hr {
|
|||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.index a { color: var(--light-link);}
|
||||
|
||||
.dark .index a { color: var(--dark-link);}
|
||||
.index a { color: var(--dark-link);}
|
||||
|
||||
.index a:hover { text-decoration: underline 2px;}
|
||||
|
||||
|
|
@ -121,26 +102,17 @@ hr {
|
|||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
.blog a { color: var(--light-link); font-weight: bolder; }
|
||||
|
||||
.dark .blog a { color: var(--dark-link); }
|
||||
.blog a { color: var(--dark-link); font-weight: bolder; }
|
||||
|
||||
.blog a:hover { text-decoration: underline 2px; }
|
||||
|
||||
.blogtime { color: var(--light-2); }
|
||||
|
||||
.dark .blogtime { color: var(--dark-2); }
|
||||
.blogtime { color: var(--dark-2); }
|
||||
|
||||
/* LOGS */
|
||||
.borderbottom {
|
||||
border-bottom-width: 2px;
|
||||
border-color: var(--light-3);
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.dark .borderbottom {
|
||||
border-bottom-width: 2px;
|
||||
border-color: var(--dark-3);
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
/* GALLERY */
|
||||
|
|
@ -182,22 +154,15 @@ hr {
|
|||
}
|
||||
|
||||
.cv-date {
|
||||
color: var(--light-2);
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.dark .cv-date {
|
||||
color: var(--dark-2);
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.cv a {
|
||||
color: var(--light-link);
|
||||
color: var(--dark-link);
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.dark .cv a { color: var(--dark-link); }
|
||||
|
||||
.cv a:hover { text-decoration: underline 2px; }
|
||||
|
||||
.cv li {
|
||||
|
|
@ -211,22 +176,14 @@ hr {
|
|||
|
||||
/* GUESTBOOK */
|
||||
.guestbook a:hover {
|
||||
background-color: var(--light-link);
|
||||
}
|
||||
|
||||
.dark .guestbook a:hover {
|
||||
background-color: var(--dark-1);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
||||
/* QUOTES */
|
||||
.author {
|
||||
color: var(--light-2);
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.dark .author {
|
||||
color: var(--dark-2);
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
/* RANDOM */
|
||||
|
|
@ -248,13 +205,8 @@ pre {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
background-color: var(--light-blockquote);
|
||||
padding: 0 0 0 10px;
|
||||
border-left: 5px solid var(--light-link);
|
||||
}
|
||||
|
||||
.dark blockquote {
|
||||
background-color: var(--dark-blockquote);
|
||||
padding: 0 0 0 10px;
|
||||
border-left: 5px solid var(--dark-link);
|
||||
}
|
||||
|
||||
|
|
@ -264,11 +216,6 @@ blockquote p {
|
|||
}
|
||||
|
||||
::selection{
|
||||
background-color: var(--light-1);
|
||||
color: var(--light-bg);
|
||||
}
|
||||
|
||||
.dark ::selection{
|
||||
background-color: var(--dark-1);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue