pcs-website-test/lektor/lektordata/project/assets/static/style.css
2024-11-19 20:08:56 +01:00

432 lines
No EOL
7.5 KiB
CSS

@font-face {
font-family: "Roboto-Regular";
src: url(/static/webfonts/Roboto-Regular.woff2)format("woff2"),url(/static/webfonts/Roboto-Regular.woff)format("woff")
}
@font-face {
font-family:"Roboto-Light";src:url(/static/webfonts/Roboto-Light.woff2)format("woff2"),url(/static/webfonts/Roboto-Light.woff)format("woff")
}
body {
font-size: 23px;
font-family: "Roboto-Light","Arial",sans-serif;
margin: 50px 25px
}
.navbar-nav {
padding-top: 10px
}
.navbar-nav .active a,a:hover {
color: #7f5e3c
}
a {
color: #b78c66;
text-decoration: none
}
td,th {
padding: 5px 15px
}
div.page,footer,header {
position: relative;
width: 80%;
margin: 0 auto;
background: #ececec;
max-width: 1200px
}
div.page {
color: #6c7d8c;
}
div.page>div.inner_page,footer>div.inner_footer,header>div.inner_header {
padding: 20px 30px;
}
div.inner_page > * {
margin: 0;
padding:0 ;
}
body,div.page h1, div.page h2, div.page h3, div.page h4, div.page h5, div.page h6 {
color: #5d5d5d;
padding: 20px 30px;
margin: 0;
}
body,div.inner_page h1, div.inner_page h2, div.inner_page h3, div.inner_page h4, div.inner_page h5, div.inner_page h6 {
color: #5d5d5d;
padding: 0;
}
body,div.inner_page p + h3{
padding: 1.5em 0 0 0;
}
div.inner_page {
position: relative;
top: 0;
padding: 0
}
div.inner_page.bgimage {
background-image: url(/images/bg_image_welcome_1.jpg);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
background-color: rgba(255,255,255,.6);
background-blend-mode: lighten;
min-height: 672px;
box-sizing: border-box
}
footer,header,header h1 {
color: #b0b0b0
}
header {
font-size: 20px;
}
footer {
font-size: 16px;
}
header h1 {
margin: 0;
font-weight: 700;
font-size: 38px;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0
}
header nav ul li {
display: inline;
margin: 0 8px 0 0;
padding: 0
}
div.page {
background: #fafafa
}
.inner_page.bgimage .image img {
width: 283.66px
}
.termine *{
box-sizing: border-box;
}
.termine ul {
list-style: none;
padding: 0;
margin: 0;
}
.termine li {
display: flex;
margin-bottom: 3px;
}
.termine ul > li {
font-weight: bold;
width: 76vw;
max-width: 1140px;
}
.termine ul > li > div {
width: 500px;
font-size: 20px;
}
.termine > ul > li:nth-child(odd) {
background: #fff;
}
.termine > ul > li:nth-child(even) {
background: #ececec;
}
.termine ul > li > ul > li {
width: 175px;
}
.termine ul > li > ul > li:nth-child(1){
width: 250px;
}
.termine ul > li > ul > li:nth-child(2){
width: 75px;
}
.termine ul > li > ul {
display: flex;
padding-left: 0;
margin-left: 0;
}
.termine ul > li > ul > li {
margin-right: 0;
}
.termine ul > li > ul > li > div{
font-size: 20px;
font-weight: normal;
}
@media (max-width:768px) {
header h1 {
font-size: 3.15vw
}
header nav ul {
display: flex;
flex-wrap: wrap;
width: 75%;
font-size: 2.5vw
}
header nav ul li {
flex-basis: 25%;
box-sizing: border-box;
padding: 5px 2.5% 5px 0;
white-space: nowrap
}
div.inner_page.bgimage {
background-image: none;
min-height: 0
}
body {
font-size: 4vw
}
header {
font-size: 3vw
}
footer {
font-size: 2vw
}
.inner_page.bgimage .image img {
width: 80%
}
.termine ul {
display: table;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.termine ul > li{
display: table-row;
width: 80vw;
padding: 0;
margin: 0;
}
.termine ul > li > div{
width: 70vw;
text-align: left;
padding: 0;
margin: 0;
display: inline-block;
/*white-space: nowrap;*/
}
.termine ul > li > ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr; /* Zwei Spalten für die ersten beiden Einträge */
grid-template-rows: auto auto; /* Drei Zeilen: Eine für die ersten beiden, zwei für die restlichen */
grid-gap: 10px; /* Optional: Abstand zwischen den Zellen */
}
.termine ul > li > ul > div{
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
}
.termine ul > li > ul > li {
display: table-cell;
}
.termine ul > li > ul > li:nth-child(1) {
width: 42.5vw;
grid-column: span 1;
}
.termine ul > li > ul > li:nth-child(2) {
width: 1.5vw;
grid-column: span 1;
}
.termine ul > li > ul > li:nth-child(3) {
width: 31vw;
grid-column: span 2;
}
.termine ul > li > ul > li:nth-child(1) > div{ width: 45.5vw; }
.termine ul > li > ul > li:nth-child(2) > div{ width: 1.5vw; }
.termine ul > li > ul > li:nth-child(3) > div{ width: 31vw; }
.termine ul > li > div, .termine ul > li > ul > li > div {
font-size: 4vw;
}
}
@media (min-width:1025px) and (max-width:1540px) {
div.inner_page.bgimage {
min-height: calc((80vw - 60px)*.572)
}
header h1 {
font-size: 2.4vw
}
body {
font-size: 1.5vw
}
header {
font-size: 1.25vw
}
footer {
font-size: 1vw
}
.termine ul > li {
width: 76vw;
}
.termine ul > li > div {
width: 35vw;
}
.termine ul > li > ul > li {
width: 11vw;
}
.termine ul > li > ul > li:nth-child(1){
width: 16vw;
}
.termine ul > li > ul > li:nth-child(2){
width: 5vw;
}
.termine ul > li > div, .termine ul > li > ul > li > div {
font-size: 1.25vw;
}
}
@media (min-width:769px) and (max-width:1024px) {
header h1 {
font-size: 3.15vw
}
header nav ul {
display: flex;
flex-wrap: wrap;
width: 75%
}
header nav ul li {
flex-basis: 25%;
box-sizing: border-box;
padding: 5px 2.5% 5px 0
}
div.inner_page.bgimage {
min-height: calc((80vw - 60px)*.572)
}
body {
font-size: 2.5vw
}
header {
font-size: 2vw
}
footer {
font-size: 1.75vw
}
.inner_page.bgimage .image img{
width: 150px
}
.termine ul {
display: table;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.termine ul > li{
display: table-row;
width: 75vw;
padding: 0;
margin: 0;
}
.termine ul > li > div{
width: 70vw;
text-align: left;
padding: 0;
margin: 0;
display: inline-block;
white-space: nowrap;
}
.termine ul > li > ul {
display: table-row;
}
.termine ul > li > ul > div{
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
}
.termine ul > li > ul > li {
display: table-cell;
}
.termine ul > li > ul > li:nth-child(1) { width: 27vw; }
.termine ul > li > ul > li:nth-child(2) { width: 1.5vw; }
.termine ul > li > ul > li:nth-child(3) { width: 46.5vw; }
.termine ul > li > ul > li:nth-child(1) > div{ width: 27vw; }
.termine ul > li > ul > li:nth-child(2) > div{ width: 1.5vw; }
.termine ul > li > ul > li:nth-child(3) > div{ width: 46.5vw; }
.termine ul > li > div, .termine ul > li > ul > li > div {
font-size: 2.5vw;
}
}