krz/skunky-art

  1/* TAGS */
  2html {
  3    font-family: Ubuntu;
  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    max-width: 20%;
 49    height: 0%;
 50    padding: 4px;
 51    border-radius: 2px;
 52    border: 3px solid #091f19;
 53    word-break: break-all;
 54    background-color: #091f19;
 55    margin-left: 5px;
 56    margin-top: 5px;
 57    text-align: center;
 58}
 59.block:hover {
 60    border: 3px solid #4d27d6;
 61    transition: 400ms;
 62}
 63.block img, .plates .user-plate img {
 64    width: 100%;
 65}
 66.block p {
 67    word-break: break-all;
 68}
 69
 70/* MESSAGES */
 71.msg {
 72    background-color: #091f19;
 73    color: whitesmoke;
 74    width: fit-content;
 75    max-width: 90%;
 76    padding: 4px;
 77    border-radius: 2px;
 78    margin-top: 6px;
 79    text-wrap: pretty;
 80    transition: 350ms;
 81}
 82.msg:hover {
 83    background-color: #134134;
 84}
 85.reply {
 86    border-radius: 0px 2px 2px 0px;
 87    border-left: #258268 solid;
 88    margin-left: 40px;
 89}
 90
 91/* FOLDER & PLATES */
 92.folders, .plates {
 93    display: flex;
 94    flex-wrap: wrap;
 95}
 96.folder-item {
 97    background-color: #060820;
 98    border: 3px solid #060820;
 99    width: 10%
100}
101.admins .user-plate {
102    width: 5%;
103    background-color: #011522;
104}
105.plates .user-plate {
106    margin-left: 1%;
107    margin-bottom: 1%;
108    background-color: #091f19;
109    padding: 3px;
110    word-break: break-all;
111    text-align: center;
112    max-width: 15%;
113}
114
115/* USER/GROUP BACKGROUNDS */
116.ubg {
117    display: flex;
118    flex-wrap: wrap;
119    justify-content: center;
120}
121.ubg img {
122    width: 20%;
123}
124
125/* COLORS */
126.nsfw, .about-false {
127    color: red;
128}
129.about-true {
130    color: green;
131}
132.author {
133    color: seagreen;
134}
135.dd {
136    color: rgb(160, 0, 147);
137}
138
139/* SCREEN OPTIMISATIONS */
140@media (orientation: portrait) {
141    * {
142        font-size: 120%
143    }
144    
145    ul {
146        font-size: 80%
147    }
148    
149    header {
150        margin-left: 3%;
151        text-align: center;
152        display: inline-block;
153        clear: both;
154        font-size: 200%;
155    }
156
157    form {
158        font-size: 60%;
159        border: solid #164e3e 5px;
160    }
161    
162    .content {
163        margin: auto;
164        display: inherit;
165        scale: 100%;
166    }
167    .block {
168        margin-top: 10%;
169        max-width: 200%;
170    }
171    .folder-item {
172        width: 25%
173    }
174    .folders {
175        display: flexbox;
176        justify-content: center
177    }
178    figure img {
179        width: 10%
180    }
181    figure a img {
182        width: 100%
183    }
184    .msg {
185        font-size: 60%;
186        max-width: 80%
187    }
188}
189
190@media (max-width: 1462px) and (orientation: landscape) {
191    .block {
192        max-width: 30%;
193    }
194}
195
196@media (min-width: 788px) and (max-width: 884px) {
197    .block {
198        max-width: 35%;
199    }
200}