/* Variables */ $total_width: 95%; $color_red: #cd1013; $color_background_mobile_menu: #f5f5f5; $color_background_mobile_menu_header: #e0e0e0; $color_hor_line: #a5a5a5; $gap_columns_persons: 25px; /* Mixins */ @mixin menu-style () { font-family: 'Open Sans Condensed', sans-serif; color: black; text-decoration: none; &.active, &:hover { color: $color_red; } } @mixin media-large { @media screen and (min-width: 700px) { @content; } } @mixin mouse-available { @media screen and (pointer: fine) { @content; } } /* main styling */ body { padding: 0px; margin: 0px; background-color: #ececec; font: 90% 'Open Sans', sans-serif; height: 100vh; } h1, h2, h3, h4, h5, h6 { color: $color_red; font-family: 'Droid Serif',serif; font-weight: normal; } h1 { font-size: 233%; margin-top: 0; } #wrapper { width: 100%; min-height: 100.5vh; max-width: 1280px; margin: auto; background-color: #fcfcfc; overflow: auto; #header { border-bottom: 2px solid rgba(173,173,173,.5); margin: 0 auto 30px; width: 100%; > .logo-row { display: flex; justify-content: space-between; width: 100%; .logo { margin: 15px 30px 10px 30px; img { max-width: 100%; } } .logo-vfl { margin: 12px 45px 0 0; img { max-width: 100%; } } } > .slider { width: calc(100% - 60px); // visibility: hidden; // height: 250px; display: none; @include media-large() { display: flex; } padding: 0 10px; border-right: 20px solid $color_red; border-left: 20px solid $color_red; position: relative; > img { width: calc(100% - 20px); // display: block; position: absolute; z-index: 0; opacity: 1; transition: opacity 2.5s ease-in-out; &.hidden { opacity: 0; } &.placeholder { position: static; visibility: hidden; width: 100%; } } .dots { position: absolute; width: 95%; z-index: 1; left: 0; bottom: 10%; display: flex; justify-content: end; .dot { width: 10px; height: 10px; margin: 0 10px 0 0; border-radius: 5px; background-color: #eee; border: 1.5px solid #444; &.active { background-color: #444; border: 1.5px solid #ccc; } } } } > .nav { width: $total_width; height: 30px; margin: 5px auto 0; font: 1.5em 'Open Sans Condensed', sans-serif; display: none; @include media-large() { display: block; } nav { display: flex; height: 100%; justify-content: flex-start; align-items: center; a { margin: 0 40px 0 0; // height: 100%; @include menu-style; } } } } .main { width: $total_width; display: flex; margin: auto; > .left-side { flex: auto 0 0; flex-direction: column; margin-right: 40px; display: none; @include media-large() { display: flex; } .announcements { margin-top: 20px; background-color: #ececec; .entry { margin: 25px 0; padding: 0 15px; &:first-child { margin-top: 15px; } &:last-child { margin-bottom: 15px; } .time { font-weight: bold; } a { color: black; } } } } .left-menu { width: 180px; display: flex; flex-direction: column; > a { text-decoration: none; display: block; height: 35px; margin: 2px 0; display: flex; flex-direction: column; justify-content: center; padding: 0px 15px; font: 1.5em 'Open Sans Condensed', sans-serif; color: black; background-color: #ececec; &.active, &:hover { background-color: $color_red; color: white; } } } #content { flex: 100% 0 1; text-align: justify; max-width: 100%; table { width: 100%; border-collapse: collapse; td, th { padding: 5px; border: none; } tr { background-color: #dedede; &:nth-of-type(2n) { background-color: #f7f7f7; } } thead > tr { background-color: $color_red; color: white; text-align: left; } } .float-right { float: right; margin: 7px 0 7px 15px; } a { color: black; &[href^=http] , &.download { &::before { margin: 0 5px 0 0; top: 3px; position: relative; content: url('img/download.png'); } } } img { max-width: 100%; } h1, h2 h3, h4, h5, h6 { text-align: left; } .to-top { margin: 45px 0 0; } .disclaimer { font-size: 75%; } } } #footer { width: 95%; margin: 30px auto 0; padding: 4px 10px 0; display: flex; justify-content: space-between; border-top: 1px solid $color_hor_line; .first-entry { font: 1em 'Open Sans Condensed', sans-serif; } .facebook { width: 20px; height: 20px; display: block; background-image: url("img/facebook.jpg"); } .meta-menu { max-width: 70%; > ul { padding: 0; margin: 0; display: flex; flex-wrap: wrap; font: 1.4em 'Open Sans Condensed', sans-serif; > li { list-style: none; margin-left: 1em; a { @include menu-style(); } } } } } } #overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; z-index: 10; &.hidden { display: none; } .background { width: 100%; height: 100%; position: absolute; z-index: -10; background-color: lightgrey; opacity: 50%; } .spacer { flex: auto 1 0; } .dialog-column { flex: 0 1 1; display: flex; flex-direction: column; justify-content: center; .dialog { background-color: white; padding: 10px; flex: 30% 0 0; // height: 30%; img { max-width: 100%; } } } } .person-list { display: flex; flex-wrap: wrap; gap: $gap_columns_persons; margin: 0 0 $gap_columns_persons; } .person { width: 100%; @include media-large() { width: calc(50% - #{$gap_columns_persons} / 2); } height: 80px; // margin: 10px 25px 10px 0; display: flex; > .image { flex: 60px 0 0; img { width: 100%; } } > .content { flex: 1px 1 0; margin-left: 10px; } > .content-vorstand { display: flex; flex-direction: column; justify-content: space-evenly; > .role { font-weight: bold; } > .name { img { margin: 0 10px 0 0; } } } } .news-blog { max-width: 100%; .blog-entry { max-width: 100%; .header { max-width: 100%; margin: 5px 0 10px; text-align: left; a { font-size: larger; } } .details { display: flex; // min-height: 240px; margin-right: 2px; flex-direction: column; @include media-large(){ flex-direction: row; } .teaser-image { flex: 33% 1 0; img { width: 90%; height: 190px; object-fit: contain; object-position: left top; } } .right-side { flex: 66% 1 1; display: flex; flex-direction: column; .intro { padding-right: 40px; } .more { // float: right; margin-top: 20px; text-align: right; } } } } .pagination { display: flex; list-style: none; padding: 0; max-width: 400px; margin: auto; .page-item { flex: auto 1 0; margin: 5px; .page-link { display: block; text-align: center; width: 100%; height: 100%; padding: 5px 0; } } .disabled { visibility: hidden; } } } .mobile-menu { display: flex; flex-wrap: wrap; width: 100%; margin: 30px 0; padding: 30px 5% 0 5%; box-sizing: border-box; @include media-large() { display: none; } border-top: 1px solid $color_hor_line; .level-1 { width: 100%; a { background-color: $color_background_mobile_menu_header; } } .level-2 { width: 50%; a { background-color: $color_background_mobile_menu; } } .level-1, .level-2 { display: flex; padding: 3px; box-sizing: border-box; a { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; @include menu-style(); &.active { color: white; background-color: $color_red; } } } } .mobile-menu-link { display: block; border: 1px solid black; width: max-content; padding: 5px 75px 5px 15px; margin: 5px 0 5px 20px; @include menu-style(); @include media-large() { display: none; } } .announcement-list { .entry { margin: 0 30px; .time { font-weight: bold; margin-right: 10px; } } } .tsc-image { margin: 0 auto; width: fit-content; } .tsc-gallery { display: grid; align-items: center; justify-items: center; grid-template-columns: 1fr; @include media-large() { &.cols-2 { grid-template-columns: 1fr 1fr; } &.cols-3 { grid-template-columns: 1fr 1fr 1fr; } &.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } } .tsc-gallery-img { margin: 5px 0; } } .youtube-video { max-width: 100%; } .internal-video { max-width: 100%; } :root { --color-vhvorne: #ddcb55; --color-vhmitte: #c98879; --color-vhhinten: #0082c9; } .calendar-color-legend { display: flex; flex-direction: row; margin: 10px; .vorne { background-color: var(--color-vhvorne); } .mitte { background-color: var(--color-vhmitte); } .hinten { background-color: var(--color-vhhinten); color: white; } .vorne, .mitte, .hinten { margin-right: 20px; padding: 5px 10px; } } .archive-short-links { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0; li { display: block; padding: 5px; } } .archive-year-list { display: flex; margin: 5px 0; align-items: baseline; @include mouse-available() { margin: 0; } .date { font-weight: bold; // height: 100%; } .title { margin: 0 0 0 10px; text-align: left; a { display: block; padding: 6.5px 0; @include mouse-available() { padding: 3px 0; } } } } @font-face{ font-family: 'Open Sans Condensed'; font-style: normal; font-weight: 400; src: url("ttf/OpenSans_Condensed-Light.ttf") format('truetype'); } @font-face{ font-family: 'Droid Serif'; font-style: normal; font-weight: normal; src: url('ttf/DroidSerif.ttf') format('truetype') }