Skip to content

Commit ed71ffc

Browse files
stapelbergstapelberg
committed
split css into its own asset (out of head.html.tmpl)
…and add <link rel="preload"> directives to keep font loading fast.
1 parent 6c64441 commit ed71ffc

File tree

4 files changed

+309
-286
lines changed

4 files changed

+309
-286
lines changed

‎internal/assets/assets.go

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ package assets
22

33
import "embed"
44

5-
//go:embed *.html.tmpl js/*.js *.xml.tmpl
5+
//go:embed *.html.tmpl js/*.js css/*.css *.xml.tmpl
66
var FS embed.FS

‎internal/assets/css/bull.css

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
/* TODO: scroll-padding-top? */
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
/* fonts */
9+
10+
body, td, th {
11+
font-family: 'Go';
12+
font-size: 16px;
13+
line-height: 1.3rem;
14+
color: #000;
15+
}
16+
17+
h1, h2, h3, h4, h5, h6 {
18+
font-family: 'Go';
19+
font-weight: bold;
20+
font-variant-ligatures: none;
21+
color: #000;
22+
line-height: 2.3rem;
23+
}
24+
25+
pre, code, .cm-content {
26+
font-family: 'Go Mono';
27+
}
28+
29+
h1 { font-size: 1.8rem; }
30+
h2 { font-size: 1.6rem; }
31+
h3 { font-size: 1.4rem; }
32+
h4 { font-size: 1.2rem; }
33+
h5 { font-size: 1.0rem; }
34+
h6 { font-size: 0.8rem; }
35+
36+
body {
37+
overflow-y: scroll;
38+
}
39+
40+
div.bull_edit {
41+
height: 100%;
42+
}
43+
44+
.bull_edit main {
45+
/* full browser viewport height except for the header */
46+
height: calc(100vh - 13rem);
47+
}
48+
49+
#cm-goes-here {
50+
resize: vertical;
51+
overflow: auto;
52+
height: 100% !important;
53+
}
54+
55+
.cm-editor {
56+
height: 100%;
57+
}
58+
59+
main > pre, .cm-content {
60+
font-size: 16px;
61+
}
62+
63+
pre, code {
64+
background-color: #eee;
65+
padding: .1rem;
66+
}
67+
68+
pre {
69+
overflow-x: auto;
70+
font-size: 0.9rem;
71+
padding: .6rem 1rem;
72+
margin: .75rem 0;
73+
}
74+
75+
/* TODO: try using less opacity in nested lists */
76+
77+
/* margins and typography */
78+
79+
main h1, main h2, main h3, main h4, main h5, main h6 {
80+
margin-top: 2rem;
81+
margin-bottom: .75rem;
82+
}
83+
84+
.bull_title {
85+
margin-top: 1rem;
86+
margin-bottom: 0;
87+
}
88+
89+
#bull_desktopnav {
90+
display: none;
91+
}
92+
93+
main > p {
94+
margin-top: .75rem;
95+
margin-bottom: .75rem;
96+
}
97+
98+
.bull_page p {
99+
margin-top: .5rem;
100+
margin-bottom: .5rem;
101+
}
102+
103+
main blockquote {
104+
padding-left: 1rem;
105+
padding-right: 2rem;
106+
border-left: 5px solid grey;
107+
}
108+
109+
main ul, main ol {
110+
padding-left: 2rem;
111+
margin-top: .5rem;
112+
margin-bottom: .5rem;
113+
}
114+
115+
main ul {
116+
list-style-type: disc;
117+
}
118+
119+
main li {
120+
margin-bottom: .3rem;
121+
}
122+
123+
#bull_searchform input[type="text"] {
124+
width: 40rem;
125+
margin: 1rem 0;
126+
padding: .3rem;
127+
}
128+
129+
main input[type="checkbox"] {
130+
margin-left: .3rem;
131+
margin-right: .4rem;
132+
/* TODO: vertikal einmitten */
133+
}
134+
135+
main input[type="submit"] {
136+
padding: .25rem;
137+
margin-bottom: .25rem;
138+
}
139+
140+
main table {
141+
min-width: 100%;
142+
margin: 1rem .5rem;
143+
border-spacing: 0;
144+
}
145+
146+
main table tr:nth-child(even) {
147+
background-color: #eee;
148+
}
149+
150+
.bull_gen_browse th a,
151+
.bull_gen_browse th a:visited {
152+
color: #fff;
153+
text-decoration: none;
154+
padding: .25rem .5rem;
155+
background-color: #555;
156+
}
157+
158+
.bull_gen_browse th a:nth-child(1),
159+
.bull_gen_browse th a:visited:nth-child(1) {
160+
margin-left: 1rem;
161+
}
162+
163+
main th {
164+
background-color: #000;
165+
color: #fff;
166+
text-align: left;
167+
}
168+
169+
main th, main td {
170+
padding: .4rem;
171+
white-space: nowrap;
172+
}
173+
174+
main th {
175+
padding: .5rem .4rem;
176+
}
177+
178+
main img {
179+
max-width: 100%;
180+
}
181+
182+
/* layout */
183+
184+
.bull_lastupdate {
185+
opacity: .5;
186+
font-size: .9rem;
187+
margin-bottom: 1rem;
188+
}
189+
190+
#bull_navbar, #bull_footer, main {
191+
max-width: 45rem;
192+
margin: auto;
193+
}
194+
195+
#bull_navbar {
196+
display: grid;
197+
grid-template-columns: calc(2rem + 44px) auto auto;
198+
align-items: center;
199+
padding: .25rem 0;
200+
position: sticky;
201+
top: 0;
202+
background-color: #fff;
203+
z-index: 1;
204+
}
205+
206+
#bull_navbar a:link,
207+
#bull_navbar a:visited {
208+
text-decoration: none;
209+
}
210+
211+
#bull_navbar a.active {
212+
font-weight: bold;
213+
}
214+
215+
#bull_navbar li {
216+
display: inline;
217+
margin-right: 1.85rem;
218+
}
219+
220+
main>div:first-child {
221+
max-width: 45rem;
222+
padding: 1rem;
223+
}
224+
225+
226+
main hr {
227+
margin: 2rem 20rem;
228+
border: 0;
229+
border-top: 1px solid grey;
230+
max-width: 100%;
231+
}
232+
233+
/* 58rem is 16px * 58 = 928 px */
234+
@media screen and (min-width: 58rem) {
235+
#bull_navbar {
236+
padding-top: .5rem;
237+
}
238+
239+
#bull_navbar, #bull_footer, main {
240+
max-width: calc(45rem + 13rem);
241+
}
242+
243+
main {
244+
display: flex;
245+
}
246+
247+
#bull_desktopnav {
248+
display: block;
249+
}
250+
#bull_mobilenav {
251+
display: none;
252+
}
253+
254+
main>div:first-child {
255+
width: 45rem;
256+
}
257+
258+
}

0 commit comments

Comments
 (0)