Create fixup version 0.0.10

This needs modifiaction of the backend configuration

Makefile

@@ -13,9 +13,30 @@ all: package
 
 package: $(PACKAGES)
 
+.PHONY: npm
+npm:
+	cd slt; npm i
+	cd slt; npm run sass
+
 .PHONY: slt.tar.gz
-slt.tar.gz:
-	cd slt ; tar czf ../$@ *
+slt.tar.gz: npm slt/templateDetails.xml
+	# cd slt ; tar czf ../$@ *
+	tar czf $@ -C slt \
+		css/dynamic-styles.css.php css/index.html css/style.css css/.htaccess \
+		html \
+		images \
+		js \
+		language \
+		favicon.ico \
+		index.html \
+		index.php \
+		template_preview.png \
+		template_thumbnail.png \
+		templateDetails.xml
+
+.PHONY: slt/templateDetails.xml
+slt/templateDetails.xml:
+	./scripts/create-details-xml.sh
 
 .PHONY: release
 release: slt.tar.gz

res/templateDetails.tmpl.xml

@@ -1,68 +1,43 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> 
-<!-- MUSS Seit Joomla 1.6 ist der Installer universell. Also wichtig, version="2.5" type="template" client="site" angeben -->
 <extension
     version="3.0"
     method="upgrade"
     type="template"
     client="site"> 
-  <!-- SOLLTE, Der Annzeige-Name in Joomla -->
   <name>SLT</name>
-  <title>SLT</title>
-  <!--SOLLTE Erstellungsdatum -->
-  <creationDate>25.03.2019</creationDate>
-  <!-- SOLLTE, Wer ist der Urheber -->
+  <title>Template des Saarländischen Landesverbands für Tanzsport e.V.</title>
+  <creationDate>${DATE}</creationDate>
+  <version>${VERSION}</version>
   <author>Christian Wolf</author>
-  <!-- SOLLTE, für ausgelieferte Templates immer eine Kontakt-E-Mail-Adressse -->
   <authorEmail>homepage@slt.wolf-stuttgart.net</authorEmail>
-  <!-- SOLLTE, klar, die Webseite gehört dazu -->
-  <!--<authorUrl>http://www.joomla-templates.de</authorUrl>-->
-  <!-- SOLLTE, die eigene Versionsnummer des Templates -->
-  <version>0.0.3</version>
+  <authorUrl>https://git.christian-wolf.click/slt/template</authorUrl>
   <!-- SOLLTE, Die Template-Beschreibung wird hier als Joomla language mit einem Platzhalter versehen. In diesem Template-Ordner befindet sich die Sprachdatei in der TPL_TEST_TEMPLATE_XML_DESCRIPTION hinterlegt ist -->
   <!--<description>TPL_TEST_TEMPLATE_XML_DESCRIPTION</description>-->
-  <!-- MUSS, der Files-Tag bezeichnet den Block mit den Dateien und Ordnern die mit installiert werden -->
   <files> 
-    <!-- Der Folder-Tag weist Joomla an, den Ordner bspw. html samt dem Inhalt im Template-Ordner zu Speichern -->
-    <!--<folder>html</folder>-->
     <folder>css</folder>
     <folder>images</folder>
     <folder>language</folder>
     <folder>js</folder>
     <folder>html</folder>
-    <!-- MUSS, die Hauptdatei für die Ausgabe des Templates -->
     <filename>index.php</filename>
-    <!-- MUSS, jeder Ordner in Joomla ist mit einer Dummy-Html ausgestattet, so werden Server Fehlermeldungen verhindert, falls sich doch ein Webseitenbesucher in ein Verzeichnis verirrt -->
     <filename>index.html</filename>
-    <!-- SOLLTE, das Browser-Tab icon macht sich immer gut -->
-    <!--<filename>favicon.ico</filename>-->
-    <!-- MUSS, diese Datei muss natürlich mit installiert werden -->
+    <filename>favicon.ico</filename>
     <filename>templateDetails.xml</filename>
-    <!--SOLLTE, im Joomla Backend in der Template-Verwaltung wird dieses Bild vom Layout angezeigt. Am besten einen Screenshot der Webseiten Vorlage einfügen oder wenn die Seite fertig ist ein Browser-Screeensho -->
-    <!--<filename>template_thumbnail.png</filename>-->
+    <filename>template_preview.png</filename>
+    <filename>template_thumbnail.png</filename>
     <!-- SOLLTE, in dieser Datei kann eine individuelle Fehlerseite erstellt werden (404) -->
     <!--<filename>error.php</filename>-->
   </files>
-  <!-- MUSS, das sind letztendlich die Positionen an die die Module geschickt werden-->
   <positions>
-    <!--<position>meine-topposition</position>
-    <position>linke-position</position>
-    <position>brotkrumen</position>
-    <position>zu-guter-letzt</position>
-    <position>so-soll-die-positon-heissen</position>
-    <position>neuigkeiten</position>-->
-    <!-- <position>ich-kann-später-noch-weitere-positionen-einfügen</position> -->
-    
     <position>topmenu</position>
     <position>slideshow</position>
     <position>mobile_menu</position>
     <position>left_menu</position>
-    <!--<position>right_column</position>-->
     <position>footline</position>
     <position>impressum</position>
     <position>footer</position>
-    <!--<position></position>-->
-    
+    <position>current_page_menu</position>
   </positions>
   <!--Sollte, Sollten unterschiedliche Sprachen genutzt werden, ist hier der richtige Platz um diese zu installieren-->
   <!--<languages folder="language">

scripts/create-details-xml.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+MAJOR=`cat serial/major`
+MINOR=`cat serial/minor`
+RELEASE=`cat serial/release`
+
+export DATE=`date '+%Y-%m-%d'`
+export VERSION="$MAJOR.$MINOR.$RELEASE"
+
+cat res/templateDetails.tmpl.xml | envsubst > slt/templateDetails.xml

scripts/create-update-xml.sh

@@ -4,7 +4,7 @@
 
 cat res/prefix.template > slt-update.xml
 
-find releases -name slt-\* | while read f
+find releases -name slt-\* | sort -V | while read f
 do
 	
 	VSTR=`echo "$f" | sed -E 's@releases/slt-@@; s@^([0-9]+\.[0-9]+\.[0-9]+).*$@\1@'`

serial/release

@@ -1 +1 @@
-3
+10

slt/.gitignore

@@ -0,0 +1,3 @@
+/node_modules/
+/.stylelintcache
+/templateDetails.xml

slt/.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+    "extends": "stylelint-config-standard-scss",
+    "plugins": [
+        "stylelint-order",
+        "stylelint-scss"
+    ],
+    "rules": {
+        "indentation": 4
+    }
+  }

