root
/
threadr.lostcave.ddnss.de
3
1
Fork 1
Code Issues 18 Pull Requests Projects Releases Wiki Activity

formatting

master
BodgeMaster 2021-09-07 07:47:48 +02:00
parent 3d2053c337
commit 6c5eb39f96
1 changed files with 195 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
threadr/style.css
View File

@ -1,265 +1,267 @@
.container{ .container{
display: grid; display: grid;
grid-template-rows: 100px; grid-template-rows: 100px;
grid-template-columns: 1fr 3fr 1fr; grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px; grid-gap: 10px;
grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(100px, auto);
padding: 25px 25px; padding: 25px 25px;
} }
.beige { .beige {
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
} }
.orange { .orange {
color: %COLOR_ORANGE%; color: %COLOR_ORANGE%;
} }
.blue { .blue {
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
} }
.pink { .pink {
color: %COLOR_PINK%; color: %COLOR_PINK%;
} }
.cyan { .cyan {
color: %COLOR_CYAN%; color: %COLOR_CYAN%;
} }
.beige-b { .beige-b {
background-color: %COLOR_BEIGE%; background-color: %COLOR_BEIGE%;
} }
.orange-b { .orange-b {
background-color: %COLOR_ORANGE%; background-color: %COLOR_ORANGE%;
} }
.blue-b { .blue-b {
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
} }
.pink-b { .pink-b {
background-color: %COLOR_PINK%; background-color: %COLOR_PINK%;
} }
.cyan-b { .cyan-b {
background-color: %COLOR_CYAN%; background-color: %COLOR_CYAN%;
} }
div { div {
overflow: hidden; overflow: hidden;
text-overflow: clip; text-overflow: clip;
} }
div.item-1 { div.item-1 {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 1; grid-row: 1;
} }
div.item-2 { div.item-2 {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 2; grid-row: 2;
} }
div.item-3 { div.item-3 {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 3; grid-row: 3;
} }
div.item-4 { div.item-4 {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 4; grid-row: 4;
} }
div.margin { div.margin {
margin-top: 0px; margin-top: 0px;
margin-bottom: 24px; margin-bottom: 24px;
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
} }
div.postcontent { div.postcontent {
padding: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;
} }
div.banner { div.banner {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
} }
body { body {
margin: 0px; margin: 0px;
background-color: %COLOR_BEIGE%; background-color: %COLOR_BEIGE%;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
font-size: 1em; font-size: 1em;
} }
p { p {
font-family: monospace; font-family: monospace;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
} }
a { a {
font-family: monospace; font-family: monospace;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
} }
i { i {
font-family: monospace; font-family: monospace;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
} }
li { li {
font-family: monospace; font-family: monospace;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
} }
input { input {
font-family: monospace; font-family: monospace;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
padding: 14px 20px; padding: 14px 20px;
margin: 8px 0; margin: 8px 0;
background-color: %COLOR_BEIGE%; background-color: %COLOR_BEIGE%;
} }
input[type=text], select { input[type=text], select {
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
display: inline-block; display: inline-block;
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
box-sizing: border-box; box-sizing: border-box;
box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2);
} }
input[type=password], select { input[type=password], select {
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
display: inline-block; display: inline-block;
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
box-sizing: border-box; box-sizing: border-box;
box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2);
} }
input[type=submit] { input[type=submit] {
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
input[type=submit]:hover { input[type=submit]:hover {
background-color: %COLOR_CYAN%; background-color: %COLOR_CYAN%;
} }
textarea { textarea {
font-family: monospace; font-family: monospace;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
padding: 14px 20px; padding: 14px 20px;
margin: 8px 0; margin: 8px 0;
background-color: %COLOR_BEIGE%; background-color: %COLOR_BEIGE%;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
display: inline-block; display: inline-block;
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
box-sizing: border-box; box-sizing: border-box;
box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2);
} }
button { button {
font-family: monospace; font-family: monospace;
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
color: white; color: white;
padding: 14px 20px; padding: 14px 20px;
margin: 8px 0; margin: 8px 0;
width: 100%; width: 100%;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
button:hover { button:hover {
background-color: %COLOR_CYAN%; background-color: %COLOR_CYAN%;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: monospace; font-family: monospace;
color: %COLOR_BLUE%; color: %COLOR_BLUE%;
} }
time { time {
font-family: monospace; font-family: monospace;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
float: right; float: right;
} }
div.right { div.right {
float: right; float: right;
} }
div.round-border { div.round-border {
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
padding: 14px 20px; padding: 14px 20px;
margin: 8px 0; margin: 8px 0;
border-radius: 5px; border-radius: 5px;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
img.available_space { img.available_space {
object-fit: contain; object-fit: contain;
} }
div.image_container { div.image_container {
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
background-color: #f0f0f0; background-color: #f0f0f0;
border-radius: 5px; border-radius: 5px;
} }
p.image_container { p.image_container {
font-size: 0.8em; font-size: 0.8em;
} }
ul.topnav { ul.topnav {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
box-shadow: 0 0.7em 1.2em 0 rgba(0,0,0,0.2); box-shadow: 0 0.7em 1.2em 0 rgba(0,0,0,0.2);
} }
ul.topnav li {float: left;} ul.topnav li {
float: left;
}
ul.topnav li a { ul.topnav li a {
display: block; display: block;
text-align: center; text-align: center;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
font-family: monospace; font-family: monospace;
font-size: 1em; font-size: 1em;
padding: 1.2em 1.3em; padding: 1.2em 1.3em;
text-decoration: none; text-decoration: none;
} }
ul.topnav li a:hover:not(.active) { ul.topnav li a:hover:not(.active) {
background-color: %COLOR_CYAN%; background-color: %COLOR_CYAN%;
} }
ul.topnav li a.active { ul.topnav li a.active {
background-color: %COLOR_PINK%; background-color: %COLOR_PINK%;
} }
ul.topnav li.right { ul.topnav li.right {
float: right; float: right;
} }
/*@media screen and (max-width: 600px) { /*@media screen and (max-width: 600px) {
@ -268,121 +270,121 @@ ul.topnav li.right {
}*/ }*/
ul.topnav img { ul.topnav img {
height: 2.55em; height: 2.55em;
} }
ul.topnav li a.icon { ul.topnav li a.icon {
display: block; display: block;
text-align: center; text-align: center;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
font-family: monospace; font-family: monospace;
font-size: 1em; font-size: 1em;
text-decoration: none; text-decoration: none;
padding: 5.4px 9px; padding: 5.4px 9px;
} }
/* invisible spacer under nav bar */ /* invisible spacer under nav bar */
div.topnav { div.topnav {
height: 3em; height: 3em;
} }
ul.list { ul.list {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
} }
ul.list li { ul.list li {
float: left; float: left;
} }
ul.list li a { ul.list li a {
display: block; display: block;
text-align: center; text-align: center;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
font-family: monospace; font-family: monospace;
font-size: 1em; font-size: 1em;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
} }
ul.list li a:hover:not(.active) { ul.list li a:hover:not(.active) {
background-color: %COLOR_CYAN%; background-color: %COLOR_CYAN%;
} }
ul.list li a.active { ul.list li a.active {
background-color: %COLOR_PINK%; background-color: %COLOR_PINK%;
} }
.dropdown-content { .dropdown-content {
display: none; display: none;
position: fixed; position: fixed;
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
} }
.dropdown:hover .dropdown-content { .dropdown:hover .dropdown-content {
display: block; display: block;
} }
.dropdown { .dropdown {
float: left; float: left;
overflow: hidden; overflow: hidden;
} }
.dropdown .dropbtn { .dropdown .dropbtn {
font-size: 1em; font-size: 1em;
border: none; border: none;
outline: none; outline: none;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
padding: 1.2em 1.3em; padding: 1.2em 1.3em;
background-color: inherit; background-color: inherit;
font-family: inherit; font-family: inherit;
margin: 0; margin: 0;
} }
div.dropdown { div.dropdown {
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
text-align: center; text-align: center;
font-family: monospace; font-family: monospace;
font-size: 1em; font-size: 1em;
text-decoration: none; text-decoration: none;
} }
.dropdown:hover:not(.active) { .dropdown:hover:not(.active) {
background-color: %COLOR_CYAN%; background-color: %COLOR_CYAN%;
} }
section { section {
margin-top: 0px; margin-top: 0px;
margin-bottom: 24px; margin-bottom: 24px;
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
border-radius: 5px; border-radius: 5px;
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
background-color: %COLOR_ORANGE%; background-color: %COLOR_ORANGE%;
padding: 14px 20px; padding: 14px 20px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
} }
article { article {
border-radius: 5px; border-radius: 5px;
border: 1px solid %COLOR_BLUE%; border: 1px solid %COLOR_BLUE%;
background-color: %COLOR_BEIGE%; background-color: %COLOR_BEIGE%;
padding: 14px 20px; padding: 14px 20px;
box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2);
overflow: hidden; overflow: hidden;
} }
header { header {
border-radius: 0px; border-radius: 0px;
border: none; border: none;
background-color: %COLOR_BLUE%; background-color: %COLOR_BLUE%;
color: %COLOR_BEIGE%; color: %COLOR_BEIGE%;
margin: -40px; margin: -40px;
padding: 40px 40px 10px 40px; padding: 40px 40px 10px 40px;
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
} }