This commit is contained in:
Klaas 2024-06-06 21:03:19 +02:00
parent 86c33e2ceb
commit 9634e7f4f2
1 changed files with 180 additions and 0 deletions

180
public/css/style.css Normal file
View File

@ -0,0 +1,180 @@
@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: 1200px;
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ü)*/
#menu {
background-color: #f1f1f1;
top:0px;
max-width:75%;
float:right;
}
/*Hauptmenü*/
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ü*/
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%;
}
}