Files for my website
bwc9876.dev
Cow rotate
+22
-2
+22
-2
src/layouts/Layout.astro
+22
-2
src/layouts/Layout.astro
···
79
79
class="nav-icon"
80
80
width={150}
81
81
height={150}
82
+
transition:name="pfp"
83
+
transition:persist
82
84
format="webp"
83
85
alt="Ben C's Avatar"
84
86
src={cow}
···
161
163
nav > a:first-child {
162
164
font-size: var(--2);
163
165
display: flex;
166
+
gap: 5px;
164
167
flex-direction: row;
165
168
align-items: center;
166
169
justify-content: center;
167
170
background-color: var(--secondary);
168
-
padding: 5px 10px;
171
+
padding: 5px 7px;
169
172
border-radius: 5px;
170
173
171
174
& > span > span {
···
186
189
.nav-icon {
187
190
width: var(--4);
188
191
height: var(--4);
189
-
padding: 5px;
190
192
border-radius: 100%;
193
+
transition: transform 800ms
194
+
linear(
195
+
0,
196
+
0.36 6.7%,
197
+
0.635 13.9%,
198
+
0.832 21.8%,
199
+
0.904 26.1%,
200
+
0.958 30.6%,
201
+
1.015 38.6%,
202
+
1.036 48.1%,
203
+
1.034 56.4%,
204
+
1.005 81.2%,
205
+
1
206
+
);
207
+
208
+
@starting-style {
209
+
transform: translateX(calc(-1 * 50vw - var(--5))) rotate(-300deg);
210
+
}
191
211
}
192
212
193
213
main {