From 1b89de2af768016eff79edca6bd9979ee17230d5 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 30 Oct 2024 20:34:13 -0700
Subject: [PATCH] chore: run with user prefs
---
.eleventy.js | 2 -
package-lock.json | 11 +----
package.json | 3 +-
src/assets/styles/components/buttons.css | 37 ++++++++---------
src/assets/styles/components/theme-toggle.css | 41 -------------------
src/assets/styles/index.css | 1 -
src/includes/nav/menu.liquid | 1 -
src/includes/nav/theme-toggle.liquid | 26 ------------
src/layouts/base.liquid | 36 ----------------
9 files changed, 20 insertions(+), 138 deletions(-)
delete mode 100644 src/assets/styles/components/theme-toggle.css
delete mode 100644 src/includes/nav/theme-toggle.liquid
diff --git a/.eleventy.js b/.eleventy.js
index 6eb55f51..38d1cd57 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -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":
diff --git a/package-lock.json b/package-lock.json
index e7003f90..6fd51451 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index f14949d5..d4050676 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 238e7aa3..ca56b13a 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -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);
}
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
deleted file mode 100644
index 5eff406a..00000000
--- a/src/assets/styles/components/theme-toggle.css
+++ /dev/null
@@ -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;
- }
-}
\ No newline at end of file
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index f39d03f7..7fd653f0 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -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);
diff --git a/src/includes/nav/menu.liquid b/src/includes/nav/menu.liquid
index 7bc8b41d..a0b6a10b 100644
--- a/src/includes/nav/menu.liquid
+++ b/src/includes/nav/menu.liquid
@@ -9,5 +9,4 @@
<li>{% render "nav/link.liquid", page:page, link:link %}</li>
{%- endfor -%}
</ul>
- {% render "nav/theme-toggle.liquid" %}
</menu>
\ No newline at end of file
diff --git a/src/includes/nav/theme-toggle.liquid b/src/includes/nav/theme-toggle.liquid
deleted file mode 100644
index 4a04fdae..00000000
--- a/src/includes/nav/theme-toggle.liquid
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/layouts/base.liquid b/src/layouts/base.liquid
index 8cb78386..0da6fd6d 100644
--- a/src/layouts/base.liquid
+++ b/src/layouts/base.liquid
@@ -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 %}