my personal website!
meowing.zip
website
tiny styling changes
+31
-13
+31
-13
styles.css
+31
-13
styles.css
···
26
26
position: fixed;
27
27
width: 100%!important;
28
28
height: 100%!important;
29
-
inset: 0!important;
29
+
inset: 0 !important;
30
30
}
31
31
:root {
32
32
color-scheme: light dark;
···
49
49
border-radius: 10px;
50
50
}
51
51
body {
52
+
display: table;
52
53
background-color: light-dark(var(--light-background), var(--dark-background));
53
54
color: light-dark(var(--light-text), var(--dark-text));
54
55
font-family: "Iosevka Aile", monospace;
···
64
65
.main {
65
66
background-color: light-dark(var(--light-crust), var(--dark-crust));
66
67
margin-top: 20px;
67
-
border: 4px solid;
68
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
68
+
outline: 2px solid;
69
+
outline-color: light-dark(var(--light-accent), var(--dark-accent));
69
70
border-radius: 25px;
70
71
padding: 20px;
72
+
opacity: 0.7;
71
73
box-shadow: 10px 5px 10px light-dark(var(--light-crust), var(--dark-crust));
72
74
}
75
+
.main:hover {
76
+
outline: 5px dashed;
77
+
outline-color: light-dark(var(--light-accent), var(--dark-accent));
78
+
opacity: 1;
79
+
transform: scale(1.01, 1.01);
80
+
transition: ease-in-out 0.3s;
81
+
}
73
82
footer {
74
83
font-family: "Iosevka Aile", monospace;
75
84
color: light-dark(var(--light-text), var(--dark-text));
76
85
font-size: 20px;
77
86
background-color: light-dark(var(--light-crust), var(--dark-crust));
78
87
padding: 15px;
79
-
border: 4px solid;
80
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
88
+
outline: 2px solid;
89
+
outline-color: light-dark(var(--light-accent), var(--dark-accent));
81
90
border-radius: 25px;
82
91
margin-top: 10px;
92
+
opacity: 0.7;
93
+
width: 1200px;
83
94
box-shadow: 10px 5px 10px light-dark(var(--light-crust), var(--dark-crust));
84
95
}
96
+
footer:hover {
97
+
outline: 5px dashed;
98
+
outline-color: light-dark(var(--light-accent), var(--dark-accent));
99
+
opacity: 1;
100
+
transform: scale(1.01, 1.01);
101
+
transition: ease-in-out 0.3s;
102
+
}
85
103
86
104
.form-input {
87
105
margin-bottom: 11px;
···
140
158
.dropdown .dropdown-content {
141
159
position: absolute;
142
160
top: 50%;
143
-
margin-top: 6px;
144
-
border: 1px solid;
161
+
margin-top: 8px;
162
+
border: 2px solid;
145
163
border-color: light-dark(var(--light-accent), var(--dark-accent));
146
164
border-radius: 15px;
147
165
background-color: light-dark(var(--light-background), var(--dark-background));
148
166
min-width: 100%;
149
167
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
150
-
z-index: 100000;
151
168
visibility: hidden;
152
169
opacity: 0;
153
170
transition: 0.2s ease-in-out;
171
+
z-index: 2;
154
172
}
155
173
.dropdown-content a {
156
174
color: light-dark(var(--light-background), var(--dark-background));
···
165
183
}
166
184
.web-buttons:hover .web-button {
167
185
transition: ease-in-out 0.2s;
168
-
filter: blur(0.1em);
186
+
filter: blur(0.15em);
169
187
display: inline-block;
170
188
}
171
189
.web-buttons .web-button:hover {
172
190
transition: ease-in-out 0.3s;
173
-
border: solid 0px;
191
+
outline: solid 2px;
174
192
border-radius: 10px;
175
-
border-color: light-dark(var(--light-accent), var(--dark-accent));
193
+
outline-color: light-dark(var(--light-accent), var(--dark-accent));
176
194
filter: blur(0);
177
195
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
178
-
transform: scale(1.4, 1.4) rotate(2deg) translateX(-10px);
196
+
transform: scale(1.3, 1.3) translateX(-10px) translateY(-2px);
179
197
display: inline-block;
180
198
}
181
199
.other-web-buttons:hover .web-button {
182
200
transition: ease-in-out 0.2s;
183
-
filter: blur(0.1em);
201
+
filter: blur(0.15em);
184
202
display: inline-block;
185
203
}
186
204
.other-web-buttons .web-button:hover {