graham.systems
Generate web slides from Markdoc
feat(template): use centered styling
+19
-7
+19
-7
templates/live-reload.eta
+19
-7
templates/live-reload.eta
···
12
12
box-sizing: border-box;
13
13
font-family: "Recursive", sans-serif;
14
14
background-color: #191724;
15
+
color: #908caa;
16
+
}
17
+
18
+
h1, h2, h3, h4, h5, h6 {
19
+
display: block;
15
20
color: #e0def4;
21
+
margin-bottom: 2cqi;
22
+
}
23
+
24
+
p, ul, ol {
25
+
font-size: 2.5cqi;
26
+
margin: 0;
16
27
}
17
28
18
29
article {
···
40
51
max-width: 100%;
41
52
max-height: 100%;
42
53
54
+
display: flex;
55
+
flex-direction: column;
56
+
justify-content: center;
57
+
align-items: center;
58
+
43
59
padding: 6cqmin;
44
60
background: #1f1d2e;
45
61
}
···
60
76
h1:first-of-type {
61
77
font-size: 10cqi;
62
78
margin-bottom: 3cqi;
63
-
font-weight: 900;
79
+
font-weight: 1000;
64
80
line-height: 0.8em;
65
81
}
66
82
67
83
h1:first-of-type ~ :is(h2, h3, h4, h5, h6, p) {
68
84
font-size: 2.8cqi;
69
-
font-weight: 600;
70
-
color: #908caa;
85
+
font-weight: 700;
71
86
margin: 0;
72
87
}
73
88
74
89
div:has(h1:first-of-type) {
75
90
display: flex;
76
91
flex-direction: column;
77
-
justify-content: end;
92
+
justify-content: center;
78
93
}
79
94
80
-
p, ul, ol {
81
-
font-size: 3cqi;
82
-
}
83
95
</style>
84
96
</head>
85
97
<body>