* {
margin:0;
padding:0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
-webkit-tap-highlight-color: transparent;
}
a:visited {
color: #000;
}
ul {
list-style: none;
}
h1 h2 h3 {
font-weight: 100;
}
pre {
font-family: 'rubikregular';
white-space: break-spaces;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-family: 'rubikregular';
line-height: 1.0;
height: 100vh;
}
#container {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 320px 1fr;
grid-template-areas:
"main main main"
"footer footer footer"
;
}
#header{
position: fixed;
width: 100%;
height: 46px;
background-color: #fff;
}
#logo {
position:fixed;
width: 100%;
background-color: #fff;
height: 40px;
padding-top: 3px;
box-shadow: 0px 1px 1px #e9e9e9;
}
#logo img {
margin:auto;
display: block;
height: 35px;
}
#hauptnav {
position: fixed;
display: inline-block;
font-size: 40px;
background-color: #ffffff00;
width: 100%;
z-index: 100;
}
#hauptnav a {
display: inline-block;
margin-left: 0px;
font-size: 40px;
height: 40px;
width: 100%;
padding-top: 3px;
padding-left: 20px;
}
main {
grid-area: main;
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 300px 1fr;
grid-template-areas:
"infos infos infos"
"betreff betreff betreff"
"images images images"
"pdf pdf pdf"
"body body body"
"user_portrait user_portrait user_portrait";
}
#infos {
grid-area: infos;
margin-top: 20px;
padding:0 20px 0 20px;
}
.logo_portrait_small {
display: grid;
grid-template-columns: 70px 1fr;
grid-template-areas:
"logo_user user_when"
". user_when";
}
.logo_user {
grid-area: logo_user;
height: 50px;
width: 50px;
border-radius: 50%;
margin-left: 0px;
object-fit: cover;
}
#user_when{
grid-area: user_when;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"user_name user_name"
"when when";
}
.user_name{
grid-area: user_name;
}
#when {
grid-area: when;
margin-top: 5px;
display: grid;
grid-template-columns: 80px 1fr;
grid-template-areas:
"date time ";
color: #7d7d7d;
}
.date{
grid-area: date;
font-size: 14px;
letter-spacing: 0.1px;
}
.time{
grid-area: time;
font-size: 14px;
}
main h1 {
margin-top: 10px;
font-size: 16px;
color: #222;
font-family: 'rubiklight';
}
#betreff {
grid-area: betreff;
margin: 20px 0px 0px 0px;
font-size: 17px;
color: #4f4f4f;
line-height: 1.2;
padding: 40px 20px 10px 20px;
border-top: 1px solid #d7d7d7;
font-family: 'rubiklight';
}
#body_text {
grid-area: body;
/*margin: 20px 20px 0 20px;
border-radius: 10px;*/
padding:20px;
padding-bottom: 50px;
font-size: 15px;
color: #222;
line-height: 20px;
border-bottom: 1px solid #d7d7d7;
}
#body_text pre {
max-width: 50ch;
}
.picture_link{
height: 100%;
}
.pictures {
grid-area: images;
margin-top: 20px;
}
.pictures img {
/* Photos auf Mobile-Ansicht möglichst groß. Damit Inhalt auch ggf. von einem Plakatfoto gelesen werden kann!*/
width: 100%;
height: auto;
opacity: 1;
transition: opacity 200ms ease-out;
/*Damit img beim hovern nicht über der navbar liegt*/
z-index: -1;
position: relative;
border: 1px solid #eee;
}
.pictures img:hover{
opacity: 0.9;
transition: opacity 200ms ease-out;
}
.pdfs {
grid-area: pdf;
margin-top: 20px;
padding-bottom: 20px;
}
.pdfs img {
/* Photos auf Mobile-Ansicht möglichst groß. Damit Inhalt auch ggf. von einem Plakatfoto gelesen werden kann!*/
width: 100%;
height: auto;
opacity: 1;
transition: opacity 200ms ease-out;
border: 1px solid #7d7d7d;
}
.pdfs img:hover{
opacity: 0.9;
transition: opacity 200ms ease-out;
}
.user_portrait{
grid-area: user_portrait;
margin: 60px 20px 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
" logo_portrait logo_portrait"
"absender_portrait absender_portrait"
"absatz absatz"
"address address"
"oeffnungszeiten oeffnungszeiten "
"eigenbeschreibung eigenbeschreibung"
;
}
.user_portrait h2 {
grid-area: absender_portrait;
font-size: 30px;
margin: 30px 0 30px 0;
padding: 10px;
text-align: center;
font-family: 'rubiklight';
}
.logo_portrait{
grid-area: logo_portrait;
}
.logo_user_portrait {
height: 200px;
width: 200px;
margin-left: 0px;
display: block;
margin:auto;
border-radius: 50%;
object-fit: cover;
}
.absatz {
grid-area: absatz;
font-size: 15px;
color: #222;
line-height: 20px;
margin-top: 0;
padding-bottom: 20px;
border-bottom: 1px solid #d7d7d7;
}
.oeffnungszeiten {
grid-area: oeffnungszeiten;
width: 100%;
font-size: 16px;
color: #4f4f4f;
line-height: 24px;
margin-top:20px;
padding: 0 10px 20px 10px;
}
.oeffnungszeiten h3 {
color: #222;
font-size: 22px;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.eigenbeschreibung {
grid-area: eigenbeschreibung;
font-size: 14px;
color: #4f4f4f;
line-height: 24px;
margin-top:20px;
padding-bottom: 20px;
border-bottom: 1px solid #d7d7d7;
}
.eigenbeschreibung h3 {
color: #222;
font-size: 16px;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
address {
grid-area: address;
font-size: 16px;
font-style: normal;
color: #4f4f4f;
line-height: 24px;
margin-top:20px;
padding-bottom: 20px;
border-bottom: 1px solid #d7d7d7;
}
address h3 {
color: #222;
font-size: 22px;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
address p {
color: #4f4f4f;
}
address a {
display: block;
padding-top: 20px;
text-decoration: underline;
border: 1px solid #222;
border-radius: 50px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
color: #fff;
background-color: #000;
}
address a:hover {
background-color: #000000;
}
.phone {
margin-top: 20px;
}
@media screen and (min-width: 500px) {
main {
grid-area: main;
margin-top: 60px;
display: grid;
grid-template-columns: 1fr 470px 1fr;
grid-template-areas:
". infos ."
". betreff ."
". images ."
". pdf ."
". body ."
". user_portrait .";
}
.pdfs {
padding-left:0px;
}
.pdfs img {
width: 100%;
height: auto;
border-radius: 0px;
object-fit: cover;
}
.pdfs {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
.pdfs a:nth-of-type(1) {
grid-column: 1/3;
}
.pdfs a:nth-of-type(4) {
grid-column: 1/3;
}
}