custom.css (1739B)
1 /* Accent colours that are partially transparent
2 * REVERSED for better highlighting
3 */
4 :root {
5 --hlaccent: #ffb30066; /* yellow for light mode */
6 }
7 @media (prefers-color-scheme:dark) {
8 :root {
9 --hlaccent: #0d47a155; /* blue for dark mode */
10 }
11 }
12
13 /* Make Search form stretch across entire content-width
14 * It should flex / share row with the search button
15 */
16 #searchform {
17 margin-top: 3em;
18 width: 100%;
19 display: flex;
20 flex-direction: row;
21 }
22
23 /* Search bar should stretch across entire content-width */
24 #searchbar {
25 width: 100%;
26 margin-right: 5px;
27 }
28
29 /* On mobile devices, the search button should be in its own row instead */
30 @media only screen and (width <= 720px) {
31 #searchform {
32 flex-direction: column;
33 }
34 }
35
36 /* Set large margins around the description */
37 .description {
38 margin-top: 3em;
39 margin-bottom: 50vh;
40 }
41
42 /* Description buttons should always be in one line */
43 .description > .button {
44 width: calc((100% / 2) - 10px); /* Two buttons with 10px margin between */
45 text-align: center;
46 }
47
48 /* Buttons and Code/Marks within article class should have wider margins */
49 button,
50 .button,
51 article > code,
52 article > .categories > mark
53 {
54 margin: 3px;
55 }
56
57 /* Utility class for hidden content */
58 .hidden {
59 display: none;
60 visibility: none;
61 }
62
63 /* Utility function for in-lining content */
64 .row {
65 display: flex;
66 flex-direction: row;
67 flex-wrap: wrap;
68 width: 100%;
69 }
70 @media only screen and (width <= 720px) {
71 .row {
72 flex-direction: column;
73 }
74 }
75
76 /* Set selection colours for the article class */
77 article.selected {
78 background-color: var(--hlaccent);
79 }
80
81 /* prevent wrapping within marks */
82 p > mark {
83 display: inline-block;
84 }
