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", "name": "coryd.dev",
"version": "11.3.4", "version": "11.3.5",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

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

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

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

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

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

@ -1,4 +1,4 @@
.theme__toggle { .theme-toggle {
background: transparent; background: transparent;
padding: 0; padding: 0;
@ -21,21 +21,21 @@
} }
.theme__dark { .theme__dark {
& .theme__toggle > .light { & .theme-toggle > .light {
display: inline; display: inline;
} }
& .theme__toggle > .dark { & .theme-toggle > .dark {
display: none; display: none;
} }
} }
.theme__light { .theme__light {
& .theme__toggle > .light { & .theme-toggle > .light {
display: none; display: none;
} }
& .theme__toggle > .dark { & .theme-toggle > .dark {
display: inline; 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 %} {% raw %}
```liquid ```liquid
<li class="theme__toggle client-side"> <li class="theme-toggle client-side">
<span class="placeholder"> <span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %} {% tablericon "placeholder" "Toggle theme placeholder" %}
</span> </span>
@ -70,7 +70,7 @@ With the following JavaScript set in `assets/scripts/index.js` to add the `click
```javascript ```javascript
;(async function() { ;(async function() {
const btn = document.querySelector('.theme__toggle'); const btn = document.querySelector('.theme-toggle');
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light'); document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark'); 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 ```css
/* theme toggle */ /* theme toggle */
.theme__toggle, .theme-toggle,
.theme__toggle svg { .theme-toggle svg {
cursor: pointer; cursor: pointer;
} }
.theme__toggle > .light svg { stroke: var(--sun) !important; } .theme-toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; } .theme-toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light , .theme-toggle > .light ,
.theme__toggle > .dark { .theme-toggle > .dark {
display: none; display: none;
} }
:is(.theme__light, .theme__dark) .theme__toggle > .placeholder { :is(.theme__light, .theme__dark) .theme-toggle > .placeholder {
display: none; display: none;
} }
.theme__dark .theme__toggle > .light { .theme__dark .theme-toggle > .light {
display: inline; display: inline;
} }
.theme__dark .theme__toggle > .dark { .theme__dark .theme-toggle > .dark {
display: none; display: none;
} }
.theme__light .theme__toggle > .light { .theme__light .theme-toggle > .light {
display: none; display: none;
} }
.theme__light .theme__toggle > .dark { .theme__light .theme-toggle > .dark {
display: inline; 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') const themeToggleTemplate = document.createElement('template')
themeToggleTemplate.innerHTML = ` themeToggleTemplate.innerHTML = `
<button class="theme__toggle"> <button class="theme-toggle">
<span class="light"></span> <span class="light"></span>
<span class="dark"></span> <span class="dark"></span>
</button> </button>
@ -37,7 +37,7 @@ My verbose, `connectedCallback` handles appending the template and appending the
```javascript ```javascript
async connectedCallback() { async connectedCallback() {
this.append(this.template) this.append(this.template)
const btn = this.querySelector('.theme__toggle') const btn = this.querySelector('.theme-toggle')
const setTheme = (isOnLoad) => { const setTheme = (isOnLoad) => {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
const currentTheme = localStorage?.getItem('theme') 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`): The CSS for this is straightforward and contains a few vars specific to my implementation (related to icon color and SVG `stroke-width`):
```css ```css
.theme__toggle { .theme-toggle {
background: transparent; background: transparent;
padding: 0; padding: 0;
} }
.theme__toggle svg { .theme-toggle svg {
cursor: pointer; cursor: pointer;
} }
.theme__toggle:hover, .theme-toggle:hover,
.theme__toggle svg:hover { .theme-toggle svg:hover {
stroke-width: var(--stroke-width-bold); stroke-width: var(--stroke-width-bold);
} }
.theme__toggle > .light svg { stroke: var(--sun) !important; } .theme-toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; } .theme-toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light , .theme-toggle > .light ,
.theme__toggle > .dark { .theme-toggle > .dark {
display: none; display: none;
} }
.theme__dark .theme__toggle > .light { .theme__dark .theme-toggle > .light {
display: inline; display: inline;
} }
.theme__dark .theme__toggle > .dark { .theme__dark .theme-toggle > .dark {
display: none; display: none;
} }
.theme__light .theme__toggle > .light { .theme__light .theme-toggle > .light {
display: none; display: none;
} }
.theme__light .theme__toggle > .dark { .theme__light .theme-toggle > .dark {
display: inline; display: inline;
} }
``` ```
@ -119,7 +119,7 @@ The final template that leverages the component looks like this:
```liquid ```liquid
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script> <script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
<template id="theme-toggle-template"> <template id="theme-toggle-template">
<button class="theme__toggle"> <button class="theme-toggle">
<span class="light"> <span class="light">
{% tablericon "sun" "Toggle light theme" %} {% tablericon "sun" "Toggle light theme" %}
</span> </span>