Create version 1.0.2

Reviewed-on: #1

Makefile

@@ -2,7 +2,7 @@
 # UPDATE_PATH=/srv/slt-update
 PACKAGES = slt.tar.gz
 
-export DL_PREFIX=https://slt.wolf-stuttgart.net/update/template
+export DL_PREFIX=https://slt.wolf-stuttgart.net/update/template/files
 
 RSYNC_OPTIONS=-rltDz --delete --delete-delay --delete-excluded --exclude '.gitignore'
 RSYNC_USER=christian
@@ -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

releases/slt-0.0.1.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.1</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.1.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.10.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.10</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.10.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.3.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.3</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.3.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.4.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.4</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.4.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.5.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.5</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.5.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.6.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.6</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.6.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.7.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.7</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.7.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.8.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.8</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.8.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-0.0.9.xml

@@ -0,0 +1,16 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>0.0.9</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-0.0.9.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="3.[012345678]|3.10"/>
+	</update>

releases/slt-1.0.0.xml

@@ -0,0 +1,20 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>1.0.0</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.0.0.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+			<!--<tag>rc</tag>-->
+			<!--<tag>beta</tag>-->
+			<!--<tag>alpha</tag>-->
+			<!--<tag>dev</tag>-->
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="4[.].*"/>
+	</update>

releases/slt-1.0.1.xml

@@ -0,0 +1,20 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>1.0.1</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.0.1.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+			<!--<tag>rc</tag>-->
+			<!--<tag>beta</tag>-->
+			<!--<tag>alpha</tag>-->
+			<!--<tag>dev</tag>-->
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="4[.].*"/>
+	</update>

releases/slt-1.0.2.xml

@@ -0,0 +1,20 @@
+	<update>
+		<name>SLT Template</name>
+		<description>Template for the SLT for the Joomla! CMS</description>
+		<element>slt</element>
+		<type>template</type>
+		<client>site</client>
+		<version>1.0.2</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.0.2.tar.gz</downloadurl>
+		</downloads>
+		<tags>
+			<tag>stable</tag>
+			<!--<tag>rc</tag>-->
+			<!--<tag>beta</tag>-->
+			<!--<tag>alpha</tag>-->
+			<!--<tag>dev</tag>-->
+		</tags>
+		<maintainer>Christian Wolf</maintainer>
+		<targetplatform name="joomla" version="4[.].*"/>
+	</update>

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.5</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">

res/update.template

@@ -3,14 +3,18 @@
 		<description>Template for the SLT for the Joomla! CMS</description>
 		<element>slt</element>
 		<type>template</type>
-		<client>0</client>
-		<version>__VERSION__</version>
+		<client>site</client>
+		<version>$VERSION</version>
 		<downloads>
-			<downloadurl type="full" format="__FORMAT__">__DOWNLOAD_URL__</downloadurl>
+			<downloadurl type="full" format="$FORMAT">$DOWNLOAD_URL</downloadurl>
 		</downloads>
 		<tags>
 			<tag>stable</tag>
+			<!--<tag>rc</tag>-->
+			<!--<tag>beta</tag>-->
+			<!--<tag>alpha</tag>-->
+			<!--<tag>dev</tag>-->
 		</tags>
 		<maintainer>Christian Wolf</maintainer>
-		<targetplatform name="joomla" version=".*"/>
+		<targetplatform name="joomla" version="4[.].*"/>
 	</update>

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-release.sh

@@ -5,7 +5,10 @@ MINOR=`cat serial/minor`
 RELEASE=`cat serial/release`
 TOTRELEASE="$MAJOR.$MINOR.$RELEASE"
 
-outname="releases/slt-$TOTRELEASE.tar.gz"
+filebase="slt-$TOTRELEASE"
+filename="$filebase.tar.gz"
+outname="releases/$filename"
+xmlname="releases/$filebase.xml"
 
 mkdir -p releases
 
@@ -17,3 +20,9 @@ if [ -f "$outname" ]; then
 fi
 
 cp slt.tar.gz "$outname"
+
+export VERSION="$TOTRELEASE"
+export FORMAT='tar.gz'
+export DOWNLOAD_URL="\$DL_PREFIX/$filename"
+
+cat res/update.template | envsubst > "$xmlname"

scripts/create-update-xml.sh

