krz/skunky-art

  1/* TAGS */
  2html {
  3    font-family: ubuntu, system-ui;
  4    background-color:black;
  5    color: rgb(234, 216, 216);
  6}
  7a {
  8    text-decoration: none;
  9    color: cadetblue;
 10}
 11a:hover {
 12    color: #d0ff00;
 13    transition: 400ms;
 14}
 15header h1 {
 16    padding-right: 0.2%;
 17    padding-left: 0.2%;
 18}
 19header form {
 20    align-self: center;
 21}
 22header, form {
 23    display: flex;
 24}
 25form {
 26    border: solid #164e3e 1px;
 27    max-width: fit-content;
 28}
 29form input, button, select {
 30    background-color: #134134;
 31    padding: 5px;
 32    color: whitesmoke;
 33    border: 0;
 34}
 35input:focus {
 36    outline: none;
 37}
 38
 39/* BLOCKS */
 40.content {
 41    align-items: center;
 42    border-radius: 3px;
 43    display: flex;
 44    flex-wrap: wrap;
 45    justify-content: center;
 46}
 47.block {
 48    padding: 0px 0px 6px 0px;
 49    border: 3px solid #000;
 50    word-break: break-all;
 51    background-color: #091f19;
 52    margin-left: 5px;
 53    margin-top: 5px;
 54    text-align: center;
 55}
 56.block h1 {
 57    padding: 8.5vh;
 58}
 59.block:hover {
 60    border: 3px solid #4d27d6;
 61    transition: 400ms;
 62}
 63
 64.block p {
 65    word-break: break-all;
 66}
 67
 68/* MESSAGES */
 69.msg {
 70    background-color: #091f19;
 71    color: whitesmoke;
 72    width: fit-content;
 73    max-width: 90%;
 74    padding: 4px;
 75    border-radius: 2px;
 76    margin-top: 6px;
 77    text-wrap: pretty;
 78    transition: 350ms;
 79}
 80.msg:hover {
 81    background-color: #134134;
 82}
 83.reply {
 84    border-radius: 0px 2px 2px 0px;
 85    border-left: #258268 solid;
 86    margin-left: 40px;
 87}
 88
 89/* FOLDER & PLATES */
 90.folders, .plates {
 91    display: flex;
 92    flex-wrap: wrap;
 93}
 94.folder-item {
 95    background-color: #060820;
 96    border: 3px solid #060820;
 97    width: 10%
 98}
 99.admins .user-plate {
100    width: 5%;
101    background-color: #011522;
102}
103.plates .user-plate {
104    margin-left: 1%;
105    margin-bottom: 1%;
106    background-color: #091f19;
107    padding: 3px;
108    word-break: break-all;
109    text-align: center;
110    max-width: 15%;
111}
112
113/* USER/GROUP BACKGROUNDS */
114.ubg {
115    display: flex;
116    flex-wrap: wrap;
117    justify-content: center;
118}
119.ubg img {
120    width: 20%;
121}
122
123/* COLORS */
124.nsfw, .about-false {
125    color: red;
126}
127.about-true {
128    color: green;
129}
130.author {
131    color: seagreen;
132}
133.dd {
134    color: rgb(160, 0, 147);
135}
136
137/* SCREEN OPTIMISATIONS */
138@media (orientation: portrait) {
139    * {
140        font-size: 120%
141    }
142    
143    ul {
144        font-size: 80%
145    }
146    
147    header {
148        margin-left: 3%;
149        text-align: center;
150        display: inline-block;
151        clear: both;
152        font-size: 200%;
153    }
154
155    form {
156        font-size: 60%;
157        border: solid #164e3e 5px;
158    }
159    
160    .content {
161        margin: auto;
162        display: inherit;
163        scale: 100%;
164    }
165    .block {
166        margin-top: 10%;
167        max-width: 200%;
168    }
169    .folder-item {
170        width: 25%
171    }
172    .folders {
173        display: flexbox;
174        justify-content: center
175    }
176    figure img {
177        width: 10%
178    }
179    figure a img {
180        width: 100%
181    }
182    .msg {
183        font-size: 60%;
184        max-width: 80%
185    }
186    .block img, .plates .user-plate img {
187        width: 100%;
188    }
189}
190
191@media (orientation: landscape) {
192    .block {
193        width: 20%;
194    }
195    .block img, .plates .user-plate img {
196        width: 100%;
197        height: 30vh;
198        object-fit: cover;
199    }
200}
201
202@media (max-width: 1462px) and (orientation: landscape) {
203    .block {
204        max-width: 30%;
205    }
206}
207
208@media (min-width: 788px) and (max-width: 884px) {
209    .block {
210        max-width: 35%;
211    }
212}