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 {
 23    display: flex;
 24}
 25form input, button, select {
 26    background-color: #134134;
 27    padding: 5px;
 28    color: whitesmoke;
 29    border: 0px;
 30    border-radius: 1px;
 31}
 32
 33/* BLOCKS */
 34.content {
 35    align-items: center;
 36    border-radius: 3px;
 37    display: flex;
 38    flex-wrap: wrap;
 39    justify-content: center;
 40}
 41.block {
 42    max-width: 20%;
 43    height: 0%;
 44    padding: 4px;
 45    border-radius: 2px;
 46    border: 3px solid #091f19;
 47    word-break: break-all;
 48    background-color: #091f19;
 49    margin-left: 5px;
 50    margin-top: 5px;
 51    text-align: center;
 52}
 53.block:hover {
 54    border: 3px solid #4d27d6;
 55    transition: 400ms;
 56}
 57.block img, .plates .user-plate img {
 58    width: 100%;
 59}
 60.block p {
 61    word-break: break-all;
 62}
 63
 64/* MESSAGES */
 65.msg {
 66    background-color: #091f19;
 67    color: whitesmoke;
 68    width: fit-content;
 69    max-width: 90%;
 70    padding: 4px;
 71    border-radius: 2px;
 72    margin-top: 6px;
 73    text-wrap: pretty;
 74    transition: 350ms;
 75}
 76.msg:hover {
 77    background-color: #134134;
 78}
 79.reply {
 80    border-radius: 0px 2px 2px 0px;
 81    border-left: #258268 solid;
 82    margin-left: 40px;
 83}
 84
 85/* FOLDER & PLATES */
 86.folders, .plates {
 87    display: flex;
 88    flex-wrap: wrap;
 89}
 90.folder-item {
 91    background-color: #060820;
 92    border: 3px solid #060820;
 93    width: 10%
 94}
 95.admins .user-plate {
 96    width: 5%;
 97    background-color: #011522;
 98}
 99.plates .user-plate {
100    margin-left: 1%;
101    margin-bottom: 1%;
102    background-color: #091f19;
103    padding: 3px;
104    word-break: break-all;
105    text-align: center;
106    max-width: 15%;
107}
108
109/* USER/GROUP BACKGROUNDS */
110.ubg {
111    display: flex;
112    flex-wrap: wrap;
113    justify-content: center;
114}
115.ubg img {
116    width: 20%;
117}
118
119/* COLORS */
120.nsfw, .about-false {
121    color: red;
122}
123.about-true {
124    color: green;
125}
126.author {
127    color: seagreen;
128}
129.dd {
130    color: rgb(160, 0, 147);
131}
132
133/* SCREEN OPTIMISATIONS */
134@media screen and (orientation: portrait) {
135    header {
136        scale: 155%;
137        justify-content: center;
138    }
139    .content {
140        margin: auto;
141        display: inherit;
142        scale: 100%;
143    }
144    .block {
145        max-width: 60%;
146    }
147}
148
149@media screen and (max-width: 1462px) {
150    .block {
151        max-width: 30%;
152    }
153}
154
155@media screen and (min-width: 788px) and (max-width: 884px) {
156    .block {
157        max-width: 35%;
158    }
159}