Skip to content

Commit 84448ef

Browse files
cakcak
committed
enhance SEO and accessibility by updating meta tags and adding skip link
1 parent 5f47ada commit 84448ef

File tree

2 files changed

+117
-65
lines changed

2 files changed

+117
-65
lines changed

‎index.html‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,33 @@
1010
content="TypeError is a collection of open-source cybersecurity projects built to help defenders understand and reduce risk."
1111
/>
1212
<link rel="canonical" href="https://typeerror.com/" />
13-
<meta name="theme-color" content="#bb86fc" />
13+
<meta name="color-scheme" content="light dark" />
14+
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
15+
<meta name="theme-color" content="#0e0e0e" media="(prefers-color-scheme: dark)" />
16+
17+
<!-- Social previews -->
18+
<meta property="og:title" content="TypeError" />
19+
<meta
20+
property="og:description"
21+
content="Turning code into clearer security. Open-source cybersecurity engineering. Data-driven, practical, and built for defenders."
22+
/>
23+
<meta property="og:url" content="https://typeerror.com/" />
24+
<meta property="og:type" content="website" />
25+
<meta
26+
property="og:image"
27+
content="https://typeerror.com/assets/typeerror_logo.png"
28+
/>
29+
<meta name="twitter:card" content="summary" />
30+
31+
<!-- Favicons -->
32+
<link rel="icon" href="/favicon.ico" sizes="any" />
1433

1534
<link rel="stylesheet" href="style.css" />
1635
</head>
1736

1837
<body>
38+
<a class="skip-link" href="#main">Skip to content</a>
39+
1940
<div class="hero-bg" aria-hidden="true"></div>
2041

2142
<main id="main">

‎style.css‎

Lines changed: 95 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@
1212
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
1313
sans-serif;
1414
--clr-fg: #1a1a1a;
15-
--clr-muted: #6e6e6e;
15+
--clr-muted: #4f4f4f;
1616
--clr-accent: #bb86fc;
17+
--clr-link: #6a2fcf;
1718
--clr-bg: #fafafa;
1819
--clr-vapor-1: #ff9de2;
1920
--clr-vapor-2: #7af8ff;
21+
22+
/* Let the UA render built-in controls appropriately */
2023
color-scheme: light dark;
24+
accent-color: var(--clr-accent);
2125

2226
/* Layout */
2327
--max-w: 60ch;
@@ -32,8 +36,9 @@
3236
@media (prefers-color-scheme: dark) {
3337
:root {
3438
--clr-fg: #f5f5f5;
35-
--clr-muted: #a3a3a3;
39+
--clr-muted: #b3b3b3;
3640
--clr-accent: #caa0ff;
41+
--clr-link: #d1b0ff;
3742
--clr-bg: #0e0e0e;
3843
}
3944
}
@@ -56,6 +61,29 @@ main {
5661
max-width: var(--max-w);
5762
}
5863

64+
/* ===== SKIP LINK ===== */
65+
.skip-link {
66+
position: absolute;
67+
left: -999px;
68+
top: auto;
69+
width: 1px;
70+
height: 1px;
71+
overflow: hidden;
72+
}
73+
74+
.skip-link:focus {
75+
left: var(--space-3);
76+
top: var(--space-3);
77+
width: auto;
78+
height: auto;
79+
padding: var(--space-2) var(--space-3);
80+
background: var(--clr-bg);
81+
color: var(--clr-fg);
82+
border: 2px solid var(--clr-accent);
83+
border-radius: 0.5rem;
84+
z-index: 999;
85+
}
86+
5987
/* ===== HERO ===== */
6088
.hero {
6189
display: flex;
@@ -77,40 +105,91 @@ main {
77105
var(--clr-bg)
78106
);
79107
opacity: 0.1;
80-
backdrop-filter: blur(60px);
81108
}
82109

83110
@supports (backdrop-filter: blur(1px)) {
84111
.hero-bg {
85112
backdrop-filter: blur(60px);
113+
-webkit-backdrop-filter: blur(60px);
86114
}
87115
}
88116

89117
.avatar {
90118
width: clamp(128px, 20vw, 240px);
91119
height: clamp(128px, 20vw, 240px);
92120
border-radius: 50%;
121+
display: block;
93122
}
94123

95124
.name {
96125
font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
97126
font-weight: 700;
98127
}
99128