@@ -1,22 +1,11 @@
 #!/bin/bash
 
-# DL_PREFIX="https://slt.wolf-stuttgart.net/update/template"
-
 cat res/prefix.template > slt-update.xml
 
-find releases -name slt-\* | while read f
+find releases -name slt-\*.xml | sort -V | while read f
 do
-	
-	VSTR=`echo "$f" | sed -E 's@releases/slt-@@; s@^([0-9]+\.[0-9]+\.[0-9]+).*$@\1@'`
-	
-	FILE=`echo "$f" | sed 's@releases/@@'`
-	FORMAT=`echo "$f" | sed -E 's@^.*[0-9]+\.[0-9]+\.[0-9]+\.@@'`
-	
-	sed '
-		s@__VERSION__@'"$VSTR"'@g;
-		s@__DOWNLOAD_URL__@'"$DL_PREFIX/files/$FILE"'@g;
-		s@__FORMAT__@'"$FORMAT"'@g
-		' res/update.template >> slt-update.xml
+	# Replace DL_PREFIX in the XML parts and combine them
+	cat "$f" | envsubst >> slt-update.xml
 	
 done
 

serial/major

@@ -1 +1 @@
-0
+1

serial/release

@@ -1 +1 @@
-6
+2

slt/.gitignore

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

slt/.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+    "extends": "stylelint-config-standard-scss",
+    "plugins": [
+        "stylelint-order",
+        "stylelint-scss"
+    ],
+    "rules": {
+        "indentation": 4,
+        "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$"
+    }
+  }

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.mod-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,187 @@
+<?php
+
+define( '_JEXEC', 1 );
+define('JPATH_BASE', '../../../');
+require_once ( JPATH_BASE .'/includes/defines.php' );
+require_once ( JPATH_BASE .'/includes/framework.php' );
+
+$container = \Joomla\CMS\Factory::getContainer();
+$container->alias(\Joomla\Session\SessionInterface::class, 'session.web.site');
+$mainframe = $container->get(\Joomla\CMS\Application\SiteApplication::class);
+$template = $mainframe->getTemplate(true);
+$params = $template->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'] . "\")") 
+
+?>
+
+<?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.mod-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.mod-menu li.current > a,
+ul.mod-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.mod-menu__sub > li > a:hover,
+ul.mod-menu__sub > li > a:focus
+{
+	background-color: <?php echo $params['bgcolor3']; ?>;
+	color: <?php echo $params['licolor3']; ?>;
+}
+
+#topmenu,
+#topmenu > ul.mod-menu {
+  background-color: <?php echo $params['topbgcolor1']; ?>;
+  color: <?php echo $params['topfgcolor1']; ?>;
+}
+
+#topmenu .mod-menu__sub > li.current
+
+{
+  background-color: <?php echo $params['topbgcolor2']; ?>;
+  color: <?php echo $params['topfgcolor2']; ?>;
+}
+
+#topmenu .mod-menu__sub {
+  background-color: <?php echo $params['topbgcolor3']; ?>;
+  color: <?php echo $params['topfgcolor3']; ?>;
+}
+
+#topmenu .nav > li:hover,
+#topmenu .nav > li:focus,
+#topmenu .nav > li.active,
+#topmenu .mod-menu__sub > li:hover,
+#topmenu .mod-menu__sub > 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/_blog.scss

