my personal site
Create style.css
+209
+209
style.css
+209
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 */
23
+
:root {
24
+
--bg-color: #ffffff;
25
+
--text-color: #333333;
26
+
--link-color: #3498db;
27
+
--link-hover-color: #1D6FA5;
28
+
--input-bg: #ffffff;
29
+
--input-text: #000000;
30
+
--input-border: #cccccc;
31
+
}
32
+
.dark-theme {
33
+
--bg-color: #1a1a1a;
34
+
--text-color: #e0e0e0;
35
+
--link-color: #3498db; /* use same accent for dark */
36
+
--link-hover-color: #5dade2; /* lighten accent on hover in dark mode */
37
+
--input-bg: #333333;
38
+
--input-text: #f0f0f0;
39
+
--input-border: #555555;
40
+
}
41
+
42
+
/* Global resets/base styles */
43
+
* {
44
+
box-sizing: border-box;
45
+
}
46
+
html, body {
47
+
margin: 0;
48
+
padding: 0;
49
+
background: var(--bg-color);
50
+
color: var(--text-color);
51
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
52
+
font-size: 16px;
53
+
line-height: 1.6;
54
+
}
55
+
56
+
/* Layout containers */
57
+
.container {
58
+
max-width: 800px;
59
+
margin: 0 auto;
60
+
padding: 1rem;
61
+
}
62
+
63
+
/* Header navigation */
64
+
header nav {
65
+
display: flex;
66
+
align-items: center;
67
+
}
68
+
.brand {
69
+
font-weight: bold;
70
+
font-size: 1.2em;
71
+
text-decoration: none;
72
+
color: var(--text-color);
73
+
margin-right: auto; /* push navigation links to the right */
74
+
}
75
+
.menu {
76
+
list-style: none;
77
+
margin: 0;
78
+
padding: 0;
79
+
display: flex;
80
+
}
81
+
.menu li + li {
82
+
margin-left: 1rem;
83
+
}
84
+
nav a {
85
+
text-decoration: none;
86
+
color: var(--link-color);
87
+
}
88
+
nav a:hover {
89
+
text-decoration: underline;
90
+
}
91
+
nav a.active {
92
+
text-decoration: underline;
93
+
font-weight: bold;
94
+
}
95
+
/* Theme toggle button */
96
+
#theme-toggle {
97
+
margin-left: 1rem;
98
+
padding: 0.25rem 0.6rem;
99
+
border: 1px solid var(--text-color);
100
+
background: none;
101
+
color: var(--text-color);
102
+
border-radius: 4px;
103
+
cursor: pointer;
104
+
}
105
+
#theme-toggle:hover {
106
+
background: var(--text-color);
107
+
color: var(--bg-color);
108
+
}
109
+
110
+
/* Responsive adjustments: hide brand name on very small screens to save space */
111
+
@media (max-width: 400px) {
112
+
.brand { display: none; }
113
+
header nav { justify-content: space-between; }
114
+
}
115
+
116
+
/* Intro (About section) */
117
+
.intro {
118
+
display: flex;
119
+
align-items: flex-start;
120
+
gap: 2rem;
121
+
margin: 2rem 0;
122
+
}
123
+
.headshot {
124
+
width: 150px;
125
+
height: 150px;
126
+
object-fit: cover;
127
+
border-radius: 50%;
128
+
}
129
+
.intro-text {
130
+
/* additional intro text styling if needed */
131
+
}
132
+
.intro-text h1 {
133
+
margin: 0 0 0.3rem;
134
+
}
135
+
.tagline {
136
+
font-style: italic;
137
+
opacity: 0.8;
138
+
margin: 0 0 1rem;
139
+
}
140
+
.tagline .sep {
141
+
opacity: 0.5;
142
+
margin: 0 0.4em;
143
+
}
144
+
145
+
/* 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
+
}
167
+
ul {
168
+
padding-left: 1.2rem;
169
+
margin: 0.5rem 0 1rem;
170
+
}
171
+
ul li {
172
+
margin-bottom: 0.5rem;
173
+
}
174
+
175
+
/* Buttons (including links styled as buttons) */
176
+
.btn {
177
+
display: inline-block;
178
+
background: var(--link-color);
179
+
color: #fff;
180
+
text-decoration: none;
181
+
padding: 0.5rem 1rem;
182
+
border: none;
183
+
border-radius: 4px;
184
+
cursor: pointer;
185
+
}
186
+
.btn:hover {
187
+
background: var(--link-hover-color);
188
+
text-decoration: none;
189
+
}
190
+
191
+
/* Form styles */
192
+
form p {
193
+
margin: 0 0 1rem;
194
+
}
195
+
label {
196
+
font-weight: 500;
197
+
}
198
+
input[type=text], input[type=email], textarea {
199
+
width: 100%;
200
+
padding: 0.5rem;
201
+
background: var(--input-bg);
202
+
color: var(--input-text);
203
+
border: 1px solid var(--input-border);
204
+
border-radius: 4px;
205
+
font: inherit;
206
+
}
207
+
textarea {
208
+
resize: vertical;
209
+
}