Skip to content

Commit 02718d6

Browse files
bitbrainbitbrain
committed
Add new toggle button
1 parent fa2a185 commit 02718d6

File tree

4 files changed

+207
-2
lines changed

4 files changed

+207
-2
lines changed

‎_includes/header.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}<b class="command_prompt"></b><b class="blinking_cursor">_</b></a>
44
<span class="social_links">
55
{% for link in site.dash.social_links %}<a class="color-{{ link.color }}-hover" href="{{ link.url }}"><i class="fab fa-{{ link.icon }}"></i></a>{% endfor %}
6-
76
</span>
87
</div>
98
</div>

‎_includes/theme-toggle.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1-
<button id="theme-toggle" onclick="modeSwitcher()"></button>
1+
<div class="toggleWrapper">
2+
<input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()"/>
3+
<label for="theme-toggle" class="toggle">
4+
<span class="toggle__handler">
5+
<span class="crater crater--1"></span>
6+
<span class="crater crater--2"></span>
7+
<span class="crater crater--3"></span>
8+
</span>
9+
<span class="star star--1"></span>
10+
<span class="star star--2"></span>
11+
<span class="star star--3"></span>
12+
<span class="star star--4"></span>
13+
<span class="star star--5"></span>
14+
<span class="star star--6"></span>
15+
</label>
16+
</div>
217
<script type="text/javascript">
318
const theme = localStorage.getItem('theme');
419
if (theme === "dark") {

‎_sass/dash.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,6 @@ $spacing-unit: 30px !default;
4242
"dash/animations",
4343
"dash/base",
4444
"dash/layout",
45+
"dash/dn-toggle",
4546
"dash/syntax-highlighting"
4647
;

‎_sass/dash/dn-toggle.scss‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
body {
2+
background-color: #1E314F;
3+
font-family: 'Helvetica Rounded', 'Arial Rounded MT Bold','Montserrat', sans-serif;
4+
color: #fff;
5+
}
6+
7+
.toggleWrapper {
8+
display: inline-block;
9+
float: right;
10+
position:relative;
11+
12+
input {
13+
display: none !important;
14+
}
15+
}
16+
17+
.toggle {
18+
cursor: pointer;
19+
display: inline-block;
20+
position: relative;
21+
width:49px;
22+
height: 28px;
23+
background-color: #4FC1E4;
24+
border-radius: 45px - 6;
25+
transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
26+
}
27+
28+
.toggle__handler {
29+
display: inline-block;
30+
position: relative;
31+
z-index: 1;
32+
top: 3px;
33+
left: 3px;
34+
width: 25px - 3;
35+
height: 25px - 3;
36+
background-color: #FFCF96;
37+
border-radius: 25px;
38+
box-shadow: 0 2px 6px rgba(0,0,0,.3);
39+
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
40+
transform: rotate(-45deg);
41+
42+
.crater {
43+
position: absolute;
44+
background-color: #E8CDA5;
45+
opacity: 0;
46+
transition: opacity 200ms ease-in-out;
47+
border-radius: 100%;
48+
}
49+
50+
.crater--1 {
51+
top: 9px;
52+
left: 5px;
53+
width: 2px;
54+
height: 2px;
55+
}
56+
57+
.crater--2 {
58+
top: 14px;
59+
left: 11px;
60+
width: 3px;
61+
height: 3px;
62+
}
63+
64+
.crater--3 {
65+
top: 5px;
66+
left: 12px;
67+
width: 4px;
68+
height: 4px;
69+
}
70+
}
71+
72+
.star {
73+
position: absolute;
74+
background-color: #ffffff;
75+
transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
76+
border-radius: 50%;
77+
}
78+
79+
.star--1 {
80+
top: 5px;
81+
left: 17px;
82+
z-index: 0;
83+
width: 15px;
84+
height: 2px;
85+
}
86+
87+
.star--2 {
88+
top: 9px;
89+
left: 14px;
90+
z-index: 1;
91+
width: 15px;
92+
height: 2px;
93+
}
94+
95+
.star--3 {
96+
top: 14px;
97+
left: 20px;
98+
z-index: 0;
99+
width: 15px;
100+
height: 2px;
101+
}
102+
103+
.star--4,
104+
.star--5,
105+
.star--6 {
106+
opacity: 0;
107+
transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
108+
}
109+
110+
.star--4 {
111+
top: 8px;
112+
left: 6px;
113+
z-index: 0;
114+
width: 2px;
115+
height: 2px;
116+
transform: translate3d(3px,0,0);
117+
}
118+
119+
.star--5 {
120+
top: 16px;
121+
left: 8px;
122+
z-index: 0;
123+
width: 3px;
124+
height: 3px;
125+
transform: translate3d(3px,0,0);
126+
}
127+
128+
.star--6 {
129+
top: 18px;
130+
left: 14px;
131+
z-index: 0;
132+
width: 2px;
133+
height: 2px;
134+
transform: translate3d(3px,0,0);
135+
}
136+
137+
input:checked {
138+
+ .toggle {
139+
background-color: #637AFE;
140+
141+
&:before {
142+
color: #637AFE;
143+
}
144+
145+
&:after {
146+
color: #ffffff;
147+
}
148+
149+
.toggle__handler {
150+
background-color: #FFE5B5;
151+
transform: translate3d(20px, 0, 0) rotate(0);
152+
153+
.crater { opacity: 1; }
154+
}
155+
156+
.star--1 {
157+
width: 2px;
158+
height: 2px;
159+
}
160+
161+
.star--2 {
162+
width: 4px;
163+
height: 4px;
164+
transform: translate3d(-5px, 0, 0);
165+
}
166+
167+
.star--3 {
168+
width: 2px;
169+
height: 2px;
170+
transform: translate3d(-7px, 0, 0);
171+
}
172+
173+
.star--4,
174+
.star--5,
175+
.star--6 {
176+
opacity: 1;
177+
transform: translate3d(0,0,0);
178+
}
179+
.star--4 {
180+
transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
181+
}
182+
.star--5 {
183+
transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
184+
}
185+
.star--6 {
186+
transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
187+
}
188+
}
189+
}
190+

0 commit comments

Comments
 (0)