slt/css/.gitignore

@@ -0,0 +1,2 @@
+/style.css
+*.css.map

slt/css/.htaccess

@@ -0,0 +1,24 @@
+<IfModule mod_headers.c>
+
+# Caching
+
+# 2 Stunden für Textdateien
+<FilesMatch "\.(css|css\.map)$">
+Header set Cache-Control "public, max-age=3600, must-revalidate"
+</FilesMatch>
+
+</IfModule> 
+
+<IfModule mod_expires.c>
+
+# Expires-Header aktivieren
+  ExpiresActive On
+
+# Typunabhängige Standard-Ablaufzeit setzen
+  ExpiresDefault "access plus 1 hour"
+
+# Typabhängige Ablaufzeit für JPEG-Dateien (jpeg, jpg, jpe)
+#  ExpiresByType image/jpeg "access plus 1 year"
+
+# Weitere Dateitypen...
+</IfModule>

slt/css/abstract/_colors.scss

@@ -0,0 +1,15 @@
+$color-lehre: #d9c254;
+$color-breitensport: #a6d400;
+$color-jugend: #04b;
+$color-jmd: #e95d00;
+$color-fachverbaende: #eec008;
+$color-sport: #bc0023;
+
+:root {
+    --color-lehre: #{$color-lehre};
+    --color-breitensport: #{$color-breitensport};
+    --color-jugend: #{$color-jugend};
+    --color-jmd: #{$color-jmd};
+    --color-fachverbaende: #{$color-fachverbaende};
+    --color-sport: #{$color-sport};
+}

slt/css/abstract/_index.scss

@@ -0,0 +1,2 @@
+@forward "responsive";
+@forward "colors";

slt/css/abstract/_responsive.scss

@@ -0,0 +1,13 @@
+// Some Mixins for various screen sizes
+
+@mixin for-desktop {
+    @media screen and (min-width: 1000px) {
+        @content;
+    }
+}
+
+@mixin for-wide-desktop {
+    @media screen and (min-width: 1200px) {
+        @content;
+    }
+}

slt/css/components/_article.scss

@@ -0,0 +1,28 @@
+@use "../abstract" as abstract;
+
+.article-info {
+    font-size: smaller;
+    clear: both;
+}
+
+@include abstract.for-desktop {
+    .btn {
+        border-radius: 0;
+    }
+
+    p.readmore {
+        text-align: right;
+        font-size: smaller;
+
+        > .btn {
+            font-size: inherit;
+            background-image: none;
+            border: none;
+            text-shadow: unset;
+
+            > span[class^="icon-"] {
+                display: none;
+            }
+        }
+    }
+}

slt/css/components/_current-page-manu.scss

@@ -0,0 +1,25 @@
+#left-menu .current-page-menu ul.menu {
+    background-color: transparent;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+
+    &:hover {
+        box-shadow: unset;
+    }
+
+    > li {
+        border-style: none;
+        display: none;
+
+        &.active {
+            display: block;
+            border-style: none;
+
+            > a {
+                background-color: transparent;
+                font-weight: bold;
+            }
+        }
+    }
+}

slt/css/components/_index.scss

@@ -0,0 +1,3 @@
+@use "slideshow";
+@use "article";
+@use "current-page-manu";

slt/css/components/_slideshow.scss

@@ -0,0 +1,10 @@
+@use "../abstract" as abstract;
+
+#slideshow {
+    flex: 1;
+    display: none;
+
+    @include abstract.for-desktop {
+        display: inline-block;
+    }
+}

slt/css/core/_core.scss

@@ -0,0 +1,48 @@
+@use "../abstract" as abstract;
+
+body {
+    margin: 0;
+    min-height: 100.1vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /*    padding: 0px 20px 10px 20px; */
+    padding: 0;
+    font-size: 12pt;
+    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
+    line-height: 175%;
+
+    @include abstract.for-desktop {
+        overflow: scroll;
+        padding: 0;
+    }
+}
+
+a {
+    text-decoration: none;
+}
+
+p {
+    text-align: justify;
+    hyphens: auto;
+}
+
+h3 {
+    font-size: 133% /*16pt*/;
+}
+
+h2 {
+    font-size: 158% /*19pt*/;
+}
+
+h1 {
+    font-size: 183% /*22pt*/;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    line-height: 150%;
+}

slt/css/core/_default-classes.scss

@@ -0,0 +1,32 @@
+.pull-right > img,
+.pull-left > img,
+.pull-right > a > img,
+.pull-left > a > img {
+    margin: 10px;
+}
+
+.centered {
+    text-align: center;
+}
+
+.ragged-left {
+    text-align: left;
+}
+
+li.row-fluid {
+    display: block;
+}
+
+.page-header {
+    padding-bottom: 0;
+}
+
+.row-striped .row-fluid:nth-child(n),
+.list-striped li:nth-child(n),
+.table-striped tbody > tr:nth-child(n) > td {
+    background-color: inherit;
+}
+
+.well {
+    background-color: inherit;
+}

slt/css/core/_index.scss

@@ -0,0 +1,2 @@
+@use "core";
+@use "default-classes";

slt/css/desktop-narrow.css

@@ -1,3 +0,0 @@
-#topmenu .nav > li > a {
-  font-size: large;
-}

slt/css/desktop.css

