size: 1 KiB


  

1* {
2  box-sizing: border-box;
3}
4
5:root {
6  --font-family: "Noto Serif", serif;
7  --font-weight: 400;
8  --font-family-mono: "Noto Sans Mono", monospace;
9  --bg: white;
10  --fg: black;
11  --pre-bg: #f2f2f2;
12  --code-fg: darkred;
13  --base-padding: 0.7rem 1rem;
14
15  font-family: var(--font-family);
16  font-size: 100%;
17  font-weight: var(--font-weight);
18}
19
20body {
21  max-width: 50rem;
22  min-height: 100vh;
23  margin: auto;
24  padding: var(--base-padding);
25}
26
27body {
28  background-color: var(--bg);
29  color: var(--fg);
30}
31
32video,
33img {
34  max-width: 100%;
35  max-height: 80vh;
36}
37
38pre,
39code {
40  font-family: var(--font-family-mono);
41  font-size: 0.95rem;
42}
43
44pre {
45  padding: var(--base-padding);
46  background-color: var(--pre-bg);
47  max-width: 100%;
48  overflow-x: auto;
49}
50
51p code,
52ul code {
53  color: var(--code-fg);
54}
55
56p,
57ul {
58  line-height: 1.5;
59  margin: 1.5rem 0;
60}
61
62p + ul {
63  margin-top: -1rem;
64}
65
66footer {
67  margin-top: 3rem;
68  text-align: right;
69  border-top: 2px solid var(--fg);
70}
71
72a[target="_blank"]:after {
73  content: "↗";
74}
75
76@media (prefers-color-scheme: dark) {
77  :root {
78    --font-family: "Noto Sans", sans-serif;
79    --font-weight: 400;
80    --bg: black;
81    --fg: cornsilk;
82    --pre-bg: #333;
83    --code-fg: burlywood;
84  }
85
86  a {
87    color: cornflowerblue;
88  }
89  a:visited {
90    color: violet;
91  }
92}
93
94@media screen and (max-width: 600px) {
95  :root {
96    --base-padding: 0.5rem 0.7rem;
97  }
98}
99
100time.relative {
101  white-space: nowrap;
102}
103
104.home--post-published-at {
105  opacity: 0.5;
106  font-variant-caps: small-caps;
107}
108
109.post--published-at {
110  float: right;
111}
112
113.post--title {
114  line-height: 1.2;
115}