glennwso/buildsomething
1
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

working toggle via hyperscript

Browse source
This commit is contained in:
gws 2024-11-09 22:31:00 +01:00
parent df35f5e736
commit 5bb6ac9d5f
2 changed files with 24 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
sass/darkmode_toggle.scss
View file

@ -1,37 +1,23 @@
:root { :root {
--light: #d8dbe0; /*--primary-color: var(--primary-color); */
--dark: #28292c; /* --primary-text-color: var(--primary-text-color); */
--link: rgb(27, 129, 112);
--link-hover: rgb(24, 94, 82);
} }
* {
/* padding: 0; */
/* margin: 0; */
/* box-sizing: border-box; */
}
body {
/* background-color: #cfafaf; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* height: 100vh; */
}
$diameter: 100; $diameter: 50px;
.toggle-switch { .toggle-switch {
position: relative; position: relative;
width: 200px; width: $diameter * 2;
} }
label { label {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100px; height: $diameter;
background-color: var(--dark); background-color: var(--primary-text-color);
border-radius: 50px; border-radius: $diameter / 2;
cursor: pointer; cursor: pointer;
} }
@ -44,45 +30,29 @@ input {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50px; border-radius: $diameter / 2;
transition: 0.3s; transition: 0.3s;
} }
input:checked~.slider { input:checked~.slider {
background-color: var(--light); background-color: var(--primary-color);
} }
.slider::before { .slider::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 13px; top: $diameter * 0.13;
left: 16px; left: $diameter * 0.16;
width: 75px; width: $diameter * 0.75;
height: 75px; height: $diameter * 0.75;
border-radius: 50%; border-radius: 50%;
box-shadow: inset 28px -4px 0px 0px var(--light); box-shadow: inset $diameter * .28 $diameter * -.04 0px 0px var(--primary-color);
background-color: var(--dark); background-color: var(--primary-text-color);
transition: 0.3s; transition: 0.3s;
} }
input:checked~.slider::before { input:checked~.slider::before {
transform: translateX(95px); transform: translateX($diameter * 0.95);
background-color: var(--dark); background-color: var(--primary-text-color);
box-shadow: none; box-shadow: none;
}
a {
position: relative;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
top: 150px;
left: 10px;
font-size: 10px;
text-decoration: none;
color: var(--link);
font-weight: bold;
text-align: center;
}
a:hover {
color: var(--link-hover);
} }

9
templates/_macros.html
View file

@ -40,15 +40,20 @@
src="/flag-for-united-kingdom-svgrepo-com.svg"></a> src="/flag-for-united-kingdom-svgrepo-com.svg"></a>
{% endif %} {% endif %}
<button _="on click toggle .dark on the closest <body/>"> toggle </button>
<div class='toggle-switch'> <div class='toggle-switch'>
<label> <label>
<input type='checkbox'> <input type='checkbox' _="on click or load if me.checked
log('checked')
add .dark to the closest <body/>
else
remove .dark from the closest <body/>
">
<span class='slider'></span> <span class='slider'></span>
</label> </label>
</div> </div>
<!-- if i am <:checked/> -->
</nav> </nav>
{% endmacro render_header %} {% endmacro render_header %}