Skip to content

Commit 576689b

Browse files
Weirdo1312Weirdo1312
committed
fix for desktop
1 parent 13b0717 commit 576689b

File tree

2 files changed

+110
-24
lines changed

2 files changed

+110
-24
lines changed

‎index.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@
88
<body>
99
<!--Hamburger Menu-->
1010
<input type="checkbox" id="sidebar-toggle">
11-
<label for="sidebar-toggle" id="closed-hamburger-menu" class="sidebar-toggle-button">&#9776;</label>
12-
<label for="sidebar-toggle" id="opened-hamburger-menu" class="sidebar-toggle-button">&#x2715;</label>
11+
<label for="sidebar-toggle" id="hamburger-menu" class="sidebar-toggle-button"></label>
1312
<!--Dark Mode Toggle-->
14-
<span></span>
1513
<input type="checkbox" id="theme-toggle"/>
1614
<label class="theme-toggle-button" for="theme-toggle"></label>
1715
<!--Main Screen-->

‎style.css

+109-21
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,19 @@
1414
.content {
1515
padding: 100px;
1616
padding-top: 0;
17-
font-size: 250%;
17+
font-size: 300%;
1818
text-align: center;
1919
}
2020

2121
.main {
22+
position:absolute;
2223
color: #323232;
2324
background-color:#faebd7;
2425
transition: 200ms all ease;
25-
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
26+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
27+
margin-top: -1%;
28+
margin-left: -1%;
29+
height: 165%;
2630
}
2731

2832
.sidebar {
@@ -49,38 +53,41 @@
4953

5054

5155
.easter-egg-button {
52-
position: relative;
5356
bottom: -450px;
5457
}
5558

5659
#sidebar-toggle {
5760
display: none;
5861
}
5962

63+
.sidebar-toggle-button::before {
64+
text-align: center;
65+
content: "☰";
66+
font-size: 100%;
67+
position: absolute;
68+
top: 2%;
69+
left: 2%;
70+
width: 100px;
71+
height: 100px;
72+
background-color: white;
73+
border-radius: 50%;
74+
z-index: 9999;
75+
}
76+
6077
.sidebar-toggle-button {
6178
position: fixed;
6279
top: 2%;
63-
left: 89%;
80+
left: 88%;
6481
cursor: pointer;
6582
z-index: 9999;
6683
user-select: none;
6784
transition: 200ms ease all;
6885
font-size: 72px;
69-
7086
}
7187

72-
#opened-hamburger-menu {
73-
opacity: 0;
74-
}
75-
76-
#sidebar-toggle:checked ~ #opened-hamburger-menu {
77-
color: white;
78-
opacity: 1;
79-
}
80-
81-
#sidebar-toggle:checked ~ #closed-hamburger-menu {
82-
opacity: 0;
83-
}
88+
#sidebar-toggle:checked + .sidebar-toggle-button::before {
89+
content: "✕";
90+
}
8491

8592
#sidebar-toggle:checked ~ .sidebar {
8693
right: 0px;
@@ -93,7 +100,8 @@
93100

94101
.theme-toggle-button::before {
95102
content: "☀️";
96-
font-size: 510%;
103+
font-size: 81.5px;
104+
text-align: center;
97105
position: absolute;
98106
top: 2%;
99107
left: 2%;
@@ -102,6 +110,7 @@
102110
background-color: white;
103111
border-radius: 50%;
104112
transition: transform 200ms;
113+
z-index: 9999;
105114
}
106115

107116
#theme-toggle {
@@ -117,14 +126,93 @@
117126
}
118127

119128
#theme-toggle:checked ~ .main {
120-
background: radial-gradient(circle at center, #051428, #051428 92%, #faebd7 70%, #faebd7);
129+
background: #051428;
121130
color: #faebd7;
122131
}
123132

124133
#theme-toggle:checked ~ .sidebar {
125134
background-color: #102f1e;
126135
}
127136

128-
.easter-egg {
129-
display: none;
137+
#theme-toggle:checked ~ .sidebar-toggle-button {
138+
color: white;
139+
}
140+
141+
.easter-egg-button > img {
142+
padding-top: 75%;
143+
}
144+
145+
@media (min-width: 1280px) {
146+
.theme-toggle-button::before {
147+
content: "☀️";
148+
font-size: 225%;
149+
position: absolute;
150+
top: 2%;
151+
left: 2%;
152+
width: 50px;
153+
height: 50px;
154+
background-color: white;
155+
border-radius: 50%;
156+
transition: transform 200ms;
157+
z-index: 9999;
158+
}
159+
160+
#sidebar-toggle:checked ~ .sidebar {
161+
right: 0px;
162+
box-shadow: 0px 0px 0px 0px hsla(0, 0%, 0%, 0);
163+
}
164+
165+
.sidebar {
166+
text-align: center;
167+
height: 100%;
168+
width: 12%;
169+
font-size: 150%;
170+
position: fixed;
171+
top: 0;
172+
background-color: MediumSeaGreen;
173+
padding-top: 25px;
174+
right: 0%;
175+
transition: 200ms all ease;
176+
}
177+
178+
.sidebar a {
179+
display: block;
180+
color: white;
181+
padding: 35px;
182+
text-decoration: none;
183+
transition: 200ms all;
184+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
185+
white-space: nowrap;
186+
}
187+
188+
.sidebar-toggle-button {
189+
display: none;
190+
}
191+
192+
#theme-toggle:checked ~ .main {
193+
background: #051428;
194+
color: #faebd7;
195+
}
196+
197+
.easter-egg-button > img {
198+
max-width: 75%;
199+
padding-top: 225%;
200+
}
201+
202+
.main {
203+
padding-top: 0;
204+
right: 12%;
205+
}
206+
207+
.title {
208+
font-size: 500%;
209+
font-weight: bold;
210+
text-align: center;
211+
padding: 2px;
212+
display: inline;
213+
}
214+
215+
.content {
216+
font-size: 200%;
217+
}
130218
}

0 commit comments

Comments
 (0)