ctdo.de/web/styles/main.css

188 lines
2.8 KiB
CSS

:root {
--background-color: #193360;
--nav-background-color: #14284c;
--logo-background-color: #0e1e38;
}
* {
word-wrap: break-word;
}
html, body {
padding: 0;
margin: 0;
background-color: var(--background-color);
color: white;
font-family: sans-serif;
line-height: 150%;
}
a {
color: #22bb22 !important;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #bb66ff !important;
}
a.imgLink div {
position: relative;
text-align: center;
color: white;
}
a.imgLink:hover {
text-decoration: none;
}
a.imgLink div {
position: relative;
text-align: center;
color: white !important;
font-size: 0;
transform: scale(1);
transition: transform .5s;
text-shadow: 2px 2px black;
}
a.imgLink:hover div {
font-size: 200%;
transform: scale(.9);
transition: font-size .5s, transform .5s;
}
a.imgLink div h2 {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
header {
background-color: var(--logo-background-color);
}
nav {
padding: 10px 0 10px 0;
background-color: var(--nav-background-color);
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 0 2vw 0 2vw;
font-size: 125%;
}
nav ul li a {
color: white !important;
text-decoration: none;
}
nav ul li a.active {
text-decoration: underline;
text-decoration-style: double;
}
nav ul li a:visited {
color: white !important;
}
.red-text {
color: #DD0000 !important;
}
.green-text {
color: #00DD00 !important;
}
header {
text-align: center;
padding: 10px 0 0 0;
}
header img {
max-width: 200px;
max-height: 200px;
width: 90vw;
margin-bottom: 10px;
}
main {
max-width: 950px;
min-height: 100vh;
height: auto;
width: 90%;
margin: auto;
padding: 10px 0 0 0;
}
footer {
background-color: var(--nav-background-color);
height: 100px;
}
iframe.osm {
width: 500px;
height: 500px;
max-width: 90vw;
max-height: 90vw;
margin: auto;
display: block;
}
div.newBanner {
display: block;
position: fixed;
top: 30px;
left: -40px;
background-color: #DD0000;
text-align: center;
transform: rotateZ(-45deg);
transition: transform .5s;
}
div.newBanner:hover {
transform: rotateZ(-45deg) scale(1.4);
transition: transform .5s;
}
div.newBanner a {
color: white !important;
padding: 100px 50px 100px 50px;
}
div.newBanner a:hover {
text-decoration: none;
}
h3.topic {
margin-bottom: 0;
}
p.topic {
margin-top: 0;
}
@media only screen and (max-width: 885px) {
nav ul li {
display: block;
font-size: 200%;
padding: 20px 20px 20px 0;
text-align: right;
}
a.imgLink div {
font-size: 200%;
}
}