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
 39html {
 40    max-width: 500px;
 41    margin: auto auto;
 42    color: #2f2f2f;
 43    background: white;
 44    font-family: 'Atkinson Hyperlegible', sans-serif;
 45    padding-bottom: 20px;
 46}
 47
 48a {
 49    color: #0640e0;
 50}
 51
 52a:visited {
 53    color: #0640e0;
 54}
 55
 56.project {
 57    max-width: 500px;
 58    border: 2px solid #2f2f2f;
 59    background: #f8f8f8;
 60    border-radius: 5px;
 61    margin-top: 20px;
 62    padding: 20px 20px 0 20px;
 63    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 64}
 65
 66.project > h2 {
 67    margin-top: 0;
 68}
 69
 70.project > p:first-of-type {
 71    margin-bottom: 16px;
 72}
 73
 74.project > h2 > span {
 75    font-size: 12px;
 76    float: right;
 77}
 78
 79body > h1 > span {
 80    font-size: 12px;
 81    float: right;
 82}
 83
 84.project > details > pre {
 85    overflow: scroll;
 86}
 87
 88summary {
 89    cursor: pointer;
 90}
 91
 92details summary > * {
 93    display: inline;
 94}
 95
 96@media (prefers-color-scheme: dark) {
 97    html {
 98        background: #171717;
 99        color: #ccc;
100    }
101
102    a {
103        color: #5582ff;
104    }
105
106    a:visited {
107        color: #5582ff;
108    }
109
110    .project {
111        border: 2px solid #ccc;
112        background: #1c1c1c;
113    }
114}