First fixes in SCSS file to fix some issues

.stylelintrc.json

@@ -1,5 +1,9 @@
 {
     "extends": [
         "stylelint-config-standard-scss"
-    ]
+    ],
+    "rules": {
+        "media-feature-range-notation": "prefix",
+        "color-function-notation": "legacy"
+    }
 }

themes/tsc_vfl/assets/css/main.scss

@@ -1,23 +1,21 @@
 /* Variables */
-$total_width: 95%;
+$total-width: 95%;
-
+$color-red: #cd1013;
-$color_red: #cd1013;
+$color-background-mobile-menu: #f5f5f5;
-$color_background_mobile_menu: #f5f5f5;
+$color-background-mobile-menu-header: #e0e0e0;
-$color_background_mobile_menu_header: #e0e0e0;
+$color-hor-line: #a5a5a5;
-$color_hor_line: #a5a5a5;
+$gap-columns-persons: 25px;
-
-$gap_columns_persons: 25px;
 
 
 /* Mixins */
 
-@mixin menu-style () {
+@mixin menu-style() {
     font-family: 'Open Sans Condensed', sans-serif;
     color: black;
     text-decoration: none;
 
     &.active, &:hover {
-        color: $color_red;
+        color: $color-red;
     }
 }
 
@@ -36,15 +34,15 @@ $gap_columns_persons: 25px;
 /* main styling */
 
 body {
-    padding: 0px;
+    padding: 0;
-    margin: 0px;
+    margin: 0;
     background-color: #ececec;
     font: 90% 'Open Sans', sans-serif;
     height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: $color_red;
+    color: $color-red;
     font-family: 'Droid Serif',serif;
     font-weight: normal;
 }
@@ -62,8 +60,143 @@ h1 {
     background-color: #fcfcfc;
     overflow: auto;
 
-    #header {
+    
-        border-bottom: 2px solid rgba(173,173,173,.5);
+    .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;
+                height: 35px;
+                margin: 2px 0;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 0 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%;
+            hyphens: auto;
+
+            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%;
+            }
+        }
+    }
+ 
+}
+
+#header {
+    border-bottom: 2px solid rgba(173, 173, 173, 50%);
     margin: 0 auto 30px;
     width: 100%;
     
