style.css (5340B)
1 :root 2 { 3 --Canvas-bg: #201b1b; 4 --Canvas-color: #fff; 5 --Pre-bg: #151515; 6 --Pre-color: #fff; 7 --Pre-border: #222; 8 --Main-color: #f2f2f2; 9 --Code-color: #2adba4; 10 --Accent1-color: #2adba4; /* green */ 11 --Accent2-color: #368aeb; /* blue */ 12 --Highlight-num: #43a60d; 13 --Highlight-esc: #dfad06; 14 --Highlight-str: #f77f1d; 15 --Highlight-pps: #458759; 16 --Highlight-slc: #a0a0a0; 17 --Highlight-com: #a0a0a0; 18 --Highlight-ppc: #94e39; 19 --Highlight-opt: #ffffff; 20 --Highlight-ipl: #4dc987; 21 --Highlight-lin: #555555; 22 --Highlight-kwa: #d9396a; 23 --Highlight-kwb: #8655e7; 24 --Highlight-kwc: #ffffff; 25 --Highlight-kwd: #00a48f; 26 } 27 28 img { 29 display: inline-block; 30 max-width: 100%; 31 } 32 33 img[src*='#center'] { 34 display: block; 35 margin: auto; 36 } 37 38 pre, code, sample { 39 hyphens: none; 40 color: inherit; 41 } 42 43 pre 44 { 45 overflow-x: scroll; 46 scrollbar-width: thin; 47 scrollbar-color: inherit; 48 padding: 2rem; 49 margin-left: -2rem; 50 margin-right: -2rem; 51 border: 1px solid var(--Pre-border); 52 background: var(--Pre-bg); 53 color: var(--Pre-color); 54 } 55 56 table { 57 max-width: 100%; 58 } 59 60 html { 61 font-size: 70.5%; 62 } 63 64 h2 { 65 font-weight: 200; 66 } 67 68 h3 { 69 font-weight: 200; 70 } 71 72 body { 73 line-height: 1.5; 74 font-size: 1.6rem; 75 max-width: 38em; 76 margin: auto; 77 padding: 13px; 78 } 79 80 .thanks-date { 81 font-weight:bold; 82 } 83 84 .thanks-to { 85 font-style: italic; 86 font-weight: 200; 87 } 88 89 .thanks { 90 padding-top:1em; 91 padding-bottom:1em; 92 } 93 94 /* Structural blocks */ 95 96 #page-wrapper 97 { 98 max-width: 88rem; 99 100 padding: 1rem 2rem 2rem; 101 102 margin-left: auto; 103 margin-right: auto; 104 } 105 106 107 /* Visual styles */ 108 109 html 110 { 111 background: var(--Canvas-bg); 112 color: var(--Canvas-color); 113 } 114 115 header 116 { 117 text-align: center; 118 } 119 120 ::selection 121 { 122 background: var(--Selection-bg); 123 color: var(--Selection-color); 124 } 125 126 /* shared gradient border */ 127 nav, footer 128 { 129 border-width: 0; 130 border-style: solid; 131 border-color: var(--Accent1-color); 132 border-image: linear-gradient(to right, var(--Accent1-color), var(--Accent2-color)) 2; 133 } 134 135 nav 136 { 137 font-size: 1.8rem; 138 border-bottom-width: 2px; 139 padding-top: 0.5rem; 140 padding-bottom: 0.5rem; 141 word-spacing: 5px; 142 text-align: center; 143 } 144 145 main 146 { 147 color: var(--Main-color); 148 text-rendering: optimizeLegibility; 149 } 150 151 footer 152 { 153 text-align: center; 154 padding-top: 1rem; 155 margin-top: 1rem; 156 border-top-width: 2px; 157 } 158 159 div#banner-text 160 { 161 display: flex; 162 flex-direction: column; 163 justify-content: center; 164 align-items: center; 165 } 166 167 .banner 168 { 169 display: flex; 170 flex-direction: row; 171 gap: 1rem; 172 justify-content: center; 173 align-items: center; 174 line-height: 1; 175 } 176 177 .banner-title 178 { 179 margin: 0; 180 font-size: 3.6rem; 181 font-weight: 200; 182 letter-spacing: 0.425em; 183 /* letter-spacing is applied even to the last letter, 184 so for proper centering, we have to remove it ourselves, sadly */ 185 margin-right: -0.425em; 186 } 187 188 .banner-title a 189 { 190 text-decoration:none; 191 color: var(--Main-color); 192 } 193 194 .banner-title a:hover 195 { 196 text-decoration:none; 197 color: var(--Accent1-color); 198 } 199 200 a { 201 color: var(--Accent2-color); 202 } 203 204 a:hover, a:focus 205 { 206 text-decoration: underline; 207 color: var(--Accent1-color); 208 } 209 210 a.nav-active { 211 color: var(--Accent1-color); 212 font-weight: 200; 213 } 214 215 nav a { text-decoration: none; } 216 217 a.here { text-decoration: none; } 218 219 hr 220 { 221 border: 0 none; 222 color: var(--Accent2-color); 223 background-color: currentColor; 224 height: 2px; 225 } 226 227 hr.footnotes { width: 40%; } 228 229 a.footnote 230 { 231 text-decoration: none; 232 margin-right: 0.4rem; 233 } 234 235 ul.toc { list-style: none; } 236 237 h5 { font-size: 1.6rem; } 238 h6 { font-size: 1.4rem; } 239 240 code, kbd, samp 241 { 242 color: var(--Code-color); 243 } 244 245 246 /** Typography */ 247 248 @supports (hyphens: auto) 249 { 250 main 251 { 252 text-align: justify; 253 hyphens: auto; 254 } 255 } 256 257 body 258 { 259 font-family: system-ui, sans-serif; 260 font-weight: 200; 261 } 262 263 table, th, td 264 { 265 border: 1px solid var(--Accent1-color); 266 border-collapse: collapse; 267 } 268 269 th, td 270 { 271 padding: 0.5em; 272 hyphens: none; 273 text-align: left; 274 } 275 276 .centered { text-align: center; } 277 278 /* Style definition file generated by highlight 3.52, http://www.andre-simon.de/ */ 279 /* highlight theme: Kwrite Editor */ 280 body.hl { background-color: #e0eaee; } 281 pre.hl { color: #000000; background-color:#e0eaee; font-size: 10pt; font-family: monospace; } 282 .hl.num { color: var(--Highlight-num); } 283 .hl.esc { color: var(--Highlight-esc); } 284 .hl.str { color: var(--Highlight-str); } 285 .hl.pps { color: var(--Highlight-pps); } 286 .hl.slc { color: var(--Highlight-slc); font-style: italic; } 287 .hl.com { color: var(--Highlight-com); font-style: italic; } 288 .hl.ppc { color: var(--Highlight-ppc); } 289 .hl.opt { color: var(--Highlight-opt); } 290 .hl.ipl { color: var(--Highlight-ipl); } 291 .hl.lin { color: var(--Highlight-lin); } 292 .hl.kwa { color: var(--Highlight-kwa); font-weight: bold; } 293 .hl.kwb { color: var(--Highlight-kwb); } 294 .hl.kwc { color: var(--Highlight-kwc); font-weight: bold; } 295 .hl.kwd { color: var(--Highlight-kwd); } 296 297 @media screen and (max-width: 34em) 298 { 299 .banner, .banner-title 300 { 301 display: block; 302 text-align: center; 303 margin: auto; 304 } 305 .banner 306 { 307 margin-bottom: 2rem; 308 } 309 } 310 311 @media screen and (max-width: 28em) 312 { 313 .banner-title 314 { 315 font-size: 3.2rem; 316 } 317 }