@@ -1,335 +0,0 @@
-
-/*
-Structure of page
-*/
-
-#topmenu-div {
-}
-
-#topmenu
-{
-  position: fixed;
-  display: flex;
-}
-
-#topmenu > .topmenu-sep
-{
-	display: inline-block;
-	flex: 1 1 auto;
-}
-
-#topmenu .nav 
-{
-  flex: 0 0 auto;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  position: relative;
-  align-items: center;
-}
-
-#topmenu .nav > li 
-{
-  display: inline-block;
-}
-
-#topmenu .nav > li > a 
-{
-  position: relative;
-}
-
-#topmenu .nav > li > .nav-child {
-  position: absolute;
-  display: none;
-}
-
-#topmenu .nav > li:hover > .nav-child {
-  display: block;
-}
-
-#topmenu .nav > li > .nav-child > li > a {
-  display: block;
-}
-
-#page-div
-{
-	display: flex;
-	flex-flow: row;
-	width: 100%;
-	justify-content: space-around;
-}
-
-#page 
-{
-	flex: 0 0 auto;
-}
-
-#page-bg
-{
-	display: block;
-	position: fixed;
-}
-
-#header {
-    justify-content: space-around;
-}
-
-#slideshow {
-  display: inline-block;
-}
-
-#content {
-  display: flex;
-}
-
-#left_menu {
-  flex: 0 1 20%;
-  display: block;
-}
-
-.nav-child > li > a {
-	display: block;
-}
-
-#main_column {
-  flex: 1 1 60%;
-  display: flex;
-  flex-flow: column nowrap;
-}
-
-#main_content{
-  flex: 1 1 auto;
-}
-
-#footline {
-  flex: none;
-}
-
-#right_column {
-  flex: 1 1 15%;
-  display: block;
-}
-
-#mobile_menu,
-#mobile_menu.visible,
-#mobile_menu_switch
-{
-  display: none;
-}
-
-a.facebook img
-{
-	display: inline;
-}
-a.facebook > span.image-title
-{
-	display: none;
-}
-
-
-
-/*
-Form of page (paddings, margins, ...)
-*/
-
-body
-{
-  overflow: scroll;
-  padding: 0px;	
-}
-
-#topmenu-div {
-  width: 100vw;
-  height: 40px;
-}
-
-#topmenu {
-  width: 100vw;
-  z-index: 5000;
-}
-
-#topmenu .nav {
-  padding: 0px 10px;
-  margin: 0px;
-  height: 40px;
-  width: 980px;
-}
-
-#topmenu .nav > li > a {
-  font-size: large;
-  padding: 10px;
-  z-index: 3001;
-}
-
-#topmenu .nav > li > .nav-child {
-  z-index: 3000;
-  margin: 0px 20px 10px 0px;
-  border: none;
-  padding: 0px;
-}
-
-#topmenu .nav > li:hover > .nav-child {
-  box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
-}
-
-#topmenu .nav > li > .nav-child > li
-{
-	padding: 0px 5px;
-}
-
-#topmenu .nav > li > .nav-child > li > a {
-  padding: 10px 5px 10px 4px;
-  border-left-color: transparent;
-  border-left-style: solid;
-  border-left-width: 6px;
-}
-
-#page-div, #page
-{
-	min-height: calc( 100vh - 40px );
-}
-
-#page {
-  width: 1000px;
-}
-
-#page-bg
-{
-	width: 1000px;
-	height: calc( 100% - 40px );
-	bottom: 0px;
-	z-index: -9;
-	left: calc( (100% - 1000px) / 2 );
-}
-
-#left_side-image, #right_side-image
-{
-	position: fixed;
-	height: 100vh;
-	width: calc( (100% - 980px) / 2 );
-	z-index: -10;
-}
-
-#left_side-image
-{
-	left: 0px;
-}
-
-#right_side-image
-{
-	right: 0px;
-}
-
-#left_menu
-{
-	margin: 15px 0px 15px 5px;
-}
-
-#left_menu > ul.menu
-{
-	padding: 10px;
-}
-
-#left_menu > ul.menu:hover
-{
-	box-shadow: 3px 5px 5px 2px rgba(0,0,0,0.5);
-}
-
-#left_menu > ul.menu li > a
-{
-	padding: 2px 5px 2px 5px;
-}
-
-#right_column
-{
-	margin: 15px 5px 15px 0px;
-}
-
-
-
-
-/*
-Additional content
-*/
-
-#topmenu a {
-  color: inherit;
-}
-
-#topmenu {
-  font-weight: bold;
-  text-align: center;
-}
-
-#topmenu .nav > li {
-  text-align: left;
-}
-
-#topmenu .nav > li > a {
-  font-size: large;
-}
-
-#topmenu li > a,
-#topmenu li:hover > a,
-#topmenu li:focus > a,
-#topmenu li.active > a
-{
-	background-color: inherit;
-	color: inherit;
-}
-
-#topmenu .nav-child > li:hover > a:hover,
-#topmenu .nav-child > li:focus > a:hover,
-#topmenu .nav-child > li:hover > a:focus
-{
-	text-decoration: none;
-}
-
-#left_side-image, #right_side-image
-{
-	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center center;
-	opacity: 0.5;
-}
-
-#page
-{
-	background-color: inherit;
-}
-
-
-p.readmore
-{
-	text-align: right;
-	font-size: smaller;
-}
-
-.btn
-{
-	border-radius: 0pt;
-}
-
-.readmore > .btn 
-{
-	font-size: inherit;
-	background-image: none;
-	border: none;
-	text-shadow: unset;
-}
-
-p.readmore > .btn > span[class^="icon-"]
-{
-	display: none;
-}
-
-
-/*
- * Debug
- */
-
-/*#right_column,#left_menu,#main_content,#footline {
-    background-color: rgba(0,0,0,0.1);
-}*/
-
-

slt/css/dynamic-styles.css.php