@@ -0,0 +1,30 @@
+@use "../abstract" as abstract;
+
+.columns-2,
+.columns-3,
+.columns-4,
+.columns-5,
+.columns-6 {
+    display: grid;
+
+    > div {
+        margin: 5px 5px 15px 5px;
+    }
+}
+
+.columns-2 {
+    grid-template-columns: 1fr 1fr;
+}
+
+.columns-3 {
+    grid-template-columns: 1fr 1fr 1fr;
+}
+.columns-4 {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+.columns-5 {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+.columns-6 {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+}

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,10 @@
+@use "page-layout";
+@use "topmenu";
+@use "leftmenu";
+@use "footer";
+@use "mobile-menu";
+@use "menu";
+@use "pageheader";
+@use "side-images";
+@use "main-content";
+@use "blog";

slt/css/layout/_leftmenu.scss

@@ -0,0 +1,43 @@
+@use "../abstract" as abstract;
+
+#left-menu {
+    display: none;
+
+    @include abstract.for-desktop {
+        flex: 0 1 20%;
+        display: block;
+        margin: 15px 0 15px 5px;
+
+        > ul.mod-menu {
+            padding: 10px;
+
+            li > a {
+                padding: 2px 5px;
+            }
+        }
+    }
+
+    .nav {
+        display: block;
+
+        li > a {
+            display: block;
+        }
+    }
+
+    .nav > li,
+    .mod-menu__sub > li {
+        padding: 5px 0;
+        border-top-style: solid;
+        border-width: 1px;
+
+        &:first-child {
+            border-top-style: none;
+        }
+    }
+
+    // .nav > li:first-child,
+    // .mod-menu__sub > 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;
+    }
+}
+
+.mod-menu__sub {
+    font-size: small;
+
+    > li > a {
+        @include abstract.for-desktop {
+            display: block;
+        }
+    }
+}
+
+.nav,
+.mod-menu__sub {
+    padding: 0;
+
+    > li {
+        display: block;
+
+        > .mod-menu__sub {
+            padding-left: 10px;
+            margin-left: 10px;
+
+            /* border-left: solid gray 1px; */
+
+            /* TODO */
+        }
+    }
+}
+
+ul.nav > li > a:hover,
+ul.mod-menu__sub > li > a:hover {
+    /* background-color: inherit; */
+
+    /* FIXME */
+    text-decoration: none;
+}

slt/css/layout/_mobile-menu.scss

