|
6 | 6 | <title>{{ title }} - codeGROOVE</title> |
7 | 7 | <meta name="description" content="{{ description }}"> |
8 | 8 | <link rel="icon" type="image/png" href="/media/logo.png"> |
| 9 | + <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 10 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 11 | + <link href="https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> |
9 | 12 | <style> |
10 | 13 | * { |
11 | 14 | margin: 0; |
|
22 | 25 | } |
23 | 26 | |
24 | 27 | body { |
25 | | - font-family: "Courier New", Courier, monospace; |
| 28 | + font-family: "Space Mono", "Courier New", Courier, monospace; |
26 | 29 | font-size: 16px; |
27 | 30 | line-height: 1.8; |
28 | 31 | color: var(--black); |
|
44 | 47 | } |
45 | 48 | |
46 | 49 | .site-title { |
47 | | - font-size: 32px; |
48 | | - font-weight: bold; |
49 | | - letter-spacing: -2px; |
50 | | - text-transform: uppercase; |
| 50 | + font-family: "Passion One", sans-serif; |
| 51 | + font-size: 36px; |
| 52 | + font-weight: 700; |
| 53 | + letter-spacing: 0.5px; |
51 | 54 | margin-bottom: 15px; |
52 | 55 | transform: skewX(-5deg); |
53 | 56 | } |
|
60 | 63 | } |
61 | 64 | |
62 | 65 | nav a { |
| 66 | + font-family: "Space Mono", monospace; |
63 | 67 | color: var(--black); |
64 | 68 | text-decoration: none; |
65 | 69 | font-size: 14px; |
66 | | - letter-spacing: 1px; |
| 70 | + font-weight: 400; |
| 71 | + letter-spacing: 0.5px; |
67 | 72 | padding: 2px 0; |
68 | 73 | border-bottom: 2px solid transparent; |
69 | 74 | } |
|
82 | 87 | } |
83 | 88 | |
84 | 89 | h1 { |
85 | | - font-size: 48px; |
86 | | - font-weight: bold; |
| 90 | + font-family: "Passion One", sans-serif; |
| 91 | + font-size: 56px; |
| 92 | + font-weight: 400; |
87 | 93 | line-height: 0.9; |
88 | 94 | margin-bottom: 40px; |
89 | | - letter-spacing: -3px; |
| 95 | + letter-spacing: 0px; |
90 | 96 | text-transform: uppercase; |
91 | 97 | } |
92 | 98 | |
93 | 99 | h2 { |
94 | | - font-size: 18px; |
95 | | - font-weight: normal; |
| 100 | + font-family: "Passion One", sans-serif; |
| 101 | + font-size: 24px; |
| 102 | + font-weight: 400; |
96 | 103 | margin: 60px 0 20px 0; |
97 | 104 | text-transform: uppercase; |
98 | | - letter-spacing: 3px; |
| 105 | + letter-spacing: 1.5px; |
99 | 106 | border-top: 1px solid var(--grey); |
100 | 107 | padding-top: 20px; |
101 | 108 | } |
102 | 109 | |
103 | 110 | h3 { |
| 111 | + font-family: "Space Mono", monospace; |
104 | 112 | font-size: 16px; |
105 | | - font-weight: bold; |
| 113 | + font-weight: 700; |
106 | 114 | margin: 30px 0 15px 0; |
107 | | - letter-spacing: 1px; |
| 115 | + letter-spacing: 0.5px; |
108 | 116 | } |
109 | 117 | |
110 | 118 | p { |
|
175 | 183 | |
176 | 184 | .hero h1, |
177 | 185 | .hero h2 { |
| 186 | + font-family: "Passion One", sans-serif; |
178 | 187 | color: var(--yellow); |
179 | 188 | border: none; |
180 | 189 | margin-top: 0; |
|
200 | 209 | .product { |
201 | 210 | border: 2px solid var(--black); |
202 | 211 | padding: 30px; |
203 | | - transition: transform 0.2s ease; |
| 212 | + background: var(--yellow); |
204 | 213 | } |
205 | 214 | |
206 | | - .product:hover { |
207 | | - background: var(--yellow); |
208 | | - transform: translateY(-4px); |
| 215 | + .product h3 { |
| 216 | + font-family: "Passion One", sans-serif; |
| 217 | + font-size: 28px; |
| 218 | + font-weight: 400; |
| 219 | + margin: 0 0 15px 0; |
| 220 | + letter-spacing: 0px; |
209 | 221 | } |
210 | 222 | |
211 | 223 | .groove-card { |
|
248 | 260 | } |
249 | 261 | |
250 | 262 | .cta { |
| 263 | + font-family: "Passion One", sans-serif; |
251 | 264 | display: inline-block; |
252 | 265 | background: var(--black); |
253 | 266 | color: var(--yellow); |
254 | 267 | padding: 20px 40px; |
255 | 268 | text-decoration: none; |
256 | 269 | text-transform: uppercase; |
257 | | - letter-spacing: 3px; |
258 | | - font-size: 16px; |
259 | | - font-weight: bold; |
| 270 | + letter-spacing: 2px; |
| 271 | + font-size: 20px; |
| 272 | + font-weight: 400; |
260 | 273 | margin: 30px 0; |
261 | 274 | border: 4px solid var(--black); |
262 | 275 | transition: all 0.2s ease; |
|
270 | 283 | } |
271 | 284 | |
272 | 285 | blockquote { |
| 286 | + font-family: "Space Mono", monospace; |
273 | 287 | border-left: 8px solid var(--yellow); |
274 | 288 | padding-left: 30px; |
275 | 289 | margin: 40px 0; |
276 | | - font-style: normal; |
| 290 | + font-style: italic; |
277 | 291 | color: var(--black); |
278 | | - font-size: 20px; |
279 | | - font-weight: bold; |
280 | | - letter-spacing: -1px; |
| 292 | + font-size: 18px; |
| 293 | + font-weight: 400; |
| 294 | + letter-spacing: 0px; |
281 | 295 | position: relative; |
282 | 296 | } |
283 | 297 | |
|
304 | 318 | } |
305 | 319 | |
306 | 320 | th { |
| 321 | + font-family: "Space Mono", monospace; |
307 | 322 | background: var(--black); |
308 | 323 | color: var(--white); |
309 | | - font-weight: normal; |
| 324 | + font-weight: 700; |
310 | 325 | text-transform: uppercase; |
311 | | - letter-spacing: 1px; |
| 326 | + letter-spacing: 0.5px; |
312 | 327 | font-size: 14px; |
313 | 328 | } |
314 | 329 | |
|
328 | 343 | } |
329 | 344 | |
330 | 345 | footer { |
| 346 | + font-family: "Space Mono", monospace; |
331 | 347 | background: var(--black); |
332 | 348 | color: var(--white); |
333 | 349 | padding: 60px 20px; |
|
469 | 485 | <nav role="navigation" aria-label="Main"> |
470 | 486 | <ul> |
471 | 487 | <li><a href="/" {% if page.url == '/' %}aria-current="page"{% endif %}>Home</a></li> |
472 | | - <li><a href="/products/" {% if page.url == '/products/' %}aria-current="page"{% endif %}>Products</a></li> |
473 | | - <li><a href="/open-source/" {% if page.url == '/open-source/' %}aria-current="page"{% endif %}>Open Source</a></li> |
| 488 | + <li><a href="/products/" {% if page.url.startsWith('/products/') %}aria-current="page"{% endif %}>Products</a></li> |
| 489 | + <li><a href="/oss/" {% if page.url == '/oss/' %}aria-current="page"{% endif %}>Open Source</a></li> |
474 | 490 | <li><a href="/security/" {% if page.url == '/security/' %}aria-current="page"{% endif %}>Security</a></li> |
475 | 491 | <li><a href="/about/" {% if page.url == '/about/' %}aria-current="page"{% endif %}>About</a></li> |
476 | 492 | <li><a href="/blog/" {% if page.url.startsWith('/blog/') %}aria-current="page"{% endif %}>Blog</a></li> |
|
487 | 503 | <footer> |
488 | 504 | <div class="footer-links"> |
489 | 505 | <a href="/products/">Products</a> |
490 | | - <a href="/open-source/">Open Source</a> |
| 506 | + <a href="/oss/">Open Source</a> |
491 | 507 | <a href="/security/">Security</a> |
492 | 508 | <a href="/about/">About</a> |
493 | 509 | <a href="/blog/">Blog</a> |
|
0 commit comments