my personal site
1/* Reset */
2*, *::before, *::after {
3 box-sizing: border-box;
4 margin: 0;
5 padding: 0;
6}
7
8img, svg {
9 display: block;
10}
11
12a {
13 color: inherit;
14 text-decoration: none;
15}
16
17ul {
18 list-style: none;
19}
20
21/* Fonts */
22@font-face {
23 font-family: "Mozilla Text";
24 font-style: normal;
25 font-weight: 400;
26 font-display: swap;
27 src: url("fonts/mozilla-text-400.woff2") format("woff2");
28}
29
30@font-face {
31 font-family: "Mozilla Text";
32 font-style: normal;
33 font-weight: 500;
34 font-display: swap;
35 src: url("fonts/mozilla-text-500.woff2") format("woff2");
36}
37
38@font-face {
39 font-family: "Mozilla Text";
40 font-style: normal;
41 font-weight: 600;
42 font-display: swap;
43 src: url("fonts/mozilla-text-600.woff2") format("woff2");
44}
45
46/* Custom Properties */
47:root {
48 --font-sans: "Mozilla Text", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
49 --color-bg: oklch(100% 0.003 250);
50 --color-border: oklch(93% 0.007 250);
51 --color-text: oklch(30% 0.028 250);
52 --color-text-muted: oklch(50% 0.022 250);
53 --color-vt-maroon: #581b34;
54}
55
56@media (prefers-color-scheme: dark) {
57 :root {
58 --color-bg: oklch(10% 0.034 250);
59 --color-border: oklch(40% 0.025 250);
60 --color-text: oklch(97% 0.005 250);
61 --color-text-muted: oklch(87% 0.01 250);
62 --color-vt-maroon: #a64d6b;
63 }
64}
65
66/* Base */
67html {
68 background: var(--color-bg);
69 color: var(--color-text);
70 font-family: var(--font-sans);
71 line-height: 1.5;
72 -webkit-text-size-adjust: 100%;
73 -webkit-font-smoothing: antialiased;
74 -moz-osx-font-smoothing: grayscale;
75}
76
77/* Layout */
78main {
79 display: flex;
80 justify-content: center;
81 align-items: center;
82 min-height: 100dvh;
83 padding: 2rem;
84}
85
86/* Profile Card */
87.profile {
88 display: flex;
89 flex-direction: column;
90 gap: 1.25rem;
91 max-width: 25rem;
92}
93
94.profile-header {
95 display: flex;
96 flex-wrap: wrap;
97 gap: 0.75rem;
98 font-weight: 500;
99 letter-spacing: -0.0125em;
100}
101
102/* Avatar */
103.avatar {
104 width: 4.75rem;
105 height: 4.75rem;
106 border-radius: 2rem;
107 object-fit: cover;
108}
109
110/* Profile Info */
111.profile-info {
112 display: flex;
113 flex-direction: column;
114 justify-content: center;
115}
116
117.name {
118 font-size: 1.5rem;
119 font-weight: 600;
120 letter-spacing: -0.05ch;
121}
122
123.pronouns {
124 font-size: 0.875rem;
125 font-weight: 500;
126 color: var(--color-text-muted);
127}
128
129.subtitle {
130 color: var(--color-text-muted);
131 font-weight: 500;
132}
133
134.subtitle a {
135 text-decoration: underline;
136 text-decoration-color: var(--color-border);
137 text-underline-offset: 0.15em;
138 transition: text-decoration-color 0.15s ease;
139}
140
141.subtitle a:hover {
142 text-decoration-color: currentColor;
143}
144
145/* Social Links */
146.social-links {
147 display: flex;
148 flex-wrap: wrap;
149 gap: 0.5ch;
150 font-size: 0.94em;
151}
152
153.social-link {
154 display: inline-flex;
155 align-items: center;
156 gap: 0.6ch;
157 padding: 0.5ch 1ch;
158 border: 0.9px solid var(--color-border);
159 border-radius: 9999px;
160 letter-spacing: -0.01ch;
161 transition: transform 0.2s ease-out;
162}
163
164.social-link:active {
165 transform: scale(0.9);
166}
167
168/* Icons */
169.icon {
170 width: 1rem;
171 height: 1rem;
172 fill: currentColor;
173 flex-shrink: 0;
174}
175
176/* Orbyt icon color adjustment */
177.orbyt-icon {
178 filter: invert(1);
179}
180
181@media (prefers-color-scheme: dark) {
182 .orbyt-icon {
183 filter: none;
184 }
185}