forked from root/threadr.lostcave.ddnss.de
formatting
BodgeMaster
parent
3d2053c337
commit
6c5eb39f96
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue