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

chore: button go click click

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-27 16:48:41 -08:00
parent 349a0167c1
commit 8ee40e016c
No known key found for this signature in database
3 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,14 +4,14 @@
{% endcapture %} {% endcapture %}
<style>{{ css }}</style> <style>{{ css }}</style>
<template id="theme-toggle-template"> <template id="theme-toggle-template">
<div 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>
<span class="dark"> <span class="dark">
{% tablericon "moon" "Toggle dark theme" %} {% tablericon "moon" "Toggle dark theme" %}
</span> </span>
</div> </button>
</template> </template>
<li class="client-side"> <li class="client-side">
<theme-toggle></theme-toggle> <theme-toggle></theme-toggle>

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

@ -1,3 +1,8 @@
.theme__toggle {
background: transparent;
padding: 0;
}
.theme__toggle svg { .theme__toggle svg {
cursor: pointer; cursor: pointer;
} }

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

@ -75,6 +75,11 @@ 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 {
background: transparent;
padding: 0;
}
.theme__toggle svg { .theme__toggle svg {
cursor: pointer; cursor: pointer;
} }
@ -118,14 +123,14 @@ The final template that leverages the component looks like this:
{% endcapture %} {% endcapture %}
<style>{{ css }}</style> <style>{{ css }}</style>
<template id="theme-toggle-template"> <template id="theme-toggle-template">
<div 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>
<span class="dark"> <span class="dark">
{% tablericon "moon" "Toggle dark theme" %} {% tablericon "moon" "Toggle dark theme" %}
</span> </span>
</div> </button>
</template> </template>
<li class="client-side"> <li class="client-side">
<theme-toggle></theme-toggle> <theme-toggle></theme-toggle>