]> git.bts.cx Git - cx.git/blob - public/design/css/style.css
Basic support for pagination
[cx.git] / public / design / css / style.css
1 /* Very Smol Reset */
2 * {
3         box-sizing: border-box;
4         margin: 0;
5 }
6
7 @font-face {
8         font-family: "League Spartan";
9         src: url(/design/fonts/raleway/LeagueSpartan-VF.woff);
10 }
11
12 /* Layout */
13
14 body {
15         display: flex;
16         flex-direction: column;
17         min-height: 100vh;
18         padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
19         font-family: "League Spartan", sans-serif;
20         font-size: 1.4em;
21         line-height: 1.2em;
22         color: #222;
23 }
24
25 body > * {
26         --layout-spacing: 4em;
27         --max-width: 50ch;
28         width: min(100%, var(--max-width));
29         margin-left: auto;
30         margin-right: auto;
31 }
32
33 header {
34         margin-bottom: 8vh;
35 }
36
37 header h1 {
38         font-size: 2em;
39 }
40
41 header h1 a {
42         color: #000;
43         text-decoration: none;
44 }
45
46 nav ul {
47         list-style: none;
48         display: flex;
49         flex-wrap: wrap;
50         padding: 0;
51         margin-left: -1rem;
52         margin-right: -1rem;
53         vertical-align: bottom;
54 }
55
56 nav ul li {
57         padding: 0.5rem 1rem;
58 }
59
60 nav [aria-current="page"] {
61         font-weight: bold;
62 }
63
64 main > * + * {
65         margin-top: var(--layout-spacing);
66 }
67
68 body > footer {
69         margin-top: auto;
70         padding-top: var(--layout-spacing);
71 }
72
73 body > footer div {
74         border-top: 1px solid #ccc;
75         padding-top: 0.5em;
76         font-size: 0.9rem;
77         color: #767676;
78 }
79
80 article {
81         font-weight: lighter;
82 }
83
84 article * + * {
85         margin-top: 1em;
86 }
87
88 article > h1 {
89         margin-top: 0;
90 }
91
92 article > h1 a {
93         text-decoration: none;
94         color: #000;
95 }
96
97 article > h1 + .updated {
98         margin-top: 0;
99 }
100
101 hr {
102         margin: 4em auto;
103         border: 0;
104         height: 1px;
105         background: #ccc;
106 }
107
108 /* Typography */
109 :is(h1, h2, h3) {
110         line-height: 1.2;
111 }
112
113 :is(h1, h2) {
114         max-width: 40ch;
115 }
116
117
118
119 .updated {
120         font-size: 0.8em;
121         color: #aaa;
122         margin: 0 !important;
123 }
124
125 :is(h2, h3):not(:first-child) {
126         margin-top: 2em;
127 }
128
129 a {
130         color: navy;
131         text-underline-offset: 0.08em;
132 }
133
134 a:focus {
135         outline: 1px solid currentColor;
136         outline-offset: 0.2em;
137 }
138
139 /* Media */
140 article + article {
141         border-top: 1px solid #ccc;
142         padding-top: var(--layout-spacing);
143 }
144
145 article img {
146         display: block;
147         width: 100%;
148         aspect-ratio: 640 / 360;
149         /*min-height: 20rem;
150         max-height: 40vh;*/
151         object-fit: cover;
152         margin: 0 auto 1rem !important;
153 }
154
155 article iframe {
156         display: block;
157         width: 100%;
158         aspect-ratio: 640 / 360;
159 }
160
161 /*@supports (aspect-ratio: 1) {
162         article img {
163                 max-height: unset;
164                 aspect-ratio: 3/2;
165         }
166 }*/
167
168 /* Supporting Content */
169
170 code:not([class*="language"]) {
171         font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
172         font-size: 1.75ex;
173         color: #444;
174         background-color: rgba(0, 0, 0, 0.1);
175         padding-right: 0.15em;
176         padding-left: 0.15em;
177 }
178
179 pre code {
180         margin: 2rem 0;
181         padding: 0.5em 1rem;
182         display: block;
183         border-left: 3px solid rgba(0, 0, 0, 0.35);
184         background-color: rgba(0, 0, 0, 0.05);
185         border-radius: 0 0.25rem 0.25rem 0;
186         overflow-x: auto;
187         font-size: 0.8em !important;
188 }
189
190 blockquote {
191         margin: 2rem 0;
192         padding: 0.5em 1rem;
193         border-left: 3px solid rgba(0, 0, 0, 0.35);
194         background-color: rgba(0, 0, 0, 0.05);
195         border-radius: 0 0.25rem 0.25rem 0;
196 }