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

fix: class names

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-16 08:43:38 -07:00
parent e935d25c0b
commit 4034a6d942
No known key found for this signature in database
6 changed files with 42 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "11.3.4",
"version": "11.3.5",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {

2
src/_includes/partials/nav/theme-toggle.liquid
View file

@ -2,7 +2,7 @@
<span class="client-side">
<theme-toggle>
<button
class="theme__toggle"
class="theme-toggle"
aria-label="Toggle site theme">
<span class="light">
{% tablericon "sun" "Toggle light theme" %}

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

@ -1,5 +1,5 @@
button {
&:not(.theme__toggle, .share) {
&:not(.theme-toggle, .share) {
border-radius: var(--rounded-full);
padding: var(--sizing-sm) var(--sizing-lg);
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
@ -17,9 +17,9 @@ button {
transition-property: all;
}
&:not(.theme__toggle, .share, .active):hover,
&:not(.theme__toggle, .share, .active):active,
&:not(.theme__toggle, .share, .active):focus {
&:not(.theme-toggle, .share, .active):hover,
&:not(.theme-toggle, .share, .active):active,
&:not(.theme-toggle, .share, .active):focus {
background-color: var(--accent-color-hover);
border-color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out);
@ -37,9 +37,9 @@ button {
background: transparent;
}
&.secondary:not(.theme__toggle, .share):hover,
&.secondary:not(.theme__toggle, .share):active,
&.secondary:not(.theme__toggle, .share):focus {
&.secondary:not(.theme-toggle, .share):hover,
&.secondary:not(.theme-toggle, .share):active,
&.secondary:not(.theme-toggle, .share):focus {
color: var(--accent-color-hover);
background: transparent;
}

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

@ -1,4 +1,4 @@
.theme__toggle {
.theme-toggle {
background: transparent;
padding: 0;
@ -21,21 +21,21 @@
}
.theme__dark {
& .theme__toggle > .light {
& .theme-toggle > .light {
display: inline;
}
& .theme__toggle > .dark {
& .theme-toggle > .dark {
display: none;
}
}
.theme__light {
& .theme__toggle > .light {
& .theme-toggle > .light {
display: none;
}
& .theme__toggle > .dark {
& .theme-toggle > .dark {
display: inline;
}
}

26
src/posts/2024/adding-a-light-dark-theme-toggle.md
View file

@ -10,7 +10,7 @@ I built the button as a short Liquid partial:
{% raw %}
```liquid
<li class="theme__toggle client-side">
<li class="theme-toggle client-side">
<span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
@ -70,7 +70,7 @@ With the following JavaScript set in `assets/scripts/index.js` to add the `click
```javascript
;(async function() {
const btn = document.querySelector('.theme__toggle');
const btn = document.querySelector('.theme-toggle');
btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark');
@ -95,36 +95,36 @@ Finally, the theme is updated based on the body class applied by the JavaScript,
```css
/* theme toggle */
.theme__toggle,
.theme__toggle svg {
.theme-toggle,
.theme-toggle svg {
cursor: pointer;
}
.theme__toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
.theme-toggle > .light svg { stroke: var(--sun) !important; }
.theme-toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light ,
.theme__toggle > .dark {
.theme-toggle > .light ,
.theme-toggle > .dark {
display: none;
}
:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
:is(.theme__light, .theme__dark) .theme-toggle > .placeholder {
display: none;
}
.theme__dark .theme__toggle > .light {
.theme__dark .theme-toggle > .light {
display: inline;
}
.theme__dark .theme__toggle > .dark {
.theme__dark .theme-toggle > .dark {
display: none;
}
.theme__light .theme__toggle > .light {
.theme__light .theme-toggle > .light {
display: none;
}
.theme__light .theme__toggle > .dark {
.theme__light .theme-toggle > .dark {
display: inline;
}
...

30
src/posts/2024/building-a-theme-toggle-web-component.md
View file

@ -12,7 +12,7 @@ Much like my `now-playing` component, I start out by registering the component t
const themeToggleTemplate = document.createElement('template')
themeToggleTemplate.innerHTML = `
<button class="theme__toggle">
<button class="theme-toggle">
<span class="light"></span>
<span class="dark"></span>
</button>
@ -37,7 +37,7 @@ My verbose, `connectedCallback` handles appending the template and appending the
```javascript
async connectedCallback() {
this.append(this.template)
const btn = this.querySelector('.theme__toggle')
const btn = this.querySelector('.theme-toggle')
const setTheme = (isOnLoad) => {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
const currentTheme = localStorage?.getItem('theme')
@ -75,41 +75,41 @@ async connectedCallback() {
The CSS for this is straightforward and contains a few vars specific to my implementation (related to icon color and SVG `stroke-width`):
```css
.theme__toggle {
.theme-toggle {
background: transparent;
padding: 0;
}
.theme__toggle svg {
.theme-toggle svg {
cursor: pointer;
}
.theme__toggle:hover,
.theme__toggle svg:hover {
.theme-toggle:hover,
.theme-toggle svg:hover {
stroke-width: var(--stroke-width-bold);
}
.theme__toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
.theme-toggle > .light svg { stroke: var(--sun) !important; }
.theme-toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light ,
.theme__toggle > .dark {
.theme-toggle > .light ,
.theme-toggle > .dark {
display: none;
}
.theme__dark .theme__toggle > .light {
.theme__dark .theme-toggle > .light {
display: inline;
}
.theme__dark .theme__toggle > .dark {
.theme__dark .theme-toggle > .dark {
display: none;
}
.theme__light .theme__toggle > .light {
.theme__light .theme-toggle > .light {
display: none;
}
.theme__light .theme__toggle > .dark {
.theme__light .theme-toggle > .dark {
display: inline;
}
```
@ -119,7 +119,7 @@ The final template that leverages the component looks like this:
```liquid
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
<template id="theme-toggle-template">
<button class="theme__toggle">
<button class="theme-toggle">
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>