@@ -0,0 +1,188 @@
+<?php
+
+define( '_JEXEC', 1 );
+define('JPATH_BASE', '../../../');
+require_once ( JPATH_BASE .'/includes/defines.php' );
+require_once ( JPATH_BASE .'/includes/framework.php' );
+
+/* Create the Application */
+$mainframe = JFactory::getApplication('site');
+$mainframe->initialise();
+$params = JFactory::getApplication()->getTemplate(true)->params;
+
+header("content-type: text/css");
+
+// duration of cached content (1 hour)
+$offset = 60 * 60 ;
+// cache control to process
+header("Cache-Control: must-revalidate, max-age=$offset, public");
+
+// expiration header format
+// $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
+// send cache expiration header to broswer
+// header($ExpStr);
+
+$leftImageValue  = (empty($params['imgleft']) ? "none" : "url(\"" . JPATH_BASE. "/" . $params['imgleft'] . "\")") ; 
+$rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . JPATH_BASE . "/" . $params['imgright'] . "\")") 
+// $leftImageValue  = (empty($params['imgleft']) ? "none" : "url(\"" . $this->baseurl . "/" . $params['imgleft'] . "\")") ; 
+// $rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . $this->baseurl . "/" . $params['imgright'] . "\")") 
+
+?>
+
+<?php
+if($params['titlepage'] === '1')
+{
+?>
+#left-menu
+{
+	display: none;
+}
+<?php 
+}
+?>
+
+body
+{
+	background-color: <?php echo $params['bgcolorside']; ?>;
+}
+
+a, a:hover, a:active, a:visited
+{
+	color: <?php echo $params['mainlicolor']; ?>;
+}
+
+#page-bg
+{
+	background-image: linear-gradient(to bottom, <?php echo $params['mainbgcolortop'] . ',' . $params['mainbgcolorbot']; ?>);
+	color: <?php echo $params['mainfgcolor']; ?>;
+}
+
+#mobile-menu li > a {
+	background-color: <?php echo $params['bgcolor2']; ?>;
+    color: <?php echo $params['licolor2']; ?>;
+}
+
+#mobile-menu li.current > a {
+	background-color: <?php echo $params['bgcolor3']; ?>;
+    color: <?php echo $params['licolor3']; ?>;
+}
+
+ul.menu {
+	background-color: <?php echo $params['bgcolor1']; ?>;
+	color: <?php echo $params['fgcolor1']; ?>;
+}
+
+#mobile-menu {
+	background-color: <?php echo $params['bgcolor1']; ?>;
+	color: <?php echo $params['fgcolor1']; ?>;
+}
+
+ul.menu li.current > a,
+ul.menu li.current:hover > a
+{
+	background-color: <?php echo $params['bgcolor2']; ?>;
+	color: <?php echo $params['licolor2']; ?>;
+}
+
+ul.nav > li > a:hover,
+ul.nav > li > a:focus,
+ul.nav-child > li > a:hover,
+ul.nav-child > li > a:focus
+{
+	background-color: <?php echo $params['bgcolor3']; ?>;
+	color: <?php echo $params['licolor3']; ?>;
+}
+
+#topmenu,
+#topmenu > ul.menu {
+  background-color: <?php echo $params['topbgcolor1']; ?>;
+  color: <?php echo $params['topfgcolor1']; ?>;
+}
+
+#topmenu .nav-child > li.current
+
+{
+  background-color: <?php echo $params['topbgcolor2']; ?>;
+  color: <?php echo $params['topfgcolor2']; ?>;
+}
+
+#topmenu .nav-child {
+  background-color: <?php echo $params['topbgcolor3']; ?>;
+  color: <?php echo $params['topfgcolor3']; ?>;
+}
+
+#topmenu .nav > li:hover,
+#topmenu .nav > li:focus,
+#topmenu .nav > li.active,
+#topmenu .nav-child > li:hover,
+#topmenu .nav-child > li:focus
+{
+  background-color: <?php echo $params['topbgcolor2']; ?>;
+  color: <?php echo $params['topfgcolor2']; ?>;
+}
+
+#left-side-image
+{
+	background-image: <?php echo $leftImageValue; ?>;
+}
+
+#right-side-image
+{
+	background-image: <?php echo $rightImageValue; ?>;
+}
+
+.list-striped li:nth-child(odd),
+.row-striped .row-fluid:nth-child(odd),
+.table-striped > tbody > tr:nth-child(odd)
+{
+	background-color: <?php echo $params['bgcolor2']; ?>;
+	color: <?php echo $params['fgcolor2']; ?>;
+}
+.row-striped .row-fluid:nth-child(odd) a,
+.table-striped > tbody > tr:nth-child(odd) a
+{
+	color: <?php echo $params['licolor2']; ?>;
+}
+.list-striped li:hover,
+.row-striped .row-fluid:hover,
+.table-striped > tbody > tr:hover
+{
+	background-color: <?php echo $params['bgcolor3']; ?>;
+	color: <?php echo $params['fgcolor3']; ?>;
+}
+.row-striped .row-fluid:hover a,
+.table-striped > tbody > tr:hover a
+{
+	color: <?php echo $params['licolor3']; ?>;
+}
+.table-striped > thead > tr
+{
+	background-color: <?php echo $params['bgcolor3']; ?>;
+	color: <?php echo $params['fgcolor3']; ?>;
+}
+
+table.alternating tr:nth-child(even) {
+	background-color: <?php echo $params['bgcolor2']; ?>;
+	color: <?php echo $params['fgcolor2']; ?>;
+}
+table.alternating tr:nth-child(even) a
+{
+	color: <?php echo $params['licolor2']; ?>;
+}
+table.alternating tr:nth-child(1) {
+	background-color: <?php echo $params['bgcolor3']; ?>;
+	color: <?php echo $params['fgcolor3']; ?>;
+}
+table.alternating tr:nth-child(1) a {
+	color: <?php echo $params['licolor3']; ?>;
+}
+.readmore > .btn
+{
+	color: <?php echo $params['fgcolor1'];?>;
+	background-color: <?php echo $params['bgcolor1']; ?>;
+}
+.readmore > .btn:hover
+{
+	color: <?php echo $params['fgcolor3'];?>;
+	background-color: <?php echo $params['bgcolor3']; ?>;
+}

slt/css/layout/_footer.scss

@@ -0,0 +1,63 @@
+@use "../abstract" as abstract;
+
+#impressum {
+    flex: 0 0 auto;
+    text-align: right;
+    margin-top: 30px;
+    padding: 5px;
+
+    .nav {
+        margin-bottom: 0;
+        background-color: inherit;
+        display: inline-block;
+
+        > li {
+            display: inline-block;
+        }
+    }
+
+    a {
+        text-decoration: underline;
+        padding: 10px;
+    }
+}
+
+#footer {
+    flex: 0 0 auto;
+    background-color: black;
+
+    // color: white;
+    text-align: center;
+    padding: 5px;
+    font-size: x-small;
+    line-height: 100%;
+    color: gray;
+
+    > .customimpressum {
+        float: left;
+    }
+
+    > .customdatenschutz {
+        float: right;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus {
+            color: black;
+            background-color: white;
+            text-decoration: underline;
+        }
+    }
+}
+
+#footline {
+    margin-top: 10px;
+
+    @include abstract.for-desktop {
+        flex: none;
+    }
+}

slt/css/layout/_index.scss

@@ -0,0 +1,9 @@
+@use "page-layout";
+@use "topmenu";
+@use "leftmenu";
+@use "footer";
+@use "mobile-menu";
+@use "menu";
+@use "pageheader";
+@use "side-images";
+@use "main-content";

slt/css/layout/_leftmenu.scss

@@ -0,0 +1,31 @@
+@use "../abstract" as abstract;
+
+#left-menu {
+    display: none;
+
+    @include abstract.for-desktop {
+        flex: 0 1 20%;
+        display: block;
+        margin: 15px 0 15px 5px;
+
+        > ul.menu {
+            padding: 10px;
+
+            li > a {
+                padding: 2px 5px;
+            }
+        }
+    }
+
+    .nav > li,
+    .nav-child > li {
+        padding: 5px 0;
+        border-top-style: solid;
+        border-width: 1px;
+    }
+
+    .nav > li:first-child,
+    .nav-child > li:first-child {
+        border-top-style: none;
+    }
+}

slt/css/layout/_main-content.scss

@@ -0,0 +1,25 @@
+@use "../abstract" as abstract;
+
+#content {
+    flex: 1 0 auto;
+
+    @include abstract.for-desktop {
+        display: flex;
+    }
+}
+
+#main-column {
+    margin: 15px;
+
+    @include abstract.for-desktop {
+        flex: 1 1 60%;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+}
+
+#main-content {
+    @include abstract.for-desktop {
+        flex: 1 1 auto;
+    }
+}

