custom.css (2663B)
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 td > mark
79 {
80 margin: 3px;
81 }
82
83 /* Utility class for hidden content */
84 .hidden {
85 display: none;
86 visibility: none;
87 }
88
89 /* Utility function for in-lining content */
90 .row {
91 display: flex;
92 flex-direction: row;
93 flex-wrap: wrap;
94 width: 100%;
95 }
96 @media only screen and (width <= 720px) {
97 .row {
98 flex-direction: column;
99 }
100 }
101
102 /* prevent wrapping within marks */
103 mark {
104 display: inline-block;
105 }
106
107 img, video {
108 opacity: 1 !important;
109 }
110
111 .description {
112 padding: 1em;
113 border-radius: 10px;
114 margin-bottom: 2em;
115 background-color: var(--imagetaint);
116 background-image: url("/assets/img/background.jpg");
117 background-size: cover;
118 background-repeat: no-repeat;
119 background-blend-mode: darken;
120 box-shadow: 2px 2px 5px 1px #00000080;
121 color: #fff;
122 }
123
124 .submit-container {
125 width: 100%;
126 background-color: var(--bg);
127 padding: 0.5em 0.5em 0em 0.5em;
128 margin-bottom: 0.5em;
129 border: 1px solid var(--border);
130 border-radius: var(--standard-border-radius);
131 position: sticky;
132 top: 0px;
133 z-index: 99;
134 }
135
136 /* footer */
137 footer {
138 text-align: left !important;
139 }
