@@ -65,8 +65,7 @@ production stylesheet in assets/built/screen.css
65
65
--font-sans : Inter, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Roboto" , "Oxygen" , "Ubuntu" , "Cantarell" , "Fira Sans" , "Droid Sans" , "Helvetica Neue" , sans-serif;
66
66
--font-serif : "EB Garamond" , Georgia, Times, serif;
67
67
--font-serif-alt : Georgia, Times, serif;
68
- --font-slab : "Roboto Slab" , Georgia, Times, serif;
69
- --font-mono : Menlo, Courier, monospace;
68
+ --font-mono : "JetBrains Mono" , Menlo, Consolas, Monaco, "Liberation Mono" , "Lucida Console" , monospace;
70
69
--container-width : 1320px ;
71
70
--container-gap : clamp (24px , 1.7032rem + 1.9355vw , 48px );
72
71
--grid-gap : 42px ;
@@ -112,11 +111,20 @@ production stylesheet in assets/built/screen.css
112
111
}
113
112
114
113
@font-face {
115
- font-family : "Roboto Slab " ;
114
+ font-family : "JetBrains Mono " ;
116
115
font-style : normal;
117
- font-weight : 100 900 ;
116
+ font-weight : 100 800 ;
117
+ font-display : swap;
118
+ src : url (/assets/fonts/jetbrains-mono-roman.woff2) format ("woff2" );
119
+ unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
120
+ }
121
+
122
+ @font-face {
123
+ font-family : "JetBrains Mono" ;
124
+ font-style : italic;
125
+ font-weight : 100 800 ;
118
126
font-display : swap;
119
- src : url (/assets/fonts/roboto-slab-roman .woff2) format ("woff2" );
127
+ src : url (/assets/fonts/jetbrains-mono-italic .woff2) format ("woff2" );
120
128
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
121
129
}
122
130
@@ -279,7 +287,7 @@ button.gh-form-input {
279
287
color : rgb (0 0 0 / 0.3 );
280
288
}
281
289
282
- : is (.has-serif-title , .has-slab -title ) .gh-form-input {
290
+ : is (.has-serif-title , .has-mono -title ) .gh-form-input {
283
291
padding-inline : 20px ;
284
292
}
285
293
@@ -315,7 +323,7 @@ button.gh-form-input {
315
323
cursor : pointer;
316
324
}
317
325
318
- : is (.has-serif-title , .has-slab -title ) button .gh-form-input {
326
+ : is (.has-serif-title , .has-mono -title ) button .gh-form-input {
319
327
padding-inline-start : 50px ;
320
328
}
321
329
@@ -335,7 +343,7 @@ button.gh-form-input {
335
343
color : var (--color-secondary-text );
336
344
}
337
345
338
- : is (.has-serif-title , .has-slab -title ) .gh-form > svg {
346
+ : is (.has-serif-title , .has-mono -title ) .gh-form > svg {
339
347
left : 16px ;
340
348
}
341
349
@@ -975,6 +983,7 @@ Search LOGO Login Subscribe
975
983
display : flex;
976
984
gap : 4px ;
977
985
flex-wrap : wrap;
986
+ padding-bottom : 1px ;
978
987
font-size : 1.25rem ;
979
988
font-weight : 500 ;
980
989
line-height : 1.05 ;
@@ -1686,7 +1695,7 @@ Search LOGO Login Subscribe
1686
1695
border-bottom : 1px solid var (--color-border );
1687
1696
}
1688
1697
1689
- .gh-container-title : has ( + . gh-main : not (: has (.gh-card ))) {
1698
+ .gh-container : not (: has (.gh-card )) . gh-container-title {
1690
1699
display : none;
1691
1700
}
1692
1701
@@ -2193,8 +2202,8 @@ unless a heading is the very first element in the post content */
2193
2202
font-family : var (--font-serif );
2194
2203
}
2195
2204
2196
- .has-slab -title .kg-toggle-card .kg-toggle-heading-text {
2197
- font-family : var (--font-slab );
2205
+ .has-mono -title .kg-toggle-card .kg-toggle-heading-text {
2206
+ font-family : var (--font-mono );
2198
2207
}
2199
2208
2200
2209
/* Callout */
@@ -2232,8 +2241,8 @@ blockquote.kg-blockquote-alt {
2232
2241
font-family : var (--font-serif );
2233
2242
}
2234
2243
2235
- .has-slab -title .kg-card .kg-header-card h2 .kg-header-card-header {
2236
- font-family : var (--font-slab );
2244
+ .has-mono -title .kg-card .kg-header-card h2 .kg-header-card-header {
2245
+ font-family : var (--font-mono );
2237
2246
}
2238
2247
2239
2248
.has-serif-body .kg-header-card h3 .kg-header-card-subheader {
@@ -2287,8 +2296,8 @@ blockquote.kg-blockquote-alt {
2287
2296
font-family : var (--font-serif );
2288
2297
}
2289
2298
2290
- .has-slab -title .kg-product-card .kg-card .kg-product-card-title {
2291
- font-family : var (--font-slab );
2299
+ .has-mono -title .kg-product-card .kg-card .kg-product-card-title {
2300
+ font-family : var (--font-mono );
2292
2301
}
2293
2302
2294
2303
.has-serif-body .kg-product-card-description : is (p , ul , ol ) {
@@ -2466,7 +2475,7 @@ figcaption a {
2466
2475
--factor : 1.15 ;
2467
2476
}
2468
2477
2469
- .has-slab -title {
2478
+ .has-mono -title {
2470
2479
--factor : 1.1 ;
2471
2480
}
2472
2481
@@ -2479,9 +2488,8 @@ figcaption a {
2479
2488
font-weight : 550 ;
2480
2489
}
2481
2490
2482
- .has-slab-title : is (.is-title , .gh-content : is (h2 , h3 )) {
2483
- font-family : var (--font-slab );
2484
- font-weight : 650 ;
2491
+ .has-mono-title : is (.is-title , .gh-content : is (h2 , h3 )) {
2492
+ font-family : var (--font-mono );
2485
2493
}
2486
2494
2487
2495
.has-sans-body .is-body {
@@ -2497,7 +2505,7 @@ figcaption a {
2497
2505
letter-spacing : -0.015em ;
2498
2506
}
2499
2507
2500
- .has-slab -title .gh-header .is-classic .gh-header-title {
2508
+ .has-mono -title .gh-header .is-classic .gh-header-title {
2501
2509
letter-spacing : -0.01em ;
2502
2510
}
2503
2511
@@ -2515,7 +2523,7 @@ figcaption a {
2515
2523
font-size : calc (1.6 rem*var(--factor , 1))
2516
2524
}
2517
2525
2518
- .has-slab -title .gh-featured-feed .gh-card-title {
2526
+ .has-mono -title .gh-featured-feed .gh-card-title {
2519
2527
font-size : calc (1.5 rem*var(--factor , 1));
2520
2528
letter-spacing : 0 ;
2521
2529
}
@@ -2524,12 +2532,12 @@ figcaption a {
2524
2532
font-size : clamp (1.6rem , 0.23vw + 1.51rem , 1.8rem );
2525
2533
}
2526
2534
2527
- .has-slab -title .gh-card-title {
2535
+ .has-mono -title .gh-card-title {
2528
2536
font-size : calc (1.8 rem*var(--factor , 1));
2529
2537
}
2530
2538
2531
- .has-slab -title .gh-header .gh-header .is-highlight .gh-card-title ,
2532
- .has-slab -title .gh-header .gh-header .gh-header .is-magazine .gh-card-title {
2539
+ .has-mono -title .gh-header .gh-header .is-highlight .gh-card-title ,
2540
+ .has-mono -title .gh-header .gh-header .gh-header .is-magazine .gh-card-title {
2533
2541
line-height : 1.15 ;
2534
2542
}
2535
2543
@@ -2583,12 +2591,12 @@ figcaption a {
2583
2591
border-radius : 0 ;
2584
2592
}
2585
2593
2586
- .has-slab -title : is (.gh-button ) {
2587
- border-radius : 6 px ;
2594
+ .has-mono -title : is (.gh-button ) {
2595
+ border-radius : 0 ;
2588
2596
}
2589
2597
2590
- .has-slab -title : is (.gh-form ) {
2591
- border-radius : 8 px ;
2598
+ .has-mono -title : is (.gh-form ) {
2599
+ border-radius : 0 ;
2592
2600
}
2593
2601
2594
2602
.has-serif-title .gh-cta-title {
@@ -2599,7 +2607,7 @@ figcaption a {
2599
2607
/* ---------------------------------------------------------- */
2600
2608
2601
2609
.gh-footer {
2602
- margin-top : 6 vw ;
2610
+ margin-top : 12 vw ;
2603
2611
font-size : 1.5rem ;
2604
2612
color : var (--color-darker-gray );
2605
2613
}
0 commit comments