slt/css/layout/_menu.scss

@@ -0,0 +1,45 @@
+@use "../abstract" as abstract;
+
+.nav {
+    font-size: inherit;
+
+    a {
+        color: inherit;
+    }
+}
+
+.nav-child {
+    font-size: small;
+
+    > li > a {
+        @include abstract.for-desktop {
+            display: block;
+        }
+    }
+}
+
+.nav,
+.nav-child {
+    padding: 0;
+
+    > li {
+        display: block;
+
+        > .nav-child {
+            padding-left: 10px;
+            margin-left: 10px;
+
+            /* border-left: solid gray 1px; */
+
+            /* TODO */
+        }
+    }
+}
+
+ul.nav > li > a:hover,
+ul.nav-child > li > a:hover {
+    /* background-color: inherit; */
+
+    /* FIXME */
+    text-decoration: none;
+}

slt/css/layout/_mobile-menu.scss

@@ -0,0 +1,77 @@
+@use "../abstract" as abstract;
+
+#mobile-menu,
+#content {
+    margin: 0 15px;
+}
+
+#mobile-menu {
+    margin-top: 10px;
+    display: none;
+
+    &.visible {
+        display: block;
+
+        @include abstract.for-desktop {
+            display: none;
+        }
+    }
+
+    a {
+        font-size: initial;
+        margin-right: 0;
+        padding-right: 0;
+    }
+
+    li > a {
+        margin: 5px 0;
+        padding: 10px 5px;
+        display: block;
+        flex: 0;
+    }
+
+    .nav {
+        padding: 0;
+        border: none;
+        margin-left: 0;
+    }
+
+    li {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
+    .nav-child > li {
+        margin: 0;
+    }
+
+    li > ul.nav {
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+
+    li ul {
+        border: none;
+    }
+
+    > ul.menu {
+        background-color: initial;
+        color: initial;
+        margin-bottom: initial;
+    }
+}
+
+#mobile-menu-switch {
+    flex: 0 0 auto;
+    text-align: right;
+
+    @include abstract.for-desktop {
+        display: none;
+    }
+}
+
+#btn-mobile-menu {
+    padding: 10px 30px 0 0;
+    width: 40px;
+    box-sizing: initial;
+}

slt/css/layout/_page-layout.scss

@@ -0,0 +1,49 @@
+@use "../abstract" as abstract;
+
+#page-div {
+    width: 100%;
+
+    @include abstract.for-desktop {
+        display: flex;
+        flex-flow: row;
+
+        // width: 100%;
+        justify-content: space-around;
+    }
+}
+
+#page {
+    /* box-shadow: 30vw 0px 5vw -10vw green inset; */
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+
+    @include abstract.for-desktop {
+        flex: 0 0 auto;
+        width: 1000px;
+        background-color: inherit;
+    }
+}
+
+#page,
+#page-div {
+    @include abstract.for-desktop {
+        min-height: calc(100vh - 40px);
+    }
+}
+
+#page-bg {
+    display: none;
+
+    @include abstract.for-desktop {
+        display: block;
+        position: fixed;
+        width: 1000px;
+        height: calc(100% - 40px);
+        bottom: 0;
+        z-index: -9;
+        left: calc((100% - 1000px) / 2);
+    }
+}

slt/css/layout/_pageheader.scss

@@ -0,0 +1,17 @@
+@use "../abstract" as abstract;
+
+#header {
+    flex: 0 0 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    @include abstract.for-desktop {
+        justify-content: space-around;
+    }
+
+    > div {
+        margin: 20px;
+        align-items: center;
+    }
+}

slt/css/layout/_side-images.scss

@@ -0,0 +1,23 @@
+@use "../abstract" as abstract;
+
+@include abstract.for-desktop {
+    #left-side-image,
+    #right-side-image {
+        position: fixed;
+        height: 100vh;
+        width: calc((100% - 980px) / 2);
+        z-index: -10;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        opacity: 0.5;
+    }
+
+    #left-side-image {
+        left: 0;
+    }
+
+    #right-side-image {
+        right: 0;
+    }
+}

slt/css/layout/_topmenu.scss

@@ -0,0 +1,183 @@
+@use "../abstract/" as abstract;
+
+#topmenu {
+    display: none;
+    font-weight: bold;
+    text-align: center;
+
+    @include abstract.for-desktop {
+        position: fixed;
+        display: flex;
+        width: 100vw;
+        z-index: 5000;
+        font-weight: bold;
+        text-align: center;
+
+        a {
+            color: inherit;
+        }
+    }
+
+    a {
+        color: inherit;
+    }
+
+    > .topmenu-sep {
+        display: inline-block;
+        flex: 1 1 auto;
+    }
+
+    .nav > li,
+    .nav-child > li {
+        padding: 0;
+        border-style: none;
+    }
+
+    .nav {
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        position: relative;
+        align-items: center;
+
+        @include abstract.for-desktop {
+            padding: 0 10px;
+            margin: 0;
+            height: 40px;
+            width: 980px;
+        }
+
+        > li {
+            display: inline-block;
+            text-align: left;
+
+            @include abstract.for-desktop {
+                text-align: left;
+            }
+
+            > a {
+                position: relative;
+                font-size: large;
+
+                @include abstract.for-desktop {
+                    font-size: large;
+                    padding: 10px;
+                    z-index: 3001;
+                }
+            }
+
+            & > a,
+            &:hover > a {
+                background-color: inherit;
+            }
+
+            > .nav-child {
+                position: absolute;
+                display: none;
+
+                @include abstract.for-desktop {
+                    z-index: 3000;
+                    margin: 0 20px 10px 0;
+                    border: none;
+                    padding: 0;
+                }
+
+                > li {
+                    @include abstract.for-desktop {
+                        padding: 0 5px;
+                    }
+
+                    > a {
+                        display: block;
+
+                        @include abstract.for-desktop {
+                            padding: 10px 5px 10px 4px;
+
+                            // border-left-color: transparent;
+                            // border-left-style: solid;
+                            // border-left-width: 6px;
+                            border-left: 6px solid transparent;
+                        }
+                    }
+
+                    &:hover > a {
+                        text-decoration: none;
+                    }
+                }
+            }
+
+            &:hover > .nav-child {
+                display: block;
+
+                @include abstract.for-desktop {
+                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+                }
+            }
+        }
+    }
+
+    @include abstract.for-desktop {
+        li > a,
+        li:hover > a,
+        li:focus > a,
+        li:active > a {
+            background-color: inherit;
+            color: inherit;
+        }
+
+        .nav-child > li:hover > a:hover,
+        .nav-child > li:focus > a:hover,
+        .nav-child > li:hover > a:focus {
+            text-decoration: none;
+        }
+    }
+
+    // Special colors for topics
+    > ul.nav .nav-child a.lehre {
+        border-left-color: abstract.$color-lehre;
+    }
+
+    > ul.nav .nav-child a.breitensport {
+        border-left-color: abstract.$color-breitensport;
+    }
+
+    > ul.nav .nav-child a.jugend {
+        border-left-color: abstract.$color-jugend;
+    }
+
+    > ul.nav .nav-child a.jmd {
+        border-left-color: abstract.$color-jmd;
+    }
+
+    > ul.nav .nav-child a.fachverbaende {
+        border-left-color: abstract.$color-fachverbaende;
+    }
+
+    > ul.nav .nav-child a.sport {
+        border-left-color: abstract.$color-sport;
+    }
+}
+
+#topmenu-div {
+    @include abstract.for-desktop {
+        width: 100vw;
+        height: 40px;
+    }
+}
+
+a.facebook {
+    img {
+        display: none;
+
+        @include abstract.for-desktop {
+            display: inline;
+        }
+    }
+
+    > span.image-title {
+        @include abstract.for-desktop {
+            display: none;
+        }
+    }
+}

