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

chore: load svg directly and add classes to paths

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-26 20:45:52 -07:00
parent 50640d0590
commit 7ef740f148
No known key found for this signature in database
4 changed files with 19 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.1.0", "version": "2.1.1",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.1.0", "version": "2.1.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.6.0", "@cdransf/api-text": "^1.6.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.1.0", "version": "2.1.1",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"engines": { "engines": {

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

@ -20,30 +20,19 @@ theme-toggle {
stroke: var(--accent-color-hover); stroke: var(--accent-color-hover);
} }
.sun,
& > .light svg { & > .light svg {
stroke: var(--sun); stroke: var(--sun);
} }
.moon,
& > .dark svg { & > .dark svg {
stroke: var(--moon); stroke: var(--moon);
} }
& > .auto svg { .twilight {
& path:nth-of-type(3) {
stroke: var(--moon);
}
& path:nth-of-type(2),
& path:nth-of-type(4),
& path:nth-of-type(5),
& path:nth-of-type(6) {
stroke: var(--sun);
}
& path:nth-of-type(7) {
stroke: var(--twilight); stroke: var(--twilight);
} }
}
.light, .light,
.dark { .dark {

14
src/includes/nav/theme-toggle.liquid
View file

@ -1,9 +1,19 @@
<script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}" crossorigin="anonymous"></script> <script type="module" src="/assets/scripts/components/theme-toggle.js?v={% appVersion %}"
crossorigin="anonymous"></script>
<span class="client-side"> <span class="client-side">
<theme-toggle mode="control"> <theme-toggle mode="control">
<button aria-label="Auto, light, dark theme control" class="theme-toggle"> <button aria-label="Auto, light, dark theme control" class="theme-toggle">
<span class="auto"> <span class="auto">
{% tablericon "sun-moon" %} <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>
<span class="light"> <span class="light">
{% tablericon "sun" %} {% tablericon "sun" %}