custom.css (2642B)
1 /* Accent colours that are partially transparent
2 * REVERSED for better highlighting
3 */
4 :root {
5 --accent: #ef5d2f;
6 --imagetaint: #a22600bb;
7 --accent-hover: #ff9999;
8 --marked: #ff6733;
9 }
10
11 /* Make Search form stretch across entire content-width
12 * It should flex / share row with the search button
13 */
14 #searchform {
15 margin-top: 3em;
16 width: 100%;
17 display: flex;
18 flex-direction: row;
19 }
20
21 /* Search bar should stretch across entire content-width */
22 #searchbar {
23 width: 100%;
24 margin-right: 5px;
25 }
26
27 /* On mobile devices, the search button should be in its own row instead */
28 @media only screen and (width <= 720px) {
29 #searchform {
30 flex-direction: column;
31 }
32 .nomobile {
33 display: none;
34 }
35 }
36
37 /* Buttons */
38 .buttonrow {
39 display: flex;
40 flex-wrap: wrap;
41 width: 100%;
42 }
43 .buttonrow > button.c2,
44 .buttonrow > .button.c2 {
45 flex: 45%;
46 min-width: 180px;
47 text-align: center;
48 }
49
50 /* Set large margins around the description */
51 .description {
52 margin-top: 3em;
53 /* margin-bottom: 50vh; */
54 }
55
56 .fullheight {
57 height: 100%;
58 min-height: 100vh;
59 }
60
61 .screenshots > img {
62 width: 100%;
63 max-width: 250px;
64 display: inline-block;
65 }
66
67 /* Description buttons should always be in one line */
68 .description > .button,
69 .screenshots > .button
70 {
71 width: calc((100% / 2) - 10px); /* Two buttons with 10px margin between */
72 text-align: center;
73 }
74
75 /* Buttons and Code/Marks within article class should have wider margins */
76 button,
77 .button,
78 article > code,
79 article > .categories > mark
80 {
81 margin: 3px;
82 }
83
84 /* Utility class for hidden content */
85 .hidden {
86 display: none;
87 visibility: none;
88 }
89
90 /* Utility function for in-lining content */
91 .row {
92 display: flex;
93 flex-direction: row;
94 flex-wrap: wrap;
95 width: 100%;
96 }
97 @media only screen and (width <= 720px) {
98 .row {
99 flex-direction: column;
100 }
101 }
102
103 /* prevent wrapping within marks */
104 mark {
105 display: inline-block;
106 }
107
108 img, video {
109 opacity: 1 !important;
110 }
111
112 .description {
113 padding: 1em;
114 border-radius: 10px;
115 margin-bottom: 2em;
116 background-color: var(--imagetaint);
117 background-image: url("/assets/img/background.jpg");
118 background-size: cover;
119 background-repeat: no-repeat;
120 background-blend-mode: darken;
121 box-shadow: 2px 2px 5px 1px #00000080;
122 color: #fff;
123 }
124
125 .submit-container {
126 width: 100%;
127 background-color: var(--bg);
128 padding: 0.5em 0.5em 0em 0.5em;
129 margin-bottom: 0.5em;
130 border: 1px solid var(--border);
131 border-radius: var(--standard-border-radius);
132 position: sticky;
133 top: 0px;
134 z-index: 99;
135 }
