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

fix: theme icon shift

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-17 19:32:37 -08:00
parent 9003d20ee3
commit 825ae15e00
No known key found for this signature in database
4 changed files with 25 additions and 1 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": "5.9.0", "version": "5.9.1",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {

3
src/_includes/partials/nav/theme.liquid
View file

@ -1,4 +1,7 @@
<li class="theme__toggle client-side"> <li class="theme__toggle client-side">
<span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
<span class="light"> <span class="light">
{% tablericon "sun" "Toggle light theme" %} {% tablericon "sun" "Toggle light theme" %}
</span> </span>

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

@ -504,6 +504,15 @@ footer nav {
.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 > .dark {
display: none;
}
:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
display: none;
}
.theme__dark .theme__toggle > .light { .theme__dark .theme__toggle > .light {
display: inline; display: inline;
} }

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

@ -11,6 +11,9 @@ 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">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
<span class="light"> <span class="light">
{% tablericon "sun" "Toggle light theme" %} {% tablericon "sun" "Toggle light theme" %}
</span> </span>
@ -82,6 +85,15 @@ Finally, the theme is updated based on the body class applied by the JavaScript,
.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 > .dark {
display: none;
}
:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
display: none;
}
.theme__dark .theme__toggle > .light { .theme__dark .theme__toggle > .light {
display: inline; display: inline;
} }