[OCaml] Mobile-friendly clone of cgit.
style make navbar span full viewport width on mobile
Remove body padding entirely. Move horizontal padding to #page-header, div#main, and footer individually (1em on desktop, 0.5em on mobile). The navbar naturally spans the full viewport width without needing negative margin hacks.
lib/static/styles.css
@@ -4,7 +4,7 @@
4
4
font-family: Inter, sans-serif;
5
5
max-width: 50em;
6
6
margin: auto;
7
Removed:
padding: 0 1em;
7
Added:
padding: 0;
8
8
background-color: #181818;
9
9
color: white;
10
10
}
@@ -13,7 +13,7 @@
13
13
display: flex;
14
14
align-items: center;
15
15
gap: 1em;
16
Removed:
padding: 0.5em 0;
16
Added:
padding: 0.5em 1em;
17
17
}
18
18
19
19
.skip-link {
@@ -139,6 +139,10 @@
139
139
color: white;
140
140
}
141
141
142
Added:
div#main {
143
Added:
padding: 0 1em;
144
Added:
}
145
Added:
142
146
div#main ul {
143
147
padding-left: 0;
144
148
list-style: none;
@@ -308,21 +312,27 @@
308
312
309
313
footer {
310
314
margin: 1em;
315
Added:
padding: 0 1em;
311
316
text-align: center;
312
317
}
313
318
314
319
@media (max-width: 600px) {
315
Removed:
body {
316
Removed:
padding: 0 0.5em;
317
Removed:
}
318
Removed:
319
320
#page-header {
320
321
gap: 0.5em;
322
Added:
padding: 0.5em 0.5em;
321
323
}
322
324
323
325
#page-header .site-logo {
324
326
width: 2em;
325
327
height: 2em;
328
Added:
}
329
Added:
330
Added:
div#main {
331
Added:
padding: 0 0.5em;
332
Added:
}
333
Added:
334
Added:
footer {
335
Added:
padding: 0 0.5em;
326
336
}
327
337
328
338
.nav-hamburger {