krz/skunky-art

  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    * {
191        font-size: 120%
192    }
193    
194    ul {
195        font-size: 80%
196    }
197    
198    header {
199        margin-left: 3%;
200        text-align: center;
201        display: inline-block;
202        clear: both;
203        font-size: 200%;
204    }
205
206    form {
207        font-size: 60%;
208        border: solid var(--edge) 5px;
209    }
210    
211    .content {
212        margin: auto;
213        display: inherit;
214        scale: 100%;
215    }
216    .block {
217        margin-top: 10%;
218        max-width: 200%;
219    }
220    .folder-item {
221        width: 25%
222    }
223    .folders {
224        display: flexbox;
225        justify-content: center
226    }
227    figure img {
228        width: 10%
229    }
230    figure a img {
231        width: 100%
232    }
233    .msg {
234        font-size: 60%;
235        max-width: 80%
236    }
237    .block img, .plates .user-plate img {
238        width: 100%;
239    }
240}
241
242@media (orientation: landscape) {
243    .block {
244        width: 20%;
245    }
246    .block img, .plates .user-plate img {
247        width: 100%;
248        height: 30vh;
249        object-fit: cover;
250    }
251}
252
253@media (max-width: 1462px) and (orientation: landscape) {
254    .block {
255        max-width: 30%;
256    }
257}
258
259@media (min-width: 788px) and (max-width: 884px) {
260    .block {
261        max-width: 35%;
262    }
263}