/* Stylesheet für Selfhtml Design 05
responsives Layout mit Grid Layout ab Z. 249 */
/* ==================================================== GLOBAL DEFINITION ==================================================== */
/* alternatives Boxmodell */
html {
box-sizing: border-box;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
margin: 0 auto;
max-width: 75em;
padding: 0 1em;
font: normal 1em Arial, sans-serif; /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
background: #fffbf0;
color: #c32e04;
}
/* ===== header / Seitenkopf ===== */
header {
height: 1.5em;
padding: 0 1em;
margin-bottom:5em;
display: grid;
grid-template-columns: 6em 3fr 1fr;
}
#logo {
display:inline-block;
text-shadow: none;
color: transparent;
background: url(../img/logo.svg);
background-size: contain;
width: 5em;
height: 5em;
}
header svg {
font-size: 2em;
padding: 0 1em;
color: #c32e04;
}
header text {
font-family: 'Arial';
font-size: 2em;
font-weight: bold;
fill: none;
stroke-width: 3px;
text-anchor: middle /* entspricht text-align:center; */
}
#skiplink {
display: inline-block;
float: right;
color: #09c;
font-weight: bold;
}
/* ===== content / Inhalt ===== */
a {
color: #3983ab;
}
a:hover,
a:focus {
background: #e6f2f7;
font-weight: normal;
}
section h2 {
padding-left: 1em;
}
/* ===== #main-navigation ===== */
#main-nav {
overflow: hidden;
position: relative;
padding: 0 0 0 1.5rem;
margin-bottom: -.5em;
}
#main-nav ul {
list-style: none;
position: relative;
color: white;
margin: 0;
padding: 0;
}
#main-nav li {
display: inline-block;
width: 12rem;
margin: 0 0 0 -1.5rem; /* pull to left to overlap tabs */
position: relative;
padding: 0;
}
#main-nav a {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
padding: 1em;
}
#main-nav svg {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
pointer-events: none; /* SVG eats clicks weird */
z-index: 0;
}
#main-nav a use {
fill: #e6f2f7;
stroke: #3983ab;
stroke-width: 1;
}
#main-nav a[aria-current=page] {
z-index: 3;
}
#main-nav a[aria-current=page] use {
fill: #3983ab;
}
#main-nav span {
position: relative;
padding: 1rem 0 0 2.3rem; /* position the text */
display: inline-block;
width: 100%;
height: 100%;
}
#main-nav a:hover,
#main-nav a:focus{
background: transparent;
z-index: 4;
}
#main-nav a:hover span ,
#main-nav a:focus span {
color: black;
font-weight: bold;
}
/* teaser */
[role="complementary"] {
position: relative;
display: block;
}
[role="complementary"] img {
width: 45%;
border-radius: 2em 0;
}
[role="complementary"] figcaption h2,
[role="complementary"] figcaption p {
display: table;
padding: 0.5em 1em;
margin: 0 0 0.5em;
background: #c32e04;
color: #fff;
font-weight: bold;
text-shadow: 0 2px 0px rgba(0,0,0,0.3);
}
[role="complementary"] figcaption h2 {
border-radius: 1em 0 0 0;
}
[role="complementary"] figcaption p:last-child {
border-radius: 0 0 1em 0;
}
.gepunktet text {
font-size: 100px;
font-weight: bold;
font-weight: 900;
}
/* Layout */
main {
display: block; /*für alte IE9-11 */
padding: 1em;
}
/* 2-Spaltenlayout */
@media only screen and (min-width: 40em) {
main {
border: 1.5em solid #3983ab;
border-radius: 0 0 10em;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, min-content);
grid-gap: 1em;
}
main h1,
[role="complementary"] {
grid-column: 1 / 3;
}
[role="complementary"] {
grid-row: 2 / 4;
}
[role="complementary"] figcaption {
position: absolute;
left: 40%;
top: 1em;
}
}
#news {
grid-column: 1 / -1;
grid-row: 4 / 5;
color: #3983ab;
}
@media only screen and (min-width: 50em) {
#news {
grid-column: 2 / 3;
grid-row: 3 / 4;
}
}
#news time {
font-weight: normal;
font-size: 1.5em;
padding-right: 1em;
color: #c32e04;
}
#news time:after {
content:' :'
}
footer p {
float: right;
clear: both;
text-align: right;
}
footer p span {
display:block;
text-align: right;
}