styles.css
1 /* 2 * SPDX-FileCopyrightText: Amolith <amolith@secluded.site> 3 * 4 * SPDX-License-Identifier: CC0-1.0 5 */ 6 7 @font-face { 8 font-family: 'Atkinson Hyperlegible'; 9 font-weight: normal; 10 font-style: normal; 11 font-display: swap; 12 src: url("/static/fonts/regular-102a.woff2") format("woff2"); 13 } 14 15 @font-face { 16 font-family: 'Atkinson Hyperlegible'; 17 font-weight: normal; 18 font-style: italic; 19 font-display: swap; 20 src: url("/static/fonts/regular-102a.woff2") format("woff2"); 21 } 22 23 @font-face { 24 font-family: 'Atkinson Hyperlegible'; 25 font-weight: bold; 26 font-style: normal; 27 font-display: swap; 28 src: url("/static/fonts/bold-102a.woff2") format("woff2"); 29 } 30 31 @font-face { 32 font-family: 'Atkinson Hyperlegible'; 33 font-weight: bold; 34 font-style: italic; 35 font-display: swap; 36 src: url("/static/fonts/bolditalic-102a.woff2") format("woff2"); 37 } 38 39 html { 40 margin: auto auto; 41 color: var(--text); 42 background: var(--page-background); 43 font-family: 'Atkinson Hyperlegible', sans-serif; 44 scroll-behavior: smooth; 45 } 46 47 a { 48 color: var(--link); 49 } 50 51 a:visited { 52 color: var(--link); 53 } 54 55 /* Grid layout */ 56 body { 57 width: auto; 58 min-height: 100vh; 59 } 60 61 @supports (display: grid) { 62 body { 63 display: grid; 64 grid-template-rows: [header] auto [main] 1fr [footer] auto; 65 } 66 67 body>header, 68 body>main, 69 body>footer { 70 display: grid; 71 grid-template-columns: 72 [page-start] minmax(1em, 1fr) [content] minmax(240px, 100ch) [page-end] minmax(1em, 1fr); 73 } 74 75 body>main { 76 grid-template-rows: [top-gutter] 1em [content] 1fr [bottom-gutter] 1em; 77 } 78 79 body>footer { 80 grid-template-rows: [top-gutter] 2em [content] 1fr [bottom-gutter] 0.5em; 81 } 82 83 body>header { 84 grid-template-rows: [top-gutter] 0.5em [content] 1fr [bottom-gutter] 0.5em; 85 } 86 87 header .wrapper, 88 main .wrapper, 89 footer .wrapper { 90 grid-row: content; 91 grid-column: content; 92 } 93 } 94 95 /* End grid layout */ 96 97 h3 { 98 margin-block: 1rem 0.5rem; 99 } 100 101 h2, 102 p { 103 margin-block-start: 0; 104 margin-block-end: 1rem; 105 } 106 107 .wrapper h2 { 108 margin: 0 0 1rem 0; 109 } 110 111 .wrapper h2:first-child { 112 margin-top: 0; 113 } 114 115 .two_column { 116 display: block; 117 } 118 119 .projects-grid { 120 display: grid; 121 grid-template-columns: repeat(2, 1fr); 122 gap: 1rem; 123 margin-bottom: 4rem; 124 } 125 126 .project.card { 127 height: 100%; 128 display: flex; 129 flex-direction: column; 130 } 131 132 .projects { 133 width: 100%; 134 } 135 136 .release_note.card:not(:target), 137 .release_note.card:target, 138 .return_to_project { 139 display: none; 140 } 141 142 .card { 143 position: relative; 144 border: 2px solid var(--card-border); 145 background: var(--card-background); 146 border-radius: 5px; 147 margin: 20px 0; 148 padding: 20px 20px 0 20px; 149 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 150 } 151 152 .card>h3 { 153 margin-top: 0; 154 } 155 156 .card>p:first-of-type { 157 margin-bottom: 16px; 158 } 159 160 .card>p:last-of-type { 161 margin-bottom: 16px; 162 } 163 164 .delete { 165 float: right; 166 font-size: 12px; 167 } 168 169 .close { 170 position: absolute; 171 top: 2px; 172 right: 3px; 173 } 174 175 .close>a { 176 font-size: 1em; 177 text-decoration: none; 178 color: var(--card-border); 179 } 180 181 @media (prefers-color-scheme: dark) { 182 .close>a { 183 color: var(--text); 184 } 185 } 186 187 .card>pre, 188 .card>div>pre { 189 overflow: scroll; 190 } 191 192 header .wrapper { 193 display: flex; 194 flex-wrap: wrap; 195 justify-content: space-between; 196 align-content: center; 197 } 198 199 header h1 { 200 margin-block: 1.2rem; 201 color: var(--link); 202 } 203 204 header h1 a { 205 text-decoration: none; 206 } 207 208 header h1 a:hover { 209 border-bottom: 4px solid var(--link); 210 } 211 212 header nav { 213 display: flex; 214 justify-content: flex-end; 215 align-content: baseline; 216 flex: 1 1 auto; 217 margin-block: 1.2rem; 218 } 219 220 header nav a, 221 header nav a:visited { 222 display: block; 223 text-decoration: underline; 224 color: var(--text); 225 font-size: 1.2rem; 226 font-weight: bold; 227 line-height: 1; 228 border-radius: 0.5rem; 229 padding: 0.6rem 0.5rem 0.4rem; 230 } 231 232 header nav a+a { 233 margin-inline-start: 1rem; 234 } 235 236 header nav a:last-of-type { 237 padding-inline-end: 0; 238 } 239 240 header nav a[href="/new"], 241 header nav a[href="/new"]:visited { 242 text-decoration: none; 243 color: var(--action); 244 border-color: var(--action); 245 background-color: transparent; 246 border: 1px solid var(--action); 247 } 248 249 footer .wrapper { 250 display: flex; 251 flex-wrap: wrap; 252 justify-content: space-between; 253 align-content: center; 254 } 255 256 .release-notes-btn { 257 background: none; 258 border: none; 259 color: var(--link); 260 cursor: pointer; 261 text-decoration: underline; 262 padding: 0; 263 font: inherit; 264 } 265 266 [popover] { 267 margin: auto; 268 width: min(800px, 90vw); 269 max-height: 90vh; 270 border: 2px solid var(--card-border); 271 border-radius: 5px; 272 padding: 0; 273 background: var(--card-background); 274 color: var(--text); 275 overflow-y: auto; 276 } 277 278 [popover]:not(:popover-open) { 279 display: none; 280 } 281 282 .popover-content { 283 padding: 20px; 284 } 285 286 button[popovertarget] { 287 padding: 6px 12px; 288 background-color: var(--card-background); 289 border: 1px solid var(--card-border); 290 border-radius: 4px; 291 color: var(--text); 292 width: fit-content; 293 margin: auto 0; 294 } 295 296 button[popovertarget]:hover { 297 background-color: var(--card-border); 298 } 299 300 [popover]::backdrop { 301 background: rgba(0, 0, 0, 0.5); 302 backdrop-filter: blur(3px); 303 } 304 305 /* Mobile responsiveness */ 306 @media only screen and (max-width: 1000px) { 307 [popover] { 308 width: 95vw; 309 } 310 311 div[id] { 312 display: block; 313 } 314 } 315 316 @media (max-width: 850px) { 317 .projects-grid { 318 grid-template-columns: 1fr; 319 } 320 } 321 322 /* Forms */ 323 form { 324 width: 100%; 325 max-width: 50ch; 326 margin: 0 auto; 327 display: flex; 328 flex-direction: column; 329 } 330 331 form label { 332 font-weight: bold; 333 padding-block-end: 0.2rem; 334 } 335 336 fieldset { 337 position: relative; 338 border: 0 none; 339 background-color: var(--card-background); 340 margin-inline: -1px; 341 /* Line up with input boxes */ 342 margin-block-start: 1rem; 343 padding-inline: 1rem; 344 } 345 346 fieldset legend { 347 position: absolute; 348 top: -1.5rem; 349 left: 0; 350 margin-inline: 1px; 351 padding: 0; 352 font-weight: bold; 353 } 354 355 fieldset h4 { 356 margin-inline-start: 0.25rem; 357 margin-block: 0.5rem; 358 } 359 360 .input { 361 display: flex; 362 flex-direction: column; 363 margin-block-end: 1rem; 364 } 365 366 .input-wrapper label { 367 padding-inline-start: 0.5rem; 368 } 369 370 .select-release .input { 371 display: block; 372 } 373 374 .button { 375 line-height: 1; 376 padding: 0.6rem 0.5rem 0.4rem; 377 font-weight: bold; 378 font-size: 1.2rem; 379 color: var(--action); 380 background-color: var(--page-background); 381 border: 1px solid var(--action); 382 border-radius: 0.5rem; 383 cursor: pointer; 384 } 385 386 form.login .button { 387 margin-block-start: 0.75rem; 388 } 389 390 /* End Forms */ 391 392 @media (prefers-reduced-motion) { 393 394 *, 395 *::before, 396 *::after { 397 animation-duration: 0s !important; 398 transition: none !important; 399 scroll-behavior: auto !important; 400 } 401 }