slt/css/main.css

@@ -1,7 +0,0 @@
-
-@import "mobile.css";
-
-@import "desktop.css" ( min-width: 1000px );
-@import "desktop-narrow.css" ( min-width: 1000px) and ( max-width: 1200px );
-
-@import "visual.css";

slt/css/mobile.css

@@ -1,274 +0,0 @@
-body {
-    margin: 0px;
-    min-height: 100.1vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-/*    padding: 0px 20px 10px 20px;*/
-	padding: 0px;
-}
-
-#page-div
-{
-	width: 100%;
-}
-
-#page {
-    /*box-shadow: 30vw 0px 5vw -10vw green inset;*/
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-height: 100vh;
-}
-
-#page-bg
-{
-	display: none;
-}
-
-/*
- * Menu configuration
- */
-
-.nav,
-.nav-child
-{
-    padding: 0px;
-}
-
-.nav > li,
-.nav-child > li
-{
-    display: block;
-}
-
-.nav
-{
-	font-size: inherit;
-}
-
-.nav-child
-{
-	font-size: small;
-}
-
-.nav > li > .nav-child, .nav-child > li > .nav-child {
-    padding-left: 5px;
-    margin-left: 5px;
-    /* border-left: solid gray 1px;*/ /*TODO*/
-}
-
-/*
- * Topmenu positioning and styling
- */
-
-#topmenu {
-	display: none;
-}
-
-/*
- * Header line positioning
- */
-
-#header {
-    flex: 0 0 auto;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-}
-
-#header > div {
-    margin: 20px;
-    align-items: center;
-}
-
-#slideshow {
-    flex: 1;
-}
-
-#slideshow {
-	display: none;
-}
-
-
-/*
- * Content positioning
- */
-
-#content {
-    flex: 1 0 auto;
-}
-
-#left_menu {
-	display: none;
-}
-
-#main_column {
-	margin: 15px;
-}
-
-#right_column {
-	display: none;
-}
-
-#footline {
-	margin-top: 10px;
-}
-
-/*
- * Footer positioning
- */
-
-#impressum
-{
-	flex: 0 0 auto;
-	text-align: right;
-    margin-top: 30px;
-	padding: 5px;
-}
-
-#impressum .nav 
-{
-	margin-bottom: 0px;
-	background-color: inherit;
-	display: inline-block;
-}
-
-#impressum .nav > li
-{
-	display: inline-block;
-}
-
-#impressum a
-{
-	text-decoration: underline;
-	padding: 10px;
-}
-
-#footer {
-    flex: 0 0 auto;
-  	background-color: black;
-    color: white;
-    text-align: center;
-    padding: 5px;
-}
-
-#footer > .customimpressum {
-	float: left;
-}
-
-#footer > .customdatenschutz {
-	float: right;
-}
-
-#footer a
-{
-	color: inherit;
-	text-decoration: underline;
-}
-
-#footer a:hover,
-#footer a:focus
-{
-	color: black;
-	background-color: white;
-	text-decoration: underline;
-}
-
-/*
- * Mobile menu positioning
- */
-
-#mobile_menu, #content {
-	margin: 0px 15px 0px 15px;
-}
-
-#mobile_menu {
-	margin-top: 10px;
-	display: none;
-}
-
-#mobile_menu.visible
-{
-	display: block;
-}
-
-#mobile_menu li > a {
-	margin: 5px 0px 5px 0px;
-	padding: 2px 5px;
-	display: block;
-    flex: 0;
-}
-
-#mobile_menu .nav {
-	padding: 0px;
-	border: none;
-	margin-left: 0px;
-}
-
-#mobile_menu li {
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
-#mobile_menu .nav-child > li {
-    margin: 0px;
-}
-
-#mobile_menu li > ul.nav {
-	margin-left: -5px;
-	margin-right: -5px;
-}
-
-#mobile_menu li ul {
-    border: none;
-}
-
-
-#mobile_menu a {
-    font-size: initial;
-    margin-right: 0px;
-    padding-right: 0px;
-}
-
-
-#mobile_menu > ul.menu {
-	background-color: initial;
-	color: initial;
-	margin-bottom: initial;
-}
-
-#mobile_menu_switch
-{
-	flex: 0 0 auto;
-	text-align: right;
-}
-
-#btn_mobile_menu 
-{
-	padding: 10px 30px 0px 0px;
-	width: 40px;
-	box-sizing: initial;
-}
-
-a.facebook img
-{
-	display: none;
-}
-
-
-.article-info
-{
-	font-size: smaller;
-}
-
-/*
- * Debug
- */
-
-/*#right_column,#left_menu,#main_content,#footline {
-    background-color: rgba(0,0,0,0.1);
-}*/
-
-

slt/css/style.scss

@@ -0,0 +1,12 @@
+@use "abstract";
+@use "core";
+@use "layout";
+@use "components";
+
+/*
+ * Debug
+ */
+
+/* #right_column,#left_menu,#main_content,#footline {
+    background-color: rgba(0,0,0,0.1);
+} */

slt/css/visual.css

