my personal site
Update portfolio styling and content
-30
-30
style.css
-30
style.css
···
8
8
--input-bg: #ffffff;
9
9
--input-text: #000000;
10
10
--input-border: #cccccc;
11
-
12
-
/* Default transition animations (will be overridden dynamically) */
13
-
--vt-old-animation: 0.4s ease-in both slide-out-left;
14
-
--vt-new-animation: 0.4s ease-out both slide-in-right;
15
11
}
16
12
17
13
/* Dark theme overrides */
···
23
19
--input-bg: #333333;
24
20
--input-text: #f0f0f0;
25
21
--input-border: #555555;
26
-
}
27
-
28
-
/* Directional keyframes */
29
-
@keyframes slide-out-left {
30
-
from { transform: translateX(0); opacity: 1; }
31
-
to { transform: translateX(-100%); opacity: 0; }
32
-
}
33
-
@keyframes slide-out-right {
34
-
from { transform: translateX(0); opacity: 1; }
35
-
to { transform: translateX(100%); opacity: 0; }
36
-
}
37
-
@keyframes slide-in-left {
38
-
from { transform: translateX(-100%); opacity: 0; }
39
-
to { transform: translateX(0); opacity: 1; }
40
-
}
41
-
@keyframes slide-in-right {
42
-
from { transform: translateX(100%); opacity: 0; }
43
-
to { transform: translateX(0); opacity: 1; }
44
-
}
45
-
46
-
/* View Transition API hooks */
47
-
::view-transition-old(root) {
48
-
animation: var(--vt-old-animation);
49
-
}
50
-
::view-transition-new(root) {
51
-
animation: var(--vt-new-animation);
52
22
}
53
23
54
24
/* Global resets/base styles */