diff options
Diffstat (limited to 'static/css')
| -rw-r--r-- | static/css/skunky.css | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/static/css/skunky.css b/static/css/skunky.css new file mode 100644 index 0000000..bdc894c --- /dev/null +++ b/static/css/skunky.css @@ -0,0 +1,204 @@ +/* TAGS */ +html { + font-family: Ubuntu; + background-color:black; + color: rgb(234, 216, 216); +} +a { + text-decoration: none; + color: cadetblue; +} +a:hover { + color: #d0ff00; + transition: 400ms; +} +header h1 { + padding-right: 0.2%; + padding-left: 0.2%; +} +header form { + align-self: center; +} +header { + display: flex; +} +form { + font-size: 0; + border: solid #164e3e 1px; + max-width: fit-content; +} +form input, button, select { + background-color: #134134; + padding: 5px; + color: whitesmoke; + border: 0; +} +input:focus { + outline: none; +} + +/* BLOCKS */ +.content { + align-items: center; + border-radius: 3px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.block { + max-width: 20%; + height: 0%; + padding: 4px; + border-radius: 2px; + border: 3px solid #091f19; + word-break: break-all; + background-color: #091f19; + margin-left: 5px; + margin-top: 5px; + text-align: center; +} +.block:hover { + border: 3px solid #4d27d6; + transition: 400ms; +} +.block img, .plates .user-plate img { + width: 100%; +} +.block p { + word-break: break-all; +} + +/* MESSAGES */ +.msg { + background-color: #091f19; + color: whitesmoke; + width: fit-content; + max-width: 90%; + padding: 4px; + border-radius: 2px; + margin-top: 6px; + text-wrap: pretty; + transition: 350ms; +} +.msg:hover { + background-color: #134134; +} +.reply { + border-radius: 0px 2px 2px 0px; + border-left: #258268 solid; + margin-left: 40px; +} + +/* FOLDER & PLATES */ +.folders, .plates { + display: flex; + flex-wrap: wrap; +} +.folder-item { + background-color: #060820; + border: 3px solid #060820; + width: 10% +} +.admins .user-plate { + width: 5%; + background-color: #011522; +} +.plates .user-plate { + margin-left: 1%; + margin-bottom: 1%; + background-color: #091f19; + padding: 3px; + word-break: break-all; + text-align: center; + max-width: 15%; +} + +/* USER/GROUP BACKGROUNDS */ +.ubg { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.ubg img { + width: 20%; +} + +/* COLORS */ +.nsfw, .about-false { + color: red; +} +.about-true { + color: green; +} +.author { + color: seagreen; +} +.dd { + color: rgb(160, 0, 147); +} + +/* SCREEN OPTIMISATIONS */ +@media (orientation: portrait) { + * { + font-size: 120% + } + + ul { + font-size: 80% + } + + center form { + font-size: 60% + } + + header form { + font-size: 60%; + max-width: unset; + border: 0; + } + header, center { + text-align: center; + display: block; + clear: both; + font-size: 200%; + } + + .content { + margin: auto; + display: inherit; + scale: 100%; + } + .block { + margin-top: 10%; + max-width: 200%; + } + .folder-item { + width: 25% + } + .folders { + display: flexbox; + justify-content: center + } + figure img { + width: 10% + } + figure a img { + width: 100% + } + .msg { + font-size: 60%; + max-width: 80% + } +} + +@media (max-width: 1462px) and (orientation: landscape) { + .block { + max-width: 30%; + } +} + +@media (min-width: 788px) and (max-width: 884px) { + .block { + max-width: 35%; + } +}
\ No newline at end of file |