oppi.li
advent of code solutions
aoc.oppi.li
haskell
aoc
book: improve styles for mobile
Signed-off-by: oppiliappan <me@oppi.li>
+59
-88
+16
-44
book/style.css
+16
-44
book/style.css
···
1
1
body {
2
-
max-width: 1000px;
2
+
max-width: 1400px;
3
3
margin-left: auto;
4
4
margin-right: auto;
5
5
box-sizing: border-box;
6
-
padding: 0 1vw;
7
-
font-size-adjust: ex-height 0.53;
6
+
padding: 0 5vw;
7
+
font-family: "Libre Baskerville", serif;
8
8
}
9
9
10
10
.sitenav {
···
16
16
text-align: justify;
17
17
}
18
18
19
+
pre, code {
20
+
font-family: "Fira Code", monospace;
21
+
}
22
+
19
23
.row {
20
24
display: grid;
21
25
grid-template-columns: 1fr 1fr;
···
26
30
}
27
31
28
32
.code {
29
-
padding-bottom: 2rem;
30
-
}
31
-
32
-
#output-panel {
33
-
position: fixed;
34
-
bottom: 0;
35
-
left: max(calc((100vw - 1000px) / 2), 1vw);
36
-
right: max(calc((100vw - 1000px) / 2), 1vw);
37
-
box-sizing: border-box;
38
-
border: 1px solid black;
39
-
}
40
-
41
-
#panel-actions {
42
-
display: flex;
43
-
list-style: none;
44
-
padding: 0.5rem;
45
-
background-color: #D0D0F7;
46
-
}
47
-
48
-
#panel-actions::before {
49
-
content: "+";
50
-
margin-right: 0.5rem;
51
-
}
52
-
53
-
details[open] #panel-actions::before {
54
-
content: "−";
55
-
}
56
-
57
-
#output-content {
58
-
white-space: pre-wrap;
59
-
word-wrap: break-word;
60
-
font-family: monospace;
61
-
padding: 0.5rem;
62
-
max-height: 50lvh;
63
-
background-color: white;
64
-
overflow-y: auto;
65
-
}
66
-
67
-
.output-error {
68
-
color: #8B0000;
33
+
padding-bottom: 1rem;
34
+
max-width: 100%;
35
+
overflow: auto;
69
36
}
70
37
71
38
@media (max-width: 768px) {
···
75
42
76
43
.row {
77
44
grid-template-columns: 1fr;
78
-
gap: 1rem;
45
+
gap: 0.0rem;
46
+
margin-bottom: 1rem;
47
+
}
48
+
49
+
.row > p {
50
+
margin-bottom: 0;
79
51
}
80
52
81
53
.code {
+3
book/template.html
+3
book/template.html
···
29
29
$if(math)$
30
30
$math$
31
31
$endif$
32
+
<link rel="preconnect" href="https://fonts.googleapis.com">
33
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
34
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
32
35
</head>
33
36
<body>
34
37
$for(include-before)$
+3
out/1-section.html
+3
out/1-section.html
···
23
23
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
24
24
</style>
25
25
<link rel="stylesheet" href="style.css" />
26
+
<link rel="preconnect" href="https://fonts.googleapis.com">
27
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
26
29
</head>
27
30
<body>
28
31
<nav id="sitenav">
+3
out/1.1-day-1.html
+3
out/1.1-day-1.html
···
70
70
code span.wa { font-style: italic; } /* Warning */
71
71
</style>
72
72
<link rel="stylesheet" href="style.css" />
73
+
<link rel="preconnect" href="https://fonts.googleapis.com">
74
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
75
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
73
76
</head>
74
77
<body>
75
78
<nav id="sitenav">
+3
out/1.2-day-2.html
+3
out/1.2-day-2.html
···
70
70
code span.wa { font-style: italic; } /* Warning */
71
71
</style>
72
72
<link rel="stylesheet" href="style.css" />
73
+
<link rel="preconnect" href="https://fonts.googleapis.com">
74
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
75
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
73
76
</head>
74
77
<body>
75
78
<nav id="sitenav">
+3
out/2-section-1.html
+3
out/2-section-1.html
···
23
23
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
24
24
</style>
25
25
<link rel="stylesheet" href="style.css" />
26
+
<link rel="preconnect" href="https://fonts.googleapis.com">
27
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
26
29
</head>
27
30
<body>
28
31
<nav id="sitenav">
+3
out/2.1-day-2-1.html
+3
out/2.1-day-2-1.html
···
70
70
code span.wa { font-style: italic; } /* Warning */
71
71
</style>
72
72
<link rel="stylesheet" href="style.css" />
73
+
<link rel="preconnect" href="https://fonts.googleapis.com">
74
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
75
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
73
76
</head>
74
77
<body>
75
78
<nav id="sitenav">
+3
out/2.2-day-4.html
+3
out/2.2-day-4.html
···
70
70
code span.wa { font-style: italic; } /* Warning */
71
71
</style>
72
72
<link rel="stylesheet" href="style.css" />
73
+
<link rel="preconnect" href="https://fonts.googleapis.com">
74
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
75
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
73
76
</head>
74
77
<body>
75
78
<nav id="sitenav">
+3
out/2.3-day-5.html
+3
out/2.3-day-5.html
···
70
70
code span.wa { font-style: italic; } /* Warning */
71
71
</style>
72
72
<link rel="stylesheet" href="style.css" />
73
+
<link rel="preconnect" href="https://fonts.googleapis.com">
74
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
75
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
73
76
</head>
74
77
<body>
75
78
<nav id="sitenav">
+3
out/index.html
+3
out/index.html
···
23
23
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
24
24
</style>
25
25
<link rel="stylesheet" href="style.css" />
26
+
<link rel="preconnect" href="https://fonts.googleapis.com">
27
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
28
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
26
29
</head>
27
30
<body>
28
31
<nav id="sitenav">
+16
-44
out/style.css
+16
-44
out/style.css
···
1
1
body {
2
-
max-width: 1000px;
2
+
max-width: 1400px;
3
3
margin-left: auto;
4
4
margin-right: auto;
5
5
box-sizing: border-box;
6
-
padding: 0 1vw;
7
-
font-size-adjust: ex-height 0.53;
6
+
padding: 0 5vw;
7
+
font-family: "Libre Baskerville", serif;
8
8
}
9
9
10
10
.sitenav {
···
16
16
text-align: justify;
17
17
}
18
18
19
+
pre, code {
20
+
font-family: "Fira Code", monospace;
21
+
}
22
+
19
23
.row {
20
24
display: grid;
21
25
grid-template-columns: 1fr 1fr;
···
26
30
}
27
31
28
32
.code {
29
-
padding-bottom: 2rem;
30
-
}
31
-
32
-
#output-panel {
33
-
position: fixed;
34
-
bottom: 0;
35
-
left: max(calc((100vw - 1000px) / 2), 1vw);
36
-
right: max(calc((100vw - 1000px) / 2), 1vw);
37
-
box-sizing: border-box;
38
-
border: 1px solid black;
39
-
}
40
-
41
-
#panel-actions {
42
-
display: flex;
43
-
list-style: none;
44
-
padding: 0.5rem;
45
-
background-color: #D0D0F7;
46
-
}
47
-
48
-
#panel-actions::before {
49
-
content: "+";
50
-
margin-right: 0.5rem;
51
-
}
52
-
53
-
details[open] #panel-actions::before {
54
-
content: "−";
55
-
}
56
-
57
-
#output-content {
58
-
white-space: pre-wrap;
59
-
word-wrap: break-word;
60
-
font-family: monospace;
61
-
padding: 0.5rem;
62
-
max-height: 50lvh;
63
-
background-color: white;
64
-
overflow-y: auto;
65
-
}
66
-
67
-
.output-error {
68
-
color: #8B0000;
33
+
padding-bottom: 1rem;
34
+
max-width: 100%;
35
+
overflow: auto;
69
36
}
70
37
71
38
@media (max-width: 768px) {
···
75
42
76
43
.row {
77
44
grid-template-columns: 1fr;
78
-
gap: 1rem;
45
+
gap: 0.0rem;
46
+
margin-bottom: 1rem;
47
+
}
48
+
49
+
.row > p {
50
+
margin-bottom: 0;
79
51
}
80
52
81
53
.code {