cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: run with user prefs

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-30 20:34:13 -07:00
parent 31a03ba1bb
commit 1b89de2af7
No known key found for this signature in database
9 changed files with 20 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/assets/styles/components/buttons.css
View file

@ -5,31 +5,28 @@ button,
.button {
appearance: none;
border: none;
border: 2px solid var(--accent-color);
border-radius: var(--border-radius-full);
padding: var(--spacing-xs) var(--spacing-md);
cursor: pointer;
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
white-space: nowrap;
color: var(--text-color-inverted);
background-color: var(--accent-color);
appearance: none;
transition: color var(--transition-duration-default)
var(--transition-ease-in-out);
& + hr {
margin-top: 0;
}
&:not(.theme-toggle) {
border: 2px solid var(--accent-color);
border-radius: var(--border-radius-full);
padding: var(--spacing-xs) var(--spacing-md);
cursor: pointer;
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
white-space: nowrap;
color: var(--text-color-inverted);
background-color: var(--accent-color);
appearance: none;
transition: color var(--transition-duration-default)
var(--transition-ease-in-out);
}
&:not(.theme-toggle, .active):hover,
&:not(.theme-toggle, .active):active,
&:not(.theme-toggle, .active):focus,
&:not(.theme-toggle, .active):focus-within {
&:not(.active):hover,
&:not(.active):active,
&:not(.active):focus,
&:not(.active):focus-within {
background-color: var(--accent-color-hover);
border-color: var(--accent-color-hover);
}

41
src/assets/styles/components/theme-toggle.css
View file

@ -1,41 +0,0 @@
theme-toggle {
display: flex;
width: var(--sizing-svg-base);
height: var(--sizing-svg-base);
margin-left: var(--spacing-md);
}
.theme-toggle {
background: transparent;
padding: 0;
& svg {
cursor: pointer;
}
&:hover svg,
&:focus svg,
&:focus-within svg,
&:active svg {
stroke: var(--accent-color-hover);
}
.sun,
& > .light svg {
stroke: var(--sun);
}
.moon,
& > .dark svg {
stroke: var(--moon);
}
.twilight {
stroke: var(--twilight);
}
.light,
.dark {
display: none;
}
}

1
src/assets/styles/index.css
View file

@ -37,5 +37,4 @@
@import url("./components/music-chart.css") layer(components);
@import url("./components/paginator.css") layer(components);
@import url("./components/progress-bar.css") layer(components);
@import url("./components/theme-toggle.css") layer(components);
@import url("./components/youtube-player.css") layer(components);

1
src/includes/nav/menu.liquid
View file

@ -9,5 +9,4 @@
<li>{% render "nav/link.liquid", page:page, link:link %}</li>
{%- endfor -%}
</ul>
{% render "nav/theme-toggle.liquid" %}
</menu>

26
src/includes/nav/theme-toggle.liquid
View file

@ -1,26 +0,0 @@
<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}"
crossorigin="anonymous"></script>
<span class="client-side">
<theme-toggle mode="control" storage="local">
<button aria-label="Auto, light, dark theme control" class="theme-toggle">
<span class="auto">
<svg aria-hidden="true" data-tablericon-name="sun-moon" fill="none" height="24" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path class="sun" d="M9.173 14.83a4 4 0 1 1 5.657 -5.657"></path>
<path class="moon" d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914"></path>
<path class="sun" d="M3 12h1"></path>
<path class="sun" d="M12 3v1"></path>
<path class="sun" d="M5.6 5.6l.7 .7"></path>
<path class="twilight" d="M3 21l18 -18"></path>
</svg>
</span>
<span class="light">
{% tablericon "sun" %}
</span>
<span class="dark">
{% tablericon "moon" %}
</span>
</button>
</theme-toggle>
</span>

36
src/layouts/base.liquid
View file

@ -47,42 +47,6 @@
</noscript>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", () => {
(() => {
const storageType =
document.querySelector("theme-toggle")?.getAttribute("storage") === "local"
? localStorage
: sessionStorage;
const currentTheme = storageType.getItem("theme") || "auto";
const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
const lightIcon = document.querySelector(".light");
const darkIcon = document.querySelector(".dark");
const autoIcon = document.querySelector(".auto");
if (currentTheme === "auto") {
metaColorScheme.setAttribute("content", "light dark");
document.documentElement.style.colorScheme = "";
} else {
metaColorScheme.setAttribute("content", currentTheme);
document.documentElement.style.colorScheme = currentTheme;
}
lightIcon.style.display = "none";
darkIcon.style.display = "none";
autoIcon.style.display = "none";
if (currentTheme === "light") {
lightIcon.style.display = "inline";
} else if (currentTheme === "dark") {
darkIcon.style.display = "inline";
} else {
autoIcon.style.display = "inline";
}
})();
});
</script>
<div class="main-wrapper">
<main>
{% render "header.liquid", globals:globals, page:page, nav:nav %}