@@ -1,154 +0,0 @@
-
-body {
-	font-size: 12pt;
-	font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
-	line-height: 175%;
-}
-
-a {
-  text-decoration: none;
-}
-
-p {
-  text-align: justify;
-}
-
-h3
-{
-	font-size: 133% /*16pt*/;
-}
-
-h2
-{
-	font-size: 158% /*19pt*/;
-}
-
-h1
-{
-	font-size: 183% /*22pt*/;
-}
-
-h1,h2,h3,h4
-{
-	line-height: 150%;
-}
-
-.pull-right > img,
-.pull-left > img,
-.pull-right > a > img,
-.pull-left > a > img
-{
-	margin: 10px;
-}
-
-.centered {
-  text-align: center;
-}
-
-.ragged-left {
-  text-align: left;
-}
-
-/*h2 > a {
-	color: black;
-}*/
-
-li.row-fluid {
-	display: block;
-}
-
-.page-header
-{
-	padding-bottom: 0px;
-}
-
-
-ul.nav > li > a:hover, 
-ul.nav-child > li > a:hover
-{
-	/* background-color: inherit;*/ /* FIXME */
-	text-decoration: none;
-}
-
-.nav a
-{
-	color: inherit;
-}
-
-#topmenu a {
-  color: inherit;
-}
-
-#topmenu {
-  font-weight: bold;
-  text-align: center;
-}
-
-#topmenu > .nav > li {
-  text-align: left;
-}
-
-#topmenu .nav > li > a {
-  font-size: large;
-}
-
-#topmenu .nav > li > a,
-#topmenu .nav > li:hover > a {
-	background-color: inherit;
-} 
-
-#topmenu > .nav > li > .nav-child > li:hover > a:hover {
-	text-decoration: none;
-}
-
-#topmenu .nav > li,
-#topmenu .nav-child > li
-{
-	padding: 0px;
-	border-style: none;
-}
-
-#left_side, #right_side
-{
-	background-repeat: no-repeat;
-	background-size: cover;
-}
-
-#left_menu .nav > li,
-#left_menu .nav-child > li
-{
-    padding: 5px 0px;
-    border-top-style: solid;
-    border-width: 1px;
-}
-
-#left_menu .nav > li:first-child,
-#left_menu .nav-child > li:first-child
-{
-	border-top-style: none;
-}
-
-.row-striped .row-fluid:nth-child(n),
-.list-striped li:nth-child(n),
-.table-striped tbody > tr:nth-child(n) > td
-{
-	background-color: inherit;
-}
-
-.well
-{
-	background-color: inherit;
-}
-
-#footer
-{
-	font-size: x-small;
-	line-height: 100%;
-	color: gray;
-}
-
-/*
-<?php 
-print_r($params);
-?>
-*/

slt/html/com_contact/category/default_items.php

@@ -88,7 +88,7 @@ $listDirn  = $this->escape($this->state->get('list.direction'));
 							<?php $location[] = $item->country; ?>
 						<?php endif; ?>
 						<?php 
-							echo implode($location, ', ');
+							echo implode(', ', $location);
 							if(! empty($location))
 								echo "<br />"; 
 						?>

slt/index.php

@@ -2,8 +2,11 @@
 // No direct access.
 defined('_JEXEC') or die;
 
+use Joomla\CMS\Uri\Uri;
+
 JHTML::_('behavior.framework', true);
 $app = JFactory::getApplication();
+$doc = JFactory::getDocument();
 
 // Add JavaScript Frameworks
 JHtml::_('bootstrap.framework');
@@ -20,7 +23,11 @@ JHtml::_('jquery.framework');
 
 // Add Stylesheets
 JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false));
-JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true));
+// JHtml::_('stylesheet', 'media/jui/css/icomoon.css', array('version' => 'auto', 'relative' => false));
+JHtml::_('stylesheet', 'style.css', array('version' => 'auto', 'relative' => true));
+
+$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
+$doc->addStyleSheet($this->baseurl.'/templates/slt/css/dynamic-styles.css.php?Itemid=' . $app->input->getInt('Itemid'));
 
 // Add Javascript for mobile menu
 JHtml::_('script', 'mobile.js', array('version' => 'auto', 'relative' => true));
@@ -31,11 +38,6 @@ JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true
 // Check for a custom js file
 JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
 
