static/css/skunky.css

  1/* THEME
  2 *
  3 * Every colour in this file comes from a variable below, so a theme is a
  4 * palette rather than a fork of the stylesheet. The dark palette is the
  5 * original SkunkyArt look and stays the default.
  6 *
  7 * Light is offered through prefers-color-scheme, so a visitor who has asked
  8 * their system for light gets it with no cookie, no query string and no
  9 * JavaScript — nothing that identifies them. An instance can force one or the
 10 * other with "theme" in its config, which appends a block after this file.
 11 */
 12:root {
 13    --bg: black;
 14    --fg: rgb(234, 216, 216);
 15    --fg-strong: whitesmoke;
 16    --link: cadetblue;
 17    --link-hover: #d0ff00;
 18    --edge: #164e3e;
 19    --edge-strong: #258268;
 20    --accent: #4d27d6;
 21    --surface: #134134;
 22    --surface-sunken: #091f19;
 23    --surface-alt: #060820;
 24    --surface-deep: #011522;
 25    --status-bad: red;
 26    --status-good: green;
 27    --status-mild: seagreen;
 28    --status-note: rgb(160, 0, 147);
 29}
 30
 31@media (prefers-color-scheme: light) {
 32    :root {
 33        --bg: #f4f1ee;
 34        --fg: #1f2421;
 35        --fg-strong: #0d100e;
 36        --link: #1c6b78;
 37        --link-hover: #5a6b00;
 38        --edge: #8fbcae;
 39        --edge-strong: #258268;
 40        --accent: #4d27d6;
 41        --surface: #d9e8e1;
 42        --surface-sunken: #e8f0ec;
 43        --surface-alt: #e2e4f2;
 44        --surface-deep: #dbe7ef;
 45        --status-bad: #a11;
 46        --status-good: #157a3a;
 47        --status-mild: #2e8b57;
 48        --status-note: #8a007f;
 49    }
 50}
 51
 52/* TAGS */
 53html {
 54    font-family: ubuntu, system-ui;
 55    background-color: var(--bg);
 56    color: var(--fg);
 57}
 58a {
 59    text-decoration: none;
 60    color: var(--link);
 61}
 62a:hover {
 63    color: var(--link-hover);
 64    transition: 400ms;
 65}
 66header h1 {
 67    padding-right: 0.2%;
 68    padding-left: 0.2%;
 69}
 70header form {
 71    align-self: center;
 72}
 73header, form {
 74    display: flex;
 75}
 76form {
 77    border: solid var(--edge) 1px;
 78    max-width: fit-content;
 79}
 80form input, button, select {
 81    background-color: var(--surface);
 82    padding: 5px;
 83    color: var(--fg-strong);
 84    border: 0;
 85}
 86input:focus {
 87    outline: none;
 88}
 89
 90/* BLOCKS */
 91.content {
 92    align-items: center;
 93    border-radius: 3px;
 94    display: flex;
 95    flex-wrap: wrap;
 96    justify-content: center;
 97}
 98.block {
 99    padding: 0px 0px 6px 0px;
100    border: 3px solid var(--bg);
101    word-break: break-all;
102    background-color: var(--surface-sunken);
103    margin-left: 5px;
104    margin-top: 5px;
105    text-align: center;
106}
107.block h1 {
108    padding: 8.5vh;
109}
110.block:hover {
111    border: 3px solid var(--accent);
112    transition: 400ms;
113}
114
115.block p {
116    word-break: break-all;
117}
118
119/* MESSAGES */
120.msg {
121    background-color: var(--surface-sunken);
122    color: var(--fg-strong);
123    width: fit-content;
124    max-width: 90%;
125    padding: 4px;
126    border-radius: 2px;
127    margin-top: 6px;
128    text-wrap: pretty;
129    transition: 350ms;
130}
131.msg:hover {
132    background-color: var(--surface);
133}
134.reply {
135    border-radius: 0px 2px 2px 0px;
136    border-left: var(--edge-strong) solid;
137    margin-left: 40px;
138}
139
140/* FOLDER & PLATES */
141.folders, .plates {
142    display: flex;
143    flex-wrap: wrap;
144}
145.folder-item {
146    background-color: var(--surface-alt);
147    border: 3px solid var(--surface-alt);
148    width: 10%
149}
150.admins .user-plate {
151    width: 5%;
152    background-color: var(--surface-deep);
153}
154.plates .user-plate {
155    margin-left: 1%;
156    margin-bottom: 1%;
157    background-color: var(--surface-sunken);
158    padding: 3px;
159    word-break: break-all;
160    text-align: center;
161    max-width: 15%;
162}
163
164/* USER/GROUP BACKGROUNDS */
165.ubg {
166    display: flex;
167    flex-wrap: wrap;
168    justify-content: center;
169}
170.ubg img {
171    width: 20%;
172}
173
174/* COLORS */
175.nsfw, .about-false {
176    color: var(--status-bad);
177}
178.about-true {
179    color: var(--status-good);
180}
181.author {
182    color: var(--status-mild);
183}
184.dd {
185    color: var(--status-note);
186}
187
188/* SCREEN OPTIMISATIONS */
189@media (orientation: portrait) {
190    header {
191        margin-left: 3%;
192        text-align: center;
193        display: inline-block;
194        clear: both;
195    }
196
197    form {
198        border: solid var(--edge) 1px;
199    }
200    
201    .content {
202        margin: auto;
203        display: inherit;
204        scale: 100%;
205    }
206    .block {
207        margin-top: 10%;
208        max-width: 100%;
209    }
210    .folder-item {
211        width: 25%
212    }
213    .folders {
214        display: flexbox;
215        justify-content: center
216    }
217    figure img {
218        width: 10%
219    }
220    figure a img {
221        width: 100%
222    }
223    .msg {
224        max-width: 80%
225    }
226    .block img, .plates .user-plate img {
227        width: 100%;
228    }
229}
230
231@media (orientation: landscape) {
232    .block {
233        width: 20%;
234    }
235    .block img, .plates .user-plate img {
236        width: 100%;
237        height: 30vh;
238        object-fit: cover;
239    }
240}
241
242@media (max-width: 1462px) and (orientation: landscape) {
243    .block {
244        max-width: 30%;
245    }
246}
247
248@media (min-width: 788px) and (max-width: 884px) {
249    .block {
250        max-width: 35%;
251    }
252}
253/* POST */
254figure h1 {
255    font-size: 1.2em;
256    margin: 0.3em 0;
257}
258
259/* INDEX */
260.index {
261    display: flex;
262    max-width: fit-content;
263    position: absolute;
264    top: 50%;
265    right: 50%;
266    transform: translate(50%, -50%);
267}
268.index div {
269    transform: translate(0, 50%);
270    margin-left: 4%;
271    flex-basis: 100%;
272    height: 30%;
273    display: block;
274    max-width: fit-content;
275}
276.index div h1, .index form {
277    margin: 0;
278}
279.index div form {
280    font-size: 100%;
281    max-width: 100%;
282}
283.index div form input {
284    width: 100%;
285}
286.index img {
287    width: 30%;
288    height: 30%;
289}
290.index .source {
291    margin-top: 5%;
292    font-size: 200%;
293    text-align: center;
294}
295@media (orientation: portrait) {
296    .index {
297        display: block;
298        position: static;
299        transform: none;
300        width: 100%;
301        max-width: none;
302        padding: 1em;
303        box-sizing: border-box;
304    }
305    .index img {
306        width: 60%;
307        height: auto;
308        display: block;
309        margin: 0 auto;
310    }
311    .index form {
312        width: 100%;
313    }
314    .index div {
315        transform: none;
316        margin: 0;
317        width: 100%;
318        max-width: none;
319    }
320    .index div h1 {
321        text-align: center;
322    }
323}
324@media (max-width: 1155px) and (orientation: landscape) {
325    .index img {
326        width: 50%;
327    }
328    .index div {
329        transform: none;
330    }
331}