-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
260 lines (221 loc) · 6.03 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Kaushan+Script&family=Oswald&display=swap');
:root {
--primary-color: rgb(255, 92, 92);
--primary-variant: #ff2d2d;
--secondary-color: #1b9999;
--on-primary: rgb(250, 250, 250);
--on-background: rgb(66, 66, 66);
--on-background-alt: rgba(66, 66, 66, 0.7);
--background: rgb(255, 255, 255);
--box-shadow: 0 5px 20px 1px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] {
--primary-color: rgb(150, 65, 255);
--primary-variant: #6c63ff;
--secondary-color: #03dac5;
--on-primary: #000;
--on-background: rgba(255, 255, 255, 0.9);
--on-background-alt: rgba(255, 255, 255, 0.7);
--background: #121212;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--on-background);
font-family: Comfortaa, sans-serif;
background-color: var(--background);
background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M81.28 88H68.413l19.298 19.298L81.28 88zm2.107 0h13.226L90 107.838 83.387 88zm15.334 0h12.866l-19.298 19.298L98.72 88zm-32.927-2.207L73.586 78h32.827l.5.5 7.294 7.293L115.414 87l-24.707 24.707-.707.707L64.586 87l1.207-1.207zm2.62.207L74 80.414 79.586 86H68.414zm16 0L90 80.414 95.586 86H84.414zm16 0L106 80.414 111.586 86h-11.172zm-8-6h11.173L98 85.586 92.414 80zM82 85.586L87.586 80H76.414L82 85.586zM17.414 0L.707 16.707 0 17.414V0h17.414zM4.28 0L0 12.838V0h4.28zm10.306 0L2.288 12.298 6.388 0h8.198zM180 17.414L162.586 0H180v17.414zM165.414 0l12.298 12.298L173.612 0h-8.198zM180 12.838L175.72 0H180v12.838zM0 163h16.413l.5.5 7.294 7.293L25.414 172l-8 8H0v-17zm0 10h6.613l-2.334 7H0v-7zm14.586 7l7-7H8.72l-2.333 7h8.2zM0 165.414L5.586 171H0v-5.586zM10.414 171L16 165.414 21.586 171H10.414zm-8-6h11.172L8 170.586 2.414 165zM180 163h-16.413l-7.794 7.793-1.207 1.207 8 8H180v-17zm-14.586 17l-7-7h12.865l2.333 7h-8.2zM180 173h-6.613l2.334 7H180v-7zm-21.586-2l5.586-5.586 5.586 5.586h-11.172zM180 165.414L174.414 171H180v-5.586zm-8 5.172l5.586-5.586h-11.172l5.586 5.586zM152.933 25.653l1.414 1.414-33.94 33.942-1.416-1.416 33.943-33.94zm1.414 127.28l-1.414 1.414-33.942-33.94 1.416-1.416 33.94 33.943zm-127.28 1.414l-1.414-1.414 33.94-33.942 1.416 1.416-33.943 33.94zm-1.414-127.28l1.414-1.414 33.942 33.94-1.416 1.416-33.94-33.943zM0 85c2.21 0 4 1.79 4 4s-1.79 4-4 4v-8zm180 0c-2.21 0-4 1.79-4 4s1.79 4 4 4v-8zM94 0c0 2.21-1.79 4-4 4s-4-1.79-4-4h8zm0 180c0-2.21-1.79-4-4-4s-4 1.79-4 4h8z' fill='%2349bdc9' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: Kaushan Script, sans-serif;
font-size: 100px;
margin-bottom: 0;
}
h2 {
color: var(--on-background-alt);
font-size: 32px;
font-weight: normal;
}
/* Navigation */
nav {
z-index: 10;
position: fixed;
font-family: Oswald, sans-serif;
font-size: 24px;
letter-spacing: 3px;
padding: 25px;
width: 100vw;
background: rgb(255 255 255 / 50%);
}
a {
margin-right: 25px;
color: var(--primary-color);
text-decoration: none;
border-bottom: 3px solid transparent;
font-weight: bold;
}
a:hover,
a:focus {
color: var(--on-background);
border-bottom: 3px solid;
}
/* Home Section */
.title-group {
text-align: center;
}
/* About Section */
.about-container {
display: flex;
}
.image-container {
border: 1px solid var(--secondary-color);
border-radius: 10px;
padding: 10px 20px;
margin-right: 25px;
width: auto;
background: var(--background);
box-shadow: var(--box-shadow);
}
img {
height: 300px;
width: 300px;
}
/* Projects Section */
.buttons {
margin-top: 15px;
margin-bottom: 50px;
}
button {
min-width: 100px;
height: 40px;
cursor: pointer;
border-radius: 10px;
margin-right: 10px;
border: 2px solid var(--primary-color);
font-size: 15px;
outline: none;
}
button:disabled {
opacity: 0.4;
cursor: default;
}
button:hover:not(.outline) {
filter: brightness(110%);
}
.primary {
background: var(--primary-color);
color: var(--on-primary);
}
.secondary {
border: 2px solid var(--secondary-color);
}
.secondary,
.secondary:hover,
.outline.secondary:hover {
background: var(--secondary-color);
color: var(--on-primary);
}
.outline {
background: var(--background);
color: var(--on-background);
}
.outline:hover {
background: var(--primary-color);
color: var(--on-primary);
}
.text-box {
width: 40%;
text-align: justify;
background: rgb(0 0 0 / 50%);
color: var(--on-primary);
border-radius: 10px;
padding: 30px;
}
p {
margin: 0;
line-height: 25px;
}
/* Contact Section */
.fab {
font-size: 100px;
margin-right: 50px;
cursor: pointer;
color: var(--primary-color);
}
.fab:hover {
color: var(--on-background);
}
/* Dark Mode Toggle */
.theme-switch-wrapper {
display: flex;
align-items: center;
z-index: 100;
position: fixed;
right: 25px;
top: 30px;
}
.theme-switch-wrapper span {
margin-right: 10px;
font-size: 1rem;
}
.toggle-text {
position: relative;
top: -4px;
right: 5px;
color: var(--on-background);
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
background: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.slider::before {
background: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
input:checked + .slider {
background: var(--primary-color);
}
input:checked + .slider::before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round::before {
border-radius: 50%;
}
.fas {
font-size: 30px;
margin-right: 5px;
}