chore: run with user prefs
This commit is contained in:
parent
31a03ba1bb
commit
1b89de2af7
9 changed files with 20 additions and 138 deletions
|
|
@ -38,8 +38,6 @@ export default async function (eleventyConfig) {
|
|||
"assets/scripts/components/api-text.js",
|
||||
"node_modules/@cdransf/select-pagination/select-pagination.js":
|
||||
"assets/scripts/components/select-pagination.js",
|
||||
"node_modules/@cdransf/theme-toggle/theme-toggle.js":
|
||||
"assets/scripts/components/theme-toggle.js",
|
||||
"node_modules/@daviddarnes/mastodon-post/mastodon-post.js":
|
||||
"assets/scripts/components/mastodon-post.js",
|
||||
"node_modules/minisearch/dist/umd/index.js":
|
||||
|
|
|
|||
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -1,18 +1,17 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.4.6",
|
||||
"version": "2.4.7",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "2.4.6",
|
||||
"version": "2.4.7",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-fetch": "4.0.1",
|
||||
"@cdransf/api-text": "^1.8.1",
|
||||
"@cdransf/select-pagination": "^1.3.1",
|
||||
"@cdransf/theme-toggle": "^3.2.1",
|
||||
"@daviddarnes/mastodon-post": "^1.3.0",
|
||||
"http-proxy-middleware": "3.0.3",
|
||||
"minisearch": "^7.1.0",
|
||||
|
|
@ -410,12 +409,6 @@
|
|||
"integrity": "sha512-zwBWlX7V6SXlUe9TkJblZF44+2agHRCaCnG/v+Q2Bcgf2DhOQI4qiMOoNBsr09TpkKvQENOqwT2kOycszBcJtA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@cdransf/theme-toggle": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.2.1.tgz",
|
||||
"integrity": "sha512-YJsnQNXJeaeZOWb4eKxmTbXxda9XBKHq/eQQ26IhVvZzTfZzVjG9ma5Fvq3Em4gwTHWCRnG+YU2M1eDnl6qTgw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@daviddarnes/mastodon-post": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "2.4.6",
|
||||
"version": "2.4.7",
|
||||
"description": "The source for my personal site. Built using 11ty (and other tools).",
|
||||
"type": "module",
|
||||
"engines": {
|
||||
|
|
@ -29,7 +29,6 @@
|
|||
"@11ty/eleventy-fetch": "4.0.1",
|
||||
"@cdransf/api-text": "^1.8.1",
|
||||
"@cdransf/select-pagination": "^1.3.1",
|
||||
"@cdransf/theme-toggle": "^3.2.1",
|
||||
"@daviddarnes/mastodon-post": "^1.3.0",
|
||||
"http-proxy-middleware": "3.0.3",
|
||||
"minisearch": "^7.1.0",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -9,5 +9,4 @@
|
|||
<li>{% render "nav/link.liquid", page:page, link:link %}</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{% render "nav/theme-toggle.liquid" %}
|
||||
</menu>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
Reference in a new issue