-$params = $this->params;
-
-$leftImageValue  = (empty($this->params{'imgleft'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgleft'} . "\")") ; 
-$rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this->baseurl . "/" . $this->params{'imgright'} . "\")") ;
-
 ?>
 
 <?php echo '<!DOCTYPE html>'; ?>
@@ -46,172 +48,6 @@ $rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this
 <jdoc:include type="head" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<style>
-<?php
-if($this->params{'titlepage'} === '1')
-{
-?>
-#right_column, #left_menu
-{
-	display: none;
-}
-<?php 
-}
-?>
-
-body
-{
-	background-color: <?php echo $this->params{'bgcolorside'}; ?>;
-}
-
-a, a:hover, a:active, a:visited
-{
-	color: <?php echo $params{'mainlicolor'}; ?>;
-}
-
-#page-bg
-{
-	background-image: linear-gradient(to bottom, <?php echo $params{'mainbgcolortop'} . ',' . $params{'mainbgcolorbot'}; ?>);
-	color: <?php echo $params{'mainfgcolor'}; ?>;
-}
-
-#mobile_menu li > a {
-	background-color: <?php echo $params{'bgcolor2'}; ?>;
-    color: <?php echo $params{'licolor2'}; ?>;
-}
-
-#mobile_menu li.current > a {
-	background-color: <?php echo $params{'bgcolor3'}; ?>;
-    color: <?php echo $params{'licolor3'}; ?>;
-}
-
-ul.menu {
-	background-color: <?php echo $params{'bgcolor1'}; ?>;
-	color: <?php echo $params{'fgcolor1'}; ?>;
-}
-
-#mobile_menu {
-	background-color: <?php echo $params{'bgcolor1'}; ?>;
-	color: <?php echo $params{'fgcolor1'}; ?>;
-}
-
-ul.menu li.current > a,
-ul.menu li.current:hover > a
-{
-	background-color: <?php echo $params{'bgcolor2'}; ?>;
-	color: <?php echo $params{'licolor2'}; ?>;
-}
-
-ul.nav > li > a:hover,
-ul.nav > li > a:focus,
-ul.nav-child > li > a:hover,
-ul.nav-child > li > a:focus
-{
-	background-color: <?php echo $params{'bgcolor3'}; ?>;
-	color: <?php echo $params{'licolor3'}; ?>;
-}
-
-#topmenu,
-#topmenu > ul.menu {
-  background-color: <?php echo $params{'topbgcolor1'}; ?>;
-  color: <?php echo $params{'topfgcolor1'}; ?>;
-}
-
-#topmenu .nav-child > li.current
-
-{
-  background-color: <?php echo $params{'topbgcolor2'}; ?>;
-  color: <?php echo $params{'topfgcolor2'}; ?>;
-}
-
-#topmenu .nav-child {
-  background-color: <?php echo $params{'topbgcolor3'}; ?>;
-  color: <?php echo $params{'topfgcolor3'}; ?>;
-}
-
-#topmenu .nav > li:hover,
-#topmenu .nav > li:focus,
-#topmenu .nav > li.active,
-#topmenu .nav-child > li:hover,
-#topmenu .nav-child > li:focus
-{
-  background-color: <?php echo $params{'topbgcolor2'}; ?>;
-  color: <?php echo $params{'topfgcolor2'}; ?>;
-}
-
-#left_side-image
-{
-	background-image: <?php echo $leftImageValue; ?>;
-}
-
-#right_side-image
-{
-	background-image: <?php echo $rightImageValue; ?>;
-}
-
-.list-striped li:nth-child(odd),
-.row-striped .row-fluid:nth-child(odd),
-.table-striped > tbody > tr:nth-child(odd)
-{
-	background-color: <?php echo $params{'bgcolor2'}; ?>;
-	color: <?php echo $params{'fgcolor2'}; ?>;
-}
-.row-striped .row-fluid:nth-child(odd) a,
-.table-striped > tbody > tr:nth-child(odd) a
-{
-	color: <?php echo $params{'licolor2'}; ?>;
-}
-.list-striped li:hover,
-.row-striped .row-fluid:hover,
-.table-striped > tbody > tr:hover
-{
-	background-color: <?php echo $params{'bgcolor3'}; ?>;
-	color: <?php echo $params{'fgcolor3'}; ?>;
-}
-.row-striped .row-fluid:hover a,
-.table-striped > tbody > tr:hover a
-{
-	color: <?php echo $params{'licolor3'}; ?>;
-}
-.table-striped > thead > tr
-{
-	background-color: <?php echo $params{'bgcolor3'}; ?>;
-	color: <?php echo $params{'fgcolor3'}; ?>;
-}
-
-table.alternating tr:nth-child(even) {
-	background-color: <?php echo $params{'bgcolor2'}; ?>;
-	color: <?php echo $params{'fgcolor2'}; ?>;
-}
-table.alternating tr:nth-child(even) a
-{
-	color: <?php echo $params{'licolor2'}; ?>;
-}
-table.alternating tr:nth-child(1) {
-	background-color: <?php echo $params{'bgcolor3'}; ?>;
-	color: <?php echo $params{'fgcolor3'}; ?>;
-}
-table.alternating tr:nth-child(1) a {
-	color: <?php echo $params{'licolor3'}; ?>;
-}
-.readmore > .btn
-{
-	color: <?php echo $params{'fgcolor1'};?>;
-	background-color: <?php echo $params{'bgcolor1'}; ?>;
-}
-.readmore > .btn:hover
-{
-	color: <?php echo $params{'fgcolor3'};?>;
-	background-color: <?php echo $params{'bgcolor3'}; ?>;
-}
-</style>
-
-<!--
-<?php
-print_r($this->params); 
-?>
--->
-
 </head>
 <body>
 
@@ -224,7 +60,7 @@ print_r($this->params);
 </div> <!-- #topmenu-div -->
 
 <div id='page-div'>
-	<div id='left_side-image'></div>
+	<div id='left-side-image'></div>
 	<div id='page-bg'></div>
 	<div id='page'>
 	
@@ -234,26 +70,26 @@ print_r($this->params);
 			</div> <!-- #slideshow -->
 		</div> <!-- #header -->
 		
-		<div id='mobile_menu_switch'><?php echo JHtml::_('image', 'mobile_menu.svg', 'Menu', array('width' => '40px', 'id' => 'btn_mobile_menu'), true);?></div>
-		<div id='mobile_menu'>
+		<div id='mobile-menu-switch'><?php echo JHtml::_('image', 'mobile_menu.svg', 'Menu', array('width' => '40px', 'id' => 'btn-mobile-menu'), true);?></div>
+		<div id='mobile-menu'>
 			<jdoc:include type="modules" style="none" name="mobile_menu" />
 		</div>
 	
 		<div id='content'>
-			<div id='left_menu'>
+			<div id='left-menu'>
+				<div class='current-page-menu'>
+					<jdoc:include type="modules" style="none" name="current_page_menu" />
+				</div>
 				<jdoc:include type="modules" style="none" name="left_menu" />
-			</div> <!-- #left_menu -->
-			<div id='main_column'>
-				<div id='main_content'>
+			</div> <!-- #left-menu -->
+			<div id='main-column'>
+				<div id='main-content'>
 					<jdoc:include type="component" style="none" />
 				</div>
 				<div id='footline'>
 					<jdoc:include type="modules" style="none" name="footline" />
 				</div> <!-- #footline -->
-			</div><!-- main_column -->
-			<!-- <div id='right_column'>
-				<jdoc:include type="modules" style="none" name="right_column" />
-			</div>--><!-- #right_column -->
+			</div><!-- main-column -->
 		</div> <!-- #content -->
 	
 		<div id='impressum'>
@@ -264,7 +100,7 @@ print_r($this->params);
 		</div> <!-- #footer -->
 		
 	</div> <!-- #page -->
-	<div id='right_side-image'></div>
+	<div id='right-side-image'></div>
 </div> <!-- #page-div -->
 
 </body>

slt/js/mobile.js

@@ -1,13 +1,13 @@
 
 jQuery(function($){
 	
-	$('#btn_mobile_menu').click(function(){
-		$('#mobile_menu').toggle({
+	$('#btn-mobile-menu').click(function(){
+		$('#mobile-menu').toggle({
 			duration: '400',
 			easing: 'linear',
 			complete: function(){
-				$('#mobile_menu').toggleClass('visible');
-				$('#mobile_menu').css('display','');
+				$('#mobile-menu').toggleClass('visible');
+				$('#mobile-menu').css('display','');
 				
 			}
 		});

slt/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "slt",
+  "version": "0.0.9",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "stylelint": "npx stylelint css/*.scss css/**/*.scss --cache",
+    "stylelint-fix": "npx stylelint css/**.scss css/**/*.scss --fix",
+    "sass": "npx sass css/style.scss:css/style.css -s compressed --no-source-map",
+    "sass-dev": "npx sass css/style.scss:css/style.css",
+    "sass-watch": "npx sass css/style.scss:css/style.css --watch"
+  },
+  "author": "Christian Wolf",
+  "devDependencies": {
+    "sass": "^1.44.0",
+    "stylelint": "^14.1.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-order": "^5.0.0",
+    "stylelint-scss": "^4.0.0"
+  }
+}