my personal site
Update style.css
+48
-64
+48
-64
style.css
+48
-64
style.css
···
1
-
/* Enable cross-document view transitions (smooth page transitions) */
2
-
@view-transition {
3
-
navigation: auto;
4
-
}
5
-
6
-
/* Keyframes for page transition animations (slide out to left, slide in from right) */
7
-
@keyframes slide-out-left {
8
-
from { transform: translateX(0); opacity: 1; }
9
-
to { transform: translateX(-100%); opacity: 0; }
10
-
}
11
-
@keyframes slide-in-right {
12
-
from { transform: translateX(100%); opacity: 0; }
13
-
to { transform: translateX(0); opacity: 1; }
14
-
}
15
-
::view-transition-old(root) {
16
-
animation: 0.4s ease-in both slide-out-left;
17
-
}
18
-
::view-transition-new(root) {
19
-
animation: 0.4s ease-out both slide-in-right;
20
-
}
21
-
22
-
/* Color theme variables */
1
+
/* Directional View Transition setup */
23
2
:root {
3
+
/* Color theme variables */
24
4
--bg-color: #ffffff;
25
5
--text-color: #333333;
26
6
--link-color: #3498db;
···
28
8
--input-bg: #ffffff;
29
9
--input-text: #000000;
30
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;
31
15
}
16
+
17
+
/* Dark theme overrides */
32
18
.dark-theme {
33
19
--bg-color: #1a1a1a;
34
20
--text-color: #e0e0e0;
35
-
--link-color: #3498db; /* use same accent for dark */
36
-
--link-hover-color: #5dade2; /* lighten accent on hover in dark mode */
21
+
--link-color: #3498db;
22
+
--link-hover-color: #5dade2;
37
23
--input-bg: #333333;
38
24
--input-text: #f0f0f0;
39
25
--input-border: #555555;
40
26
}
41
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
+
}
53
+
42
54
/* Global resets/base styles */
43
55
* {
44
56
box-sizing: border-box;
···
70
82
font-size: 1.2em;
71
83
text-decoration: none;
72
84
color: var(--text-color);
73
-
margin-right: auto; /* push navigation links to the right */
85
+
margin-right: auto;
74
86
}
75
87
.menu {
76
88
list-style: none;
···
107
119
color: var(--bg-color);
108
120
}
109
121
110
-
/* Responsive adjustments: hide brand name on very small screens to save space */
122
+
/* Responsive adjustments */
111
123
@media (max-width: 400px) {
112
124
.brand { display: none; }
113
125
header nav { justify-content: space-between; }
···
125
137
height: 150px;
126
138
object-fit: cover;
127
139
border-radius: 50%;
128
-
}
129
-
.intro-text {
130
-
/* additional intro text styling if needed */
131
140
}
132
141
.intro-text h1 {
133
142
margin: 0 0 0.3rem;
···
143
152
}
144
153
145
154
/* Typography & element spacing */
146
-
h1 {
147
-
font-size: 2em;
148
-
margin: 1rem 0;
149
-
}
150
-
h2 {
151
-
font-size: 1.5em;
152
-
margin: 1.5rem 0 0.75rem;
153
-
}
154
-
h3 {
155
-
font-size: 1.2em;
156
-
margin: 1rem 0 0.5rem;
157
-
}
158
-
h1, h2, h3, h4, strong {
159
-
color: var(--text-color);
160
-
}
161
-
small {
162
-
opacity: 0.7;
163
-
}
164
-
p {
165
-
margin: 0.5rem 0 1rem;
166
-
}
155
+
h1 { font-size: 2em; margin: 1rem 0; }
156
+
h2 { font-size: 1.5em; margin: 1.5rem 0 0.75rem; }
157
+
h3 { font-size: 1.2em; margin: 1rem 0 0.5rem; }
158
+
small { opacity: 0.7; }
159
+
p { margin: 0.5rem 0 1rem; }
167
160
ul {
168
161
padding-left: 1.2rem;
169
162
margin: 0.5rem 0 1rem;
170
163
}
171
-
ul li {
172
-
margin-bottom: 0.5rem;
173
-
}
164
+
ul li { margin-bottom: 0.5rem; }
174
165
175
-
/* Buttons (including links styled as buttons) */
166
+
/* Buttons */
176
167
.btn {
177
168
display: inline-block;
178
169
background: var(--link-color);
···
185
176
}
186
177
.btn:hover {
187
178
background: var(--link-hover-color);
188
-
text-decoration: none;
189
179
}
190
180
191
181
/* Form styles */
192
-
form p {
193
-
margin: 0 0 1rem;
194
-
}
195
-
label {
196
-
font-weight: 500;
197
-
}
182
+
form p { margin: 0 0 1rem; }
183
+
label { font-weight: 500; }
198
184
input[type=text], input[type=email], textarea {
199
185
width: 100%;
200
186
padding: 0.5rem;
···
204
190
border-radius: 4px;
205
191
font: inherit;
206
192
}
207
-
textarea {
208
-
resize: vertical;
209
-
}
193
+
textarea { resize: vertical; }