181 lines
2.9 KiB
CSS
181 lines
2.9 KiB
CSS
|
@font-face { font-family: 'Lato';
|
|||
|
src: url('/assets/font/Lato-Regular.ttf') format('truetype'); }
|
|||
|
@font-face { font-family: 'Lato';
|
|||
|
src: url('/assets/font/Lato-Bold.ttf') format('truetype');
|
|||
|
font-weight: bold;
|
|||
|
}
|
|||
|
@font-face { font-family: 'Lato';
|
|||
|
src: url('/assets/font/Lato-Italic.ttf') format('truetype');
|
|||
|
font-style: italic;
|
|||
|
}
|
|||
|
@font-face { font-family: 'Lato';
|
|||
|
src: url('/assets/font/Lato-BoldItalic.ttf') format('truetype');
|
|||
|
font-weight: bold;
|
|||
|
font-style: italic;
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
body {
|
|||
|
font-family: Lato;
|
|||
|
scroll-behavior: smooth;
|
|||
|
text-align:center;
|
|||
|
}
|
|||
|
|
|||
|
span {font-family: Lato;}
|
|||
|
.it {font-style: italic;}
|
|||
|
.bo {font-weight: bold;}
|
|||
|
|
|||
|
* {
|
|||
|
box-sizing: border-box;
|
|||
|
}
|
|||
|
|
|||
|
img{
|
|||
|
max-width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
/* Wrapper f<>r die gesammte Seite*/
|
|||
|
#wrapper{
|
|||
|
max-width: 800px;
|
|||
|
margin: auto;
|
|||
|
}
|
|||
|
|
|||
|
/* Style the header */
|
|||
|
#header {
|
|||
|
background-color: #f1f1f1;
|
|||
|
position: -webkit-sticky;
|
|||
|
position: sticky;
|
|||
|
margin-top:10px;
|
|||
|
margin-bottom: 10px;
|
|||
|
}
|
|||
|
/* leerzeile nach dem header*/
|
|||
|
#header:after {
|
|||
|
content: "";
|
|||
|
display: table;
|
|||
|
clear: both;
|
|||
|
}
|
|||
|
|
|||
|
/*Header links*/
|
|||
|
#title{
|
|||
|
max-width:25%;
|
|||
|
float:left;
|
|||
|
background-color: #f1f1f1;
|
|||
|
}
|
|||
|
|
|||
|
#titellogo{
|
|||
|
width:30px;
|
|||
|
}
|
|||
|
|
|||
|
/*Header links (Men<65>)*/
|
|||
|
#menu {
|
|||
|
background-color: #f1f1f1;
|
|||
|
top:0px;
|
|||
|
max-width:75%;
|
|||
|
float:right;
|
|||
|
}
|
|||
|
|
|||
|
/*Hauptmen<65>*/
|
|||
|
ul#navigation {
|
|||
|
margin: 0px;
|
|||
|
padding: 0px;
|
|||
|
list-style-type: none;
|
|||
|
}
|
|||
|
|
|||
|
ul#navigation li {
|
|||
|
padding: 0px;
|
|||
|
margin: 0px;
|
|||
|
display: inline;
|
|||
|
}
|
|||
|
|
|||
|
ul#navigation li a:link {
|
|||
|
border: 1px solid #000;
|
|||
|
background-color: #CCCCCC;
|
|||
|
padding: 2px 5px 2px 5px;
|
|||
|
font-size: 12px;
|
|||
|
color: #000;
|
|||
|
text-decoration: none;
|
|||
|
}
|
|||
|
|
|||
|
ul#navigation li a:hover {
|
|||
|
border: 1px solid #000;
|
|||
|
background-color: #333333;
|
|||
|
padding: 2px 5px 2px 5px;
|
|||
|
color: #fff;
|
|||
|
}
|
|||
|
|
|||
|
/*Content wrapper*/
|
|||
|
.content{
|
|||
|
padding-top:75px;
|
|||
|
}
|
|||
|
|
|||
|
/* Create three unequal columns that floats next to each other */
|
|||
|
.column {
|
|||
|
float: left;
|
|||
|
padding: 10px;
|
|||
|
}
|
|||
|
|
|||
|
/* Left and right column */
|
|||
|
.column.side {
|
|||
|
width: 25%;
|
|||
|
}
|
|||
|
|
|||
|
/* Middle column */
|
|||
|
.column.middle {
|
|||
|
width: 50%;
|
|||
|
}
|
|||
|
|
|||
|
/* Clear floats after the columns */
|
|||
|
.row:after {
|
|||
|
content: "";
|
|||
|
display: table;
|
|||
|
clear: both;
|
|||
|
}
|
|||
|
|
|||
|
/* Footer*/
|
|||
|
#foot{
|
|||
|
background-color: #f1f1f1;
|
|||
|
}
|
|||
|
|
|||
|
.foot {
|
|||
|
background-color: #f1f1f1;
|
|||
|
float: left;
|
|||
|
padding: 10px;
|
|||
|
}
|
|||
|
|
|||
|
.foot.lside{
|
|||
|
text-align: left;
|
|||
|
width: 33%;
|
|||
|
}
|
|||
|
|
|||
|
.foot.middle{
|
|||
|
text-align: center;
|
|||
|
width: 33%;
|
|||
|
}
|
|||
|
|
|||
|
.foot.rside{
|
|||
|
text-align: right;
|
|||
|
width: 33%;
|
|||
|
}
|
|||
|
|
|||
|
/*Footermen<65>*/
|
|||
|
ul#footmenu{
|
|||
|
list-style-type: none;
|
|||
|
}
|
|||
|
|
|||
|
ul#footmenu li{
|
|||
|
}
|
|||
|
|
|||
|
ul#footmenu li a:link{
|
|||
|
text:black;
|
|||
|
}
|
|||
|
|
|||
|
ul#footmenu li a:hover{
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
|
|||
|
@media (max-width: 600px) {
|
|||
|
.column.side, .column.middle {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
}
|