@@ -0,0 +1,79 @@
+@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;
+        display: flex;
+        flex-direction: column;
+    }
+
+    li {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
+    .mod-menu__sub > li {
+        margin: 0;
+    }
+
+    li > ul.nav {
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+
+    li ul {
+        border: none;
+    }
+
+    > ul.mod-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,180 @@
+@use "../abstract/" as abstract;
+
+#topmenu {
+    display: none;
+    font-weight: bold;
+    text-align: center;
+
+    @include abstract.for-desktop {
+        display: flex;
+        width: 100vw;
+        font-weight: bold;
+        text-align: center;
+
+        a {
+            color: inherit;
+        }
+    }
+
+    a {
+        color: inherit;
+    }
+
+    > .topmenu-sep {
+        display: inline-block;
+        flex: 1 1 auto;
+    }
+
+    .nav > li,
+    .mod-menu__sub > li {
+        padding: 0;
+        border-style: none;
+        height: 100%;
+    }
+
+    .nav {
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+
+        @include abstract.for-desktop {
+            padding: 0 10px;
+            margin: 0;
+            width: 980px;
+        }
+
+        > li {
+            display: inline-block;
+            text-align: left;
+
+            @include abstract.for-desktop {
+                text-align: left;
+            }
+
+            > a {
+                font-size: large;
+                display: block;
+                height: 100%;
+
+                @include abstract.for-desktop {
+                    font-size: large;
+                    padding: 10px;
+                    z-index: 3001;
+                }
+            }
+
+            & > a,
+            &:hover > a {
+                background-color: inherit;
+            }
+
+            > .mod-menu__sub {
+                position: absolute;
+                display: none;
+
+                @include abstract.for-desktop {
+                    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: 6px solid transparent;
+                        }
+                    }
+
+                    &:hover > a {
+                        text-decoration: none;
+                    }
+                }
+            }
+
+            &:hover > .mod-menu__sub {
+                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;
+        }
+
+        .mod-menu__sub > li:hover > a:hover,
+        .mod-menu__sub > li:focus > a:hover,
+        .mod-menu__sub > li:hover > a:focus {
+            text-decoration: none;
+        }
+    }
+
+    // Special colors for topics
+    > ul.nav .mod-menu__sub a.lehre {
+        border-left-color: abstract.$color-lehre;
+    }
+
+    > ul.nav .mod-menu__sub a.breitensport {
+        border-left-color: abstract.$color-breitensport;
+    }
+
+    > ul.nav .mod-menu__sub a.jugend {
+        border-left-color: abstract.$color-jugend;
+    }
+
+    > ul.nav .mod-menu__sub a.jmd {
+        border-left-color: abstract.$color-jmd;
+    }
+
+    > ul.nav .mod-menu__sub a.fachverbaende {
+        border-left-color: abstract.$color-fachverbaende;
+    }
+
+    > ul.nav .mod-menu__sub a.sport {
+        border-left-color: abstract.$color-sport;
+    }
+}
+
+#topmenu-div {
+    @include abstract.for-desktop {
+        position: sticky;
+        top: 0;
+        width: 100vw;
+        height: 40px;
+        z-index: 1;
+    }
+}
+
+a.facebook {
+    img {
+        display: none;
+        height: 25px;
+
+        @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: 10px;
-    margin-left: 10px;
-    /* 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: 10px 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;
-  hypens: auto;
-}
-
-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;
-}
-
-.article-info {
-	clear: both;
-}
-
-.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;
-}
-

slt/html/com_contact/category/default_items.php

@@ -1,131 +0,0 @@
-<?php
-/**
- * @package     Joomla.Site
- * @subpackage  com_contact
- *
- * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
- * @license     GNU General Public License version 2 or later; see LICENSE.txt
- */
-
-defined('_JEXEC') or die;
-
-JHtml::_('behavior.core');
-
-$listOrder = $this->escape($this->state->get('list.ordering'));
-$listDirn  = $this->escape($this->state->get('list.direction'));
-?>
-<?php if (empty($this->items)) : ?>
-	<p> <?php echo JText::_('COM_CONTACT_NO_CONTACTS'); ?>	 </p>
-<?php else : ?>
-
-	<form action="<?php echo htmlspecialchars(JUri::getInstance()->toString()); ?>" method="post" name="adminForm" id="adminForm">
-	<?php if ($this->params->get('filter_field') || $this->params->get('show_pagination_limit')) : ?>
-	<fieldset class="filters btn-toolbar">
-		<?php if ($this->params->get('filter_field')) : ?>
-			<div class="btn-group">
-				<label class="filter-search-lbl element-invisible" for="filter-search"><span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span><?php echo JText::_('COM_CONTACT_FILTER_LABEL') . '&#160;'; ?></label>
-				<input type="text" name="filter-search" id="filter-search" value="<?php echo $this->escape($this->state->get('list.filter')); ?>" class="inputbox" onchange="document.adminForm.submit();" title="<?php echo JText::_('COM_CONTACT_FILTER_SEARCH_DESC'); ?>" placeholder="<?php echo JText::_('COM_CONTACT_FILTER_SEARCH_DESC'); ?>" />
-			</div>
-		<?php endif; ?>
-
-		<?php if ($this->params->get('show_pagination_limit')) : ?>
-			<div class="btn-group pull-right">
-				<label for="limit" class="element-invisible">
-					<?php echo JText::_('JGLOBAL_DISPLAY_NUM'); ?>
-				</label>
-				<?php echo $this->pagination->getLimitBox(); ?>
-			</div>
-		<?php endif; ?>
-	</fieldset>
-	<?php endif; ?>
-
-		<ul class="category row-striped">
-			<?php foreach ($this->items as $i => $item) : ?>
-
-				<?php if (in_array($item->access, $this->user->getAuthorisedViewLevels())) : ?>
-					<?php if ($this->items[$i]->published == 0) : ?>
-						<li class="row-fluid system-unpublished cat-list-row<?php echo $i % 2; ?>">
-					<?php else : ?>
-						<li class="row-fluid cat-list-row<?php echo $i % 2; ?>" >
-					<?php endif; ?>
-
-					<?php if ($this->params->get('show_image_heading')) : ?>
-						<?php $contact_width = 7; ?>
-						<div class="span2 col-md-2">
-							<?php if ($this->items[$i]->image) : ?>
-								<a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
-									<?php echo JHtml::_('image', $this->items[$i]->image, JText::_('COM_CONTACT_IMAGE_DETAILS'), array('class' => 'contact-thumbnail img-thumbnail')); ?></a>
-							<?php endif; ?>
-						</div>
-					<?php else : ?>
-						<?php $contact_width = 9; ?>
-					<?php endif; ?>
-
-					<div class="list-title span<?php echo $contact_width; ?> col-md-<?php echo $contact_width; ?>">
-						<a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
-							<?php echo $item->name; ?></a>
-						<?php if ($this->items[$i]->published == 0) : ?>
-							<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
-						<?php endif; ?>
-						<?php echo $item->event->afterDisplayTitle; ?>
-
-						<?php echo $item->event->beforeDisplayContent; ?>
-
-						<?php if ($this->params->get('show_position_headings')) : ?>
-								<br /><?php echo $item->con_position; ?><br />
-						<?php endif; ?>
-						<?php if ($this->params->get('show_email_headings')) : ?>
-								<?php echo $item->email_to; ?><br />
-						<?php endif; ?>
-						<?php $location = array(); ?>
-						<?php if ($this->params->get('show_suburb_headings') && !empty($item->suburb)) : ?>
-							<?php $location[] = $item->suburb; ?>
-						<?php endif; ?>
-						<?php if ($this->params->get('show_state_headings') && !empty($item->state)) : ?>
-							<?php $location[] = $item->state; ?>
-						<?php endif; ?>
-						<?php if ($this->params->get('show_country_headings') && !empty($item->country)) : ?>
-							<?php $location[] = $item->country; ?>
-						<?php endif; ?>
-						<?php 
-							echo implode($location, ', ');
-							if(! empty($location))
-								echo "<br />"; 
-						?>
-
-						<?php if ($this->params->get('show_telephone_headings') && !empty($item->telephone)) : ?>
-							<?php echo JText::sprintf('COM_CONTACT_TELEPHONE_NUMBER', $item->telephone); ?><br />
-						<?php endif; ?>
-
-						<?php if ($this->params->get('show_mobile_headings') && !empty ($item->mobile)) : ?>
-								<?php echo JText::sprintf('COM_CONTACT_MOBILE_NUMBER', $item->mobile); ?><br />
-						<?php endif; ?>
-
-						<?php if ($this->params->get('show_fax_headings') && !empty($item->fax) ) : ?>
-							<?php echo JText::sprintf('COM_CONTACT_FAX_NUMBER', $item->fax); ?><br />
-						<?php endif; ?>
-					</div>
-
-					<?php echo $item->event->afterDisplayContent; ?>
-				</li>
-				<?php endif; ?>
-			<?php endforeach; ?>
-		</ul>
-
-		<?php if ($this->params->get('show_pagination', 2)) : ?>
-		<div class="pagination">
-			<?php if ($this->params->def('show_pagination_results', 1)) : ?>
-			<p class="counter">
-				<?php echo $this->pagination->getPagesCounter(); ?>
-			</p>
-			<?php endif; ?>
-			<?php echo $this->pagination->getPagesLinks(); ?>
-		</div>
-		<?php endif; ?>
-		<div>
-			<input type="hidden" name="filter_order" value="<?php echo $listOrder; ?>" />
-			<input type="hidden" name="filter_order_Dir" value="<?php echo $listDirn; ?>" />
-		</div>
-</form>
-<?php endif; ?>
-

slt/html/com_contact/contact/default_address.php

@@ -1,125 +0,0 @@
-<?php
-/**
- * @package     Joomla.Site
- * @subpackage  com_contact
- *
- * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
- * @license     GNU General Public License version 2 or later; see LICENSE.txt
- */
-
-defined('_JEXEC') or die;
-
-/**
- * Marker_class: Class based on the selection of text, none, or icons
- * jicon-text, jicon-none, jicon-icon
- */
-?>
-<dl class="contact-address dl-horizontal" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
-	<?php if (($this->params->get('address_check') > 0) &&
-		($this->contact->address || $this->contact->suburb  || $this->contact->state || $this->contact->country || $this->contact->postcode)) : ?>
-		<dt>
-			<span class="<?php echo $this->params->get('marker_class'); ?>">
-				<?php echo $this->params->get('marker_address'); ?>
-			</span>
-		</dt>
-
-		<?php if ($this->contact->address && $this->params->get('show_street_address')) : ?>
-			<dd>
-				<span class="contact-street" itemprop="streetAddress">
-					<?php echo nl2br($this->contact->address); ?>
-					<br />
-				</span>
-			</dd>
-		<?php endif; ?>
-
-		<?php if ($this->contact->suburb && $this->params->get('show_suburb')) : ?>
-			<dd>
-			  <span class="contact-postcode" itemprop="postalCode">
-				<?php echo $this->contact->postcode; ?>
-			  </span>
-              <span class="contact-suburb" itemprop="addressLocality">
-					<?php echo $this->contact->suburb; ?>
-					<br />
-				</span>
-			</dd>
-		<?php endif; ?>
-		<?php if ($this->contact->state && $this->params->get('show_state')) : ?>
-			<dd>
-				<span class="contact-state" itemprop="addressRegion">
-					<?php echo $this->contact->state; ?>
-					<br />
-				</span>
-			</dd>
-		<?php endif; ?>
-		<?php if ($this->contact->country && $this->params->get('show_country')) : ?>
-		<dd>
-			<span class="contact-country" itemprop="addressCountry">
-				<?php echo $this->contact->country; ?>
-				<br />
-			</span>
-		</dd>
-		<?php endif; ?>
-	<?php endif; ?>
-
-<?php if ($this->contact->email_to && $this->params->get('show_email')) : ?>
-	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>" itemprop="email">
-			<?php echo nl2br($this->params->get('marker_email')); ?>
-		</span>
-	</dt>
-	<dd>
-		<span class="contact-emailto">
-			<?php echo $this->contact->email_to; ?>
-		</span>
-	</dd>
-<?php endif; ?>
-
-<?php if ($this->contact->telephone && $this->params->get('show_telephone')) : ?>
-	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-			<?php echo $this->params->get('marker_telephone'); ?>
-		</span>
-	</dt>
-	<dd>
-		<span class="contact-telephone" itemprop="telephone">
-			<?php echo $this->contact->telephone; ?>
-		</span>
-	</dd>
-<?php endif; ?>
-<?php if ($this->contact->fax && $this->params->get('show_fax')) : ?>
-	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-			<?php echo $this->params->get('marker_fax'); ?>
-		</span>
-	</dt>
-	<dd>
-		<span class="contact-fax" itemprop="faxNumber">
-		<?php echo $this->contact->fax; ?>
-		</span>
-	</dd>
-<?php endif; ?>
-<?php if ($this->contact->mobile && $this->params->get('show_mobile')) : ?>
-	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-			<?php echo $this->params->get('marker_mobile'); ?>
-		</span>
-	</dt>
-	<dd>
-		<span class="contact-mobile" itemprop="telephone">
-			<?php echo $this->contact->mobile; ?>
-		</span>
-	</dd>
-<?php endif; ?>
-<?php if ($this->contact->webpage && $this->params->get('show_webpage')) : ?>
-	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-		</span>
-	</dt>
-	<dd>
-		<span class="contact-webpage">
-			<a href="<?php echo $this->contact->webpage; ?>" target="_blank" rel="noopener noreferrer" itemprop="url">
-			<?php echo JStringPunycode::urlToUTF8($this->contact->webpage); ?></a>
-		</span>
-	</dd>
-<?php endif; ?>
-</dl>

slt/index.php

@@ -2,8 +2,11 @@
 // No direct access.
 defined('_JEXEC') or die;
 
-JHTML::_('behavior.framework', true);
+use Joomla\CMS\Uri\Uri;
+
+//JHTML::_('behavior.framework', true);
 $app = JFactory::getApplication();
+$doc = JFactory::getDocument();
 
 // Add JavaScript Frameworks
 JHtml::_('bootstrap.framework');
@@ -12,19 +15,12 @@ JHtml::_('bootstrap.loadCss', true, $this->direction);
 // Add jQuery framework
 JHtml::_('jquery.framework');
 
-// Add template js
-//JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
-
-// Add html5 shiv
-//JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));
-
 // Add Stylesheets
 JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false));
-// JHtml::_('stylesheet', 'media/jui/css/icomoon.css', array('version' => 'auto', 'relative' => false));
-JHtml::_('stylesheet', 'main.css', array('version' => 'auto', 'relative' => true));
+JHtml::_('stylesheet', 'style.css', array('version' => 'auto', 'relative' => true));
 
-$doc = JFactory::getDocument();
-$doc->addStyleSheet($this->baseurl.'/media/jui/css/icomoon.css');
+$doc->addStyleSheet($this->baseurl.'/media/system/css/joomla-fontawesome.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));
@@ -35,11 +31,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>'; ?>
@@ -49,173 +40,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>
 
@@ -228,7 +52,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'>
 	
@@ -238,26 +62,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'>
@@ -268,7 +92,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"
+  }
+}