style.css
ASCII text
1@font-face { 2font-family: "Romanian League Gothic"; 3src: url("/static/fonts/RoLeagueGothic-Regular.woff2") format("woff2"); 4font-weight: normal; 5font-style: normal; 6} 7 8@font-face { 9font-family: "Romanian League Gothic Condensed"; 10src: url("/static/fonts/RoLeagueGothic-Condensed.woff2") format("woff2"); 11font-weight: normal; 12font-style: normal; 13} 14 15@font-face { 16font-family: "Source Serif"; 17src: url("/static/fonts/SourceSerif4Variable-Roman.otf.woff2") format("woff2-variations"); 18} 19 20@font-face { 21font-family: "Source Serif"; 22src: url("/static/fonts/SourceSerif4Variable-Italic.otf.woff2") format("woff2-variations"); 23font-style: italic; 24} 25 26@font-face { 27font-family: "Source Sans"; 28src: url("/static/fonts/SourceSans3VF-Upright.otf.woff2") format("woff2-variations"); 29} 30 31@font-face { 32font-family: "Source Sans"; 33src: url("/static/fonts/SourceSans3VF-Italic.otf.woff2") format("woff2-variations"); 34font-style: italic; 35} 36 37@font-face { 38font-family: "Source Code"; 39src: url("/static/fonts/SourceCodeVF-Upright.otf.woff2") format("woff2-variations"); 40} 41 42@font-face { 43font-family: "Source Code"; 44src: url("/static/fonts/SourceCodeVF-Italic.otf.woff2") format("woff2-variations"); 45font-style: italic; 46} 47 48body { 49line-height: 1.5rem; 50font-family: "Source Serif", serif; 51font-weight: 375; 52font-size: 1.125rem; 53 54min-height: 100vh; 55margin: 0; 56display: flex; 57flex-direction: column; 58align-items: center; 59background: #eceff1; 60font-variation-settings: "opsz" 14; 61} 62 63a { 64color: #009688; 65text-decoration-thickness: 0.125em; 66} 67 68header { 69width: 100%; 70font-family: "Source Sans", sans-serif; 71position: sticky; 72top: 0; 73background: #eceff1; 74display: flex; 75justify-content: center; 76} 77 78nav { 79width: min(800px, 100%); 80display: flex; 81justify-content: space-between; 82align-items: center; 83box-sizing: border-box; 84height: 4rem; 85} 86 87nav > ul { 88font-family: "Romanian League Gothic", sans-serif; 89display: flex; 90list-style: none; 91padding: 0; 92margin: 0; 93align-items: center; 94gap: 1rem; 95font-weight: normal; 96font-size: 1.75rem; 97line-height: 2rem; 98text-transform: uppercase; 99} 100 101nav > ul > li > a { 102font-weight: normal; 103text-decoration: none; 104color: #000000; 105text-decoration-thickness: 0.125em; 106} 107 108nav > ul > li > a:hover { 109text-decoration: underline; 110} 111 112footer { 113width: min(800px, 100%); 114padding: 1rem; 115box-sizing: border-box; 116font-family: "Source Sans", sans-serif; 117} 118 119main { 120width: min(800px, 100%); 121flex: 1 0 auto; 122gap: 1rem; 123display: flex; 124flex-direction: column; 125} 126 127.content-area { 128box-shadow: 0 0 1px #00000028, 1290 0 2px #00000020, 1300 2px 4px #00000010, 1310 2px 18px -6px #00000010; 132padding: 1rem; 133box-sizing: border-box; 134background: #ffffff; 135} 136 137h1 { 138font-family: "Romanian League Gothic Condensed", sans-serif; 139font-weight: normal; 140font-size: 4rem; 141line-height: 5rem; 142margin: 0; 143text-align: center; 144border-bottom: 0.5px solid #000000; 145} 146 147h2 { 148font-family: "Romanian League Gothic", sans-serif; 149font-weight: normal; 150font-size: 2.75rem; 151line-height: 3rem; 152margin: 0; 153} 154 155h3 { 156font-family: "Source Sans", sans-serif; 157font-weight: 725; 158font-size: 1.875rem; 159line-height: 3rem; 160margin: 0; 161} 162 163h4 { 164font-family: "Source Sans", sans-serif; 165font-weight: 800; 166font-size: 1.5rem; 167line-height: 2rem; 168margin: 0; 169} 170 171h5 { 172font-family: "Source Sans", sans-serif; 173font-weight: 800; 174font-size: 1.25rem; 175line-height: 2rem; 176margin: 0; 177} 178 179h6 { 180font-family: "Source Sans", sans-serif; 181font-weight: 900; 182font-size: 1.125rem; 183line-height: 2rem; 184margin: 0; 185} 186 187.article-title { 188text-decoration: none; 189text-align: center; 190color: #009688; 191display: block; 192width: 100%; 193} 194 195#mail-link { 196color: #009688; 197text-transform: none; 198} 199 200pre, code, kbd, samp, var { 201font-family: "Source Code", monospace; 202} 203 204pre { 205overflow-x: auto; 206padding: 1rem; 207background: #263238; 208color: #ffffff; 209color-scheme: dark; 210font-size: 1rem; 211line-height: 1.25rem; 212} 213 214.project-title { 215display: flex; 216align-items: center; 217justify-content: space-between; 218gap: 1rem; 219width: 100%; 220border: none; 221} 222 223.project-title > span { 224padding: 0.5rem; 225} 226 227.project-title > a { 228text-decoration: none; 229background: #009688; 230color: #ffffff; 231padding: 0 1rem; 232border: 4px solid #00796B; 233box-sizing: border-box; 234line-height: 1.25em; 235font-size: 0.875em; 236font-family: "Romanian League Gothic Condensed", sans-serif; 237align-self: stretch; 238display: flex; 239align-items: center; 240justify-content: center; 241min-width: 25%; 242 243transition: 400ms; 244} 245 246.project-title > a:hover { 247border-width: 8px; 248} 249 250strong, em { 251font: inherit; 252} 253 254.emphasis-1 { 255font-style: italic; 256} 257 258.emphasis-2 { 259font-weight: 625; 260} 261 262.emphasis-3 { 263font-variant: small-caps; 264font-synthesis-small-caps: none; 265} 266 267#article-date, .home-article-date { 268font-family: "Source Code", sans-serif; 269font-feature-settings: "zero" on; 270font-weight: 625; 271text-align: center; 272}