@@ -73,13 +206,16 @@ h1 {
         width: 100%;
 
         .logo {
-                margin: 15px 30px 10px 30px;
+            margin: 15px 30px 10px;
+
             img {
                 max-width: 100%;
             }
         }
+
         .logo-vfl {
             margin: 12px 45px 0 0;
+
             img {
                 max-width: 100%;
             }
@@ -88,20 +224,23 @@ h1 {
 
     > .slider {
         width: calc(100% - 60px);
+
         // visibility: hidden;
         // height: 250px;
         display: none;
 
-            @include media-large() {
+        @include media-large {
             display: flex;
         }
+
         padding: 0 10px;
-            border-right: 20px solid $color_red;
+        border-right: 20px solid $color-red;
-            border-left: 20px solid $color_red;
+        border-left: 20px solid $color-red;
         position: relative;
 
         > img {
             width: calc(100% - 20px);
+
             // display: block;
             position: absolute;
             z-index: 0;
@@ -136,7 +275,6 @@ h1 {
                 height: 10px;
                 margin: 0 10px 0 0;
                 border-radius: 5px;
-
                 background-color: #eee;
                 border: 1.5px solid #444;
 
@@ -149,13 +287,13 @@ h1 {
     }
 
     > .nav {
-            width: $total_width;
+        width: $total-width;
         height: 30px;
         margin: 5px auto 0;
         font: 1.5em 'Open Sans Condensed', sans-serif;
-
         display: none;
-            @include media-large() {
+
+        @include media-large {
             display: block;
         }
 
@@ -167,150 +305,22 @@ h1 {
 
             a {
                 margin: 0 40px 0 0;
+
                 // height: 100%;
                 @include menu-style;
             }
         }
     }
-    }
+}
 
-    .main {
-        width: $total_width;
-        display: flex;
-        margin: auto;
 
-        > .left-side {
+#footer {
-            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%;
-            hyphens: auto;
-
-            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;
+    border-top: 1px solid $color-hor-line;
 
     .first-entry {
         font: 1em 'Open Sans Condensed', sans-serif;
@@ -325,13 +335,12 @@ h1 {
 
     .meta-menu {
         max-width: 70%;
+
         > ul {
             padding: 0;
             margin: 0;
-
             display: flex;
             flex-wrap: wrap;
-
             font: 1.4em 'Open Sans Condensed', sans-serif;
 
             > li {
@@ -339,8 +348,7 @@ h1 {
                 margin-left: 1em;
 
                 a  {
-                        @include menu-style();
+                    @include menu-style;
-                    }
                 }
             }
         }
@@ -366,22 +374,24 @@ h1 {
         position: absolute;
         z-index: -10;
         background-color: lightgrey;
-        opacity: 50%;
+        opacity: 0.5;
     }
 
     .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 {
@@ -394,29 +404,35 @@ h1 {
 .person-list {
     display: flex;
     flex-wrap: wrap;
-    gap: $gap_columns_persons;
+    gap: $gap-columns-persons;
-    margin: 0 0 $gap_columns_persons;
+    margin: 0 0 $gap-columns-persons;
 }
 
 .person {
     width: 100%;
-    @include media-large() {
+
-        width: calc(50% - #{$gap_columns_persons} / 2);
+    @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;
@@ -425,6 +441,7 @@ h1 {
         > .role {
             font-weight: bold;
         }
+
         > .name {
             img {
                 margin: 0 10px 0 0;
@@ -435,22 +452,28 @@ h1 {
 
 .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(){
+
+            @include media-large{
                 flex-direction: row;
             }
 
@@ -464,6 +487,7 @@ h1 {
                     object-position: left top;
                 }
             }
+
             .right-side {
                 flex: 66% 1 1;
                 display: flex;
@@ -472,6 +496,7 @@ h1 {
                 .intro {
                     padding-right: 40px;
                 }
+
                 .more {
                     // float: right;
                     margin-top: 20px;
@@ -489,9 +514,11 @@ h1 {
         padding: 0;
         max-width: 400px;
         margin: auto;
+
         .page-item {
             flex: auto 1 0;
             margin: 5px;
+
             .page-link {
                 display: block;
                 text-align: center;
@@ -512,30 +539,32 @@ h1 {
     flex-wrap: wrap;
     width: 100%;
     margin: 30px 0;
-    padding: 30px 5% 0 5%;
+    padding: 30px 5% 0;
     box-sizing: border-box;
 
-    @include media-large() {
+    @include media-large {
         display: none;
     }
 
-    border-top: 1px solid $color_hor_line;
+    border-top: 1px solid $color-hor-line;
 
     
     .level-1 {
         width: 100%;
 
         a {
-            background-color: $color_background_mobile_menu_header;
+            background-color: $color-background-mobile-menu-header;
         }
     }
+
     .level-2 {
         width: 50%;
 
         a {
-            background-color: $color_background_mobile_menu;
+            background-color: $color-background-mobile-menu;
         }
     }
+
     .level-1, .level-2 {
         display: flex;
         padding: 3px;
@@ -546,11 +575,12 @@ h1 {
             height: 100%;
             padding: 5px;
             box-sizing: border-box;
-            @include menu-style();
+
+            @include menu-style;
 
             &.active {
                 color: white;
-                background-color: $color_red;
+                background-color: $color-red;
             }
         }
     }
@@ -562,9 +592,10 @@ h1 {
     width: max-content;
     padding: 5px 75px 5px 15px;
     margin: 5px 0 5px 20px;
-    @include menu-style();
 
-    @include media-large() {
+    @include menu-style;
+
+    @include media-large {
         display: none;
     }
 }
@@ -572,6 +603,7 @@ h1 {
 .announcement-list {
     .entry {
         margin: 0 30px;
+
         .time {
             font-weight: bold;
             margin-right: 10px;
@@ -586,18 +618,18 @@ h1 {
 
 .tsc-gallery {
     display: grid;
-    align-items: center;
+    place-items: center center;
-    justify-items: center;
-    
     grid-template-columns: 1fr;
 
-    @include media-large() {
+    @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;
         }
@@ -621,16 +653,18 @@ h1 {
         max-width: 70%;
     }
 
-    @include media-large() {
+    @include media-large {
         display: flex;
         align-items: start;
 
         .image {
             flex: 50% 0 1;
         }
+
         .address {
             margin-left: 10px;
         }
+
         p {
             margin: 0;
         }
@@ -651,13 +685,16 @@ h1 {
     .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;
@@ -666,8 +703,7 @@ h1 {
 
 .archive-short-links {
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
-    flex-wrap: wrap;
     padding: 0;
 
     li {
@@ -681,14 +717,16 @@ h1 {
     margin: 5px 0;
     align-items: baseline;
 
-    @include mouse-available() {
+    @include mouse-available {
         margin: 0;
     }
 
     .date {
         font-weight: bold;
+
         // height: 100%;
     }
+
     .title {
         margin: 0 0 0 10px;
         text-align: left;
@@ -697,7 +735,7 @@ h1 {
             display: block;
             padding: 6.5px 0;
 
-            @include mouse-available() {
+            @include mouse-available {
                 padding: 3px 0;
             }
         }
@@ -708,6 +746,7 @@ table.time {
     // width: 100%;
     display: flex;
     flex-direction: column;
+
     tr {
         display: flex;
         flex-direction: column;
@@ -718,6 +757,7 @@ table.time {
         }
         
     }
+
     tr:first-child {
         display: none;
     }
@@ -726,6 +766,7 @@ table.time {
         td:nth-child(3)::before {
             content: "Uhrzeit: ";
         }
+
         td:nth-child(4)::before {
             content: "Ort: ";
         }
@@ -735,9 +776,11 @@ table.time {
         td:nth-child(2)::before {
             content: "Jahrgang: ";
         }
+
         td:nth-child(4)::before {
             content: "Uhrzeit: ";
         }
+
         td:nth-child(5)::before {
             content: "Ort: ";
         }
@@ -757,6 +800,7 @@ table.time {
     font-weight: 400;
     src: url("ttf/OpenSans_Condensed-Light.ttf")  format('truetype');
 } 
+
 @font-face{ 
     font-family: 'Droid Serif';
     font-style: normal;