129+
/* ===== TAGLINE ===== */
130+
.tagline {
131+
margin-top: var(--space-2);
132+
text-align: center;
133+
line-height: 1.35;
134+
text-wrap: balance; /* nicer line breaks on supporting browsers */
135+
}
136+
137+
.tagline .lead {
138+
display: inline-block;
139+
font-size: clamp(1.125rem, 1.2rem + 1vw, 1.75rem);
140+
font-weight: 700;
141+
letter-spacing: -0.01em;
142+
color: var(--clr-fg); /* safe default */
143+
}
144+
145+
/* Only apply gradient text when background-clip:text is supported */
146+
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
147+
.tagline .lead {
148+
background: linear-gradient(
149+
90deg,
150+
var(--clr-vapor-1),
151+
var(--clr-vapor-2),
152+
var(--clr-accent)
153+
);
154+
-webkit-background-clip: text;
155+
background-clip: text;
156+
color: transparent;
157+
}
158+
}
159+
160+
@media (prefers-contrast: more) {
161+
.tagline .lead {
162+
background: none;
163+
color: var(--clr-fg);
164+
text-decoration: underline;
165+
text-decoration-thickness: 0.08em;
166+
text-underline-offset: 0.18em;
167+
}
168+
}
169+
170+
.tagline .subtitle {
171+
display: inline-block;
172+
margin-top: var(--space-1);
173+
font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
174+
color: var(--clr-muted);
175+
letter-spacing: 0.01em;
176+
opacity: 0.9;
177+
}
178+
100179
/* ===== BIO ===== */
101180
.bio p {
102181
margin-top: var(--space-3);
103182
}
104183

105-
/* Links */
184+
/* ===== LINKS & FOCUS ===== */
106185
a {
107-
color: var(--clr-accent);
108-
text-decoration: none;
186+
color: var(--clr-link);
187+
text-decoration: underline;
109188
text-underline-offset: 0.12em;
110189
}
111190

112191
a:hover {
113-
text-decoration: underline;
192+
text-decoration-thickness: 0.12em;
114193
}
115194

116195
:where(a, button):focus-visible {
@@ -138,81 +217,32 @@ a:hover {
138217
color: var(--clr-fg);
139218
}
140219

141-
/* Reduced-motion preference */
142-
@media (prefers-reduced-motion: reduce) {
143-
* {
144-
animation: none !important;
145-
transition: none !important;
146-
}
147-
}
148-
149-
/* Contact list */
150220
.contact-list {
151221
display: inline-flex;
152222
gap: var(--space-1);
153223
list-style: none;
154224
padding: 0;
155225
margin: 0;
226+
flex-wrap: wrap;
227+
justify-content: center;
156228
}
157229

158-
.contact a {
159-
color: inherit;
160-
padding: 0 var(--space-1);
161-
}
162-
163-
/* Tag Line */
164-
.tagline {
165-
margin-top: var(--space-2);
166-
text-align: center;
167-
line-height: 1.35;
168-
text-wrap: balance; /* nicer line breaks on supporting browsers */
169-
}
170-
171-
.tagline .lead {
172-
display: inline-block;
173-
font-size: clamp(1.125rem, 1.2rem + 1vw, 1.75rem);
174-
font-weight: 700;
175-
letter-spacing: -0.01em;
176-
/* Subtle gradient text with readable fallback */
177-
color: var(--clr-fg);
178-
background: linear-gradient(
179-
90deg,
180-
var(--clr-vapor-1),
181-
var(--clr-vapor-2),
182-
var(--clr-accent)
183-
);
184-
-webkit-background-clip: text;
185-
background-clip: text;
186-
color: transparent;
187-
}
188-
189-
@media (prefers-contrast: more) {
190-
.tagline .lead {
191-
/* Ensure strong contrast if user requests it */
192-
background: none;
193-
color: var(--clr-fg);
194-
text-decoration: underline;
195-
text-decoration-thickness: 0.08em;
196-
text-underline-offset: 0.18em;
230+
/* ===== ANIMATION (RESPECTS REDUCED MOTION) ===== */
231+
@media (prefers-reduced-motion: reduce) {
232+
* {
233+
animation: none !important;
234+
transition: none !important;
197235
}
198236
}
199237

200-
.tagline .subtitle {
201-
display: inline-block;
202-
margin-top: var(--space-1);
203-
font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
204-
color: var(--clr-muted);
205-
letter-spacing: 0.01em;
206-
opacity: 0.9;
207-
}
208-
209238
@media (prefers-reduced-motion: no-preference) {
210239
.tagline .lead {
211240
animation: rise-in 600ms ease-out both;
212241
}
213242
.tagline .subtitle {
214243
animation: fade-in 700ms 120ms ease-out both;
215244
}
245+
216246
@keyframes rise-in {
217247
from {
218248
transform: translateY(6px);
@@ -223,6 +253,7 @@ a:hover {
223253
opacity: 1;
224254
}
225255
}
256+
226257
@keyframes fade-in {
227258
from {
228259
opacity: 0;

0 commit comments

Comments
 (0)