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

init darkmode pretty toggle

Browse source
This commit is contained in:
gws 2024-11-09 20:49:46 +01:00
parent a05454e5f2
commit df35f5e736
4 changed files with 244 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
sass/darkmode_toggle.scss Normal file
View file

@ -0,0 +1,88 @@
:root {
--light: #d8dbe0;
--dark: #28292c;
--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;
.toggle-switch {
position: relative;
width: 200px;
}
label {
position: absolute;
width: 100%;
height: 100px;
background-color: var(--dark);
border-radius: 50px;
cursor: pointer;
}
input {
position: absolute;
display: none;
}
.slider {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
transition: 0.3s;
}
input:checked~.slider {
background-color: var(--light);
}
.slider::before {
content: "";
position: absolute;
top: 13px;
left: 16px;
width: 75px;
height: 75px;
border-radius: 50%;
box-shadow: inset 28px -4px 0px 0px var(--light);
background-color: var(--dark);
transition: 0.3s;
}
input:checked~.slider::before {
transform: translateX(95px);
background-color: var(--dark);
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

@ -42,10 +42,13 @@
<button _="on click toggle .dark on the closest <body/>"> toggle </button> <button _="on click toggle .dark on the closest <body/>"> toggle </button>
<div class='toggle-switch'>
<label>
<input type='checkbox'>
<span class='slider'></span>
</label>
</div>
</nav> </nav>
{% endmacro render_header %} {% endmacro render_header %}

6
templates/darkmode_toggle.html Normal file
View file

@ -0,0 +1,6 @@
<div class='toggle-switch'>
<label>
<input type='checkbox'>
<span class='slider'></span>
</label>
</div>

10
templates/index.html
View file

@ -5,8 +5,9 @@
<link rel="icon" href="/flat_blocks.svg" sizes="any" type="image/svg+xml"> <link rel="icon" href="/flat_blocks.svg" sizes="any" type="image/svg+xml">
<!-- <link rel="stylesheet" href="{{ get_url(path='carbon.css') }}"> --> <!-- <link rel="stylesheet" href="{{ get_url(path='carbon.css') }}"> -->
<link rel="stylesheet" href="{{ get_url(path='style.css') }}">
<!-- <link rel="stylesheet" href="{{ get_url(path='form.css') }}"> --> <!-- <link rel="stylesheet" href="{{ get_url(path='form.css') }}"> -->
<link rel="stylesheet" href="{{ get_url(path='style.css') }}">
<link rel="stylesheet" href="{{ get_url(path='darkmode_toggle.css') }}">
<link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" /> <link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" /> <link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
@ -36,6 +37,13 @@
{{ macros::render_header(path="/") }} {{ macros::render_header(path="/") }}
</header> </header>
{% block body_tag%}
<body hx-boost="true">
{% endblock body_tag %}
<div class="hero"> <div class="hero">
{% block hero %} {% block hero %}