Create new release

Fix coloring of pagination buttons
Add option to specify link color in headers
2022-08-18 16:37:20 +02:00 · 2022-08-18 16:36:33 +02:00 · 2022-08-18 16:30:55 +02:00 · 2022-08-18 15:15:31 +02:00 · 2022-08-18 12:41:48 +02:00 · 2022-08-18 12:38:56 +02:00
105 changed files with 5667 additions and 1372 deletions
--- a/.buildpath
+++ b/.buildpath
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<buildpath>
-	<buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/>
-	<buildpathentry kind="src" path=""/>
-</buildpath>
--- a/.project
+++ b/.project
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>template</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.eclipse.wst.common.project.facet.core.builder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
-			<name>org.eclipse.wst.validation.validationbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
-			<name>org.eclipse.dltk.core.scriptbuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>org.eclipse.php.core.PHPNature</nature>
-		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
-	</natures>
-</projectDescription>
--- a/.settings/org.eclipse.php.core.prefs
+++ b/.settings/org.eclipse.php.core.prefs
@@ -1,2 +0,0 @@
-eclipse.preferences.version=1
-include_path=0;/template
--- a/.settings/org.eclipse.wst.common.project.facet.core.xml
+++ b/.settings/org.eclipse.wst.common.project.facet.core.xml
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<faceted-project>
-  <fixed facet="php.component"/>
-  <fixed facet="php.core.component"/>
-  <installed facet="php.core.component" version="1"/>
-  <installed facet="php.component" version="5.6"/>
-</faceted-project>
--- a/28
+++ b/28
@@ -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,31 @@ all: package

 package: $(PACKAGES)

+.PHONY: npm
+npm:
+	cd slt; npm i
+	cd slt; npm run sass
+	cd slt; npm run prettier && npm run stylelint
+
 .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
--- a/releases/slt-0.0.1.xml
+++ b/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>
--- a/releases/slt-0.0.10.tar.gz
+++ b/releases/slt-0.0.10.tar.gz
--- a/releases/slt-0.0.10.xml
+++ b/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>
--- a/releases/slt-0.0.3.xml
+++ b/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>
--- a/releases/slt-0.0.4.xml
+++ b/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>
--- a/releases/slt-0.0.5.xml
+++ b/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>
--- a/releases/slt-0.0.6.tar.gz
+++ b/releases/slt-0.0.6.tar.gz
--- a/releases/slt-0.0.6.xml
+++ b/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>
--- a/releases/slt-0.0.7.tar.gz
+++ b/releases/slt-0.0.7.tar.gz
--- a/releases/slt-0.0.7.xml
+++ b/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>
--- a/releases/slt-0.0.8.tar.gz
+++ b/releases/slt-0.0.8.tar.gz
--- a/releases/slt-0.0.8.xml
+++ b/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>
--- a/releases/slt-0.0.9.tar.gz
+++ b/releases/slt-0.0.9.tar.gz
--- a/releases/slt-0.0.9.xml
+++ b/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>
--- a/releases/slt-1.0.0.tar.gz
+++ b/releases/slt-1.0.0.tar.gz
--- a/releases/slt-1.0.0.xml
+++ b/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>
--- a/releases/slt-1.0.1.tar.gz
+++ b/releases/slt-1.0.1.tar.gz
--- a/releases/slt-1.0.1.xml
+++ b/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>
--- a/releases/slt-1.0.2.tar.gz
+++ b/releases/slt-1.0.2.tar.gz
--- a/releases/slt-1.0.2.xml
+++ b/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>
--- a/releases/slt-1.0.3.tar.gz
+++ b/releases/slt-1.0.3.tar.gz
--- a/releases/slt-1.0.3.xml
+++ b/releases/slt-1.0.3.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.3</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.0.3.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>
--- a/releases/slt-1.0.4.tar.gz
+++ b/releases/slt-1.0.4.tar.gz
--- a/releases/slt-1.0.4.xml
+++ b/releases/slt-1.0.4.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.4</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.0.4.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>
--- a/releases/slt-1.1.0.tar.gz
+++ b/releases/slt-1.1.0.tar.gz
--- a/releases/slt-1.1.0.xml
+++ b/releases/slt-1.1.0.xml
@@ -0,0 +1,21 @@
+	<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.1.0</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.1.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[.].*"/>
+		<sha512>c738c8b64a1be419570dc12763c5fb8ecaefaa31b6067eaf263a611ccdae404a467072dc1e0e17caffca5278d3c19b70633069183b5f90ebc9b75ab4b750691f</sha512>
+	</update>
--- a/releases/slt-1.1.1.tar.gz
+++ b/releases/slt-1.1.1.tar.gz
--- a/releases/slt-1.1.1.xml
+++ b/releases/slt-1.1.1.xml
@@ -0,0 +1,21 @@
+	<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.1.1</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.1.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[.].*"/>
+		<sha512>f54b25670ae1ed6ed1fd0712c02a47bc040526679a9a2abe09be4982afb67ec819493d25075c90fc13f23f3bea8734156e83705c2003e236b6b65fef39b1a39c</sha512>
+	</update>
--- a/releases/slt-1.1.2.tar.gz
+++ b/releases/slt-1.1.2.tar.gz
--- a/releases/slt-1.1.2.xml
+++ b/releases/slt-1.1.2.xml
@@ -0,0 +1,21 @@
+	<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.1.2</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.1.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[.].*"/>
+		<sha512>2679c8ef32e67e31915466d6f28c021fcbfe6acfbcb41d70477af06c59e0e6e960691b37249f1ebebfa1e201049e4c2e222a7fc9106b83c6c4667ed6e42e1d60</sha512>
+	</update>
--- a/releases/slt-1.1.3.tar.gz
+++ b/releases/slt-1.1.3.tar.gz
--- a/releases/slt-1.1.3.xml
+++ b/releases/slt-1.1.3.xml
@@ -0,0 +1,21 @@
+	<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.1.3</version>
+		<downloads>
+			<downloadurl type="full" format="tar.gz">$DL_PREFIX/slt-1.1.3.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[.].*"/>
+		<sha512>6efb161e0ef05cf30231d39f304221f01cf29c615cc581b5eeede8d00e34f5cfb624379a588319d363ecc2301f7c836f7874b124e736672ebf377c1ae3f314b2</sha512>
+	</update>
--- a/res/templateDetails.tmpl.xml
+++ b/res/templateDetails.tmpl.xml
@@ -0,0 +1,100 @@
+<?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"> 
+<extension
+    version="3.0"
+    method="upgrade"
+    type="template"
+    client="site"> 
+  <name>SLT</name>
+  <title>Template des Saarländischen Landesverbands für Tanzsport e.V.</title>
+  <creationDate>${DATE}</creationDate>
+  <version>${VERSION}</version>
+  <author>Christian Wolf</author>
+  <authorEmail>homepage@slt.wolf-stuttgart.net</authorEmail>
+  <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>-->
+  <files> 
+    <folder>css</folder>
+    <folder>images</folder>
+    <folder>language</folder>
+    <folder>js</folder>
+    <folder>html</folder>
+    <filename>index.php</filename>
+    <filename>index.html</filename>
+    <filename>favicon.ico</filename>
+    <filename>templateDetails.xml</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>
+  <positions>
+    <position>topmenu</position>
+    <position>slideshow</position>
+    <position>mobile_menu</position>
+    <position>left_menu</position>
+    <position>footline</position>
+    <position>impressum</position>
+    <position>footer</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">
+    <language tag="de-DE">de-DE/de-DE.tpl_test_template.sys.ini</language>
+    <language tag="de-DE">de-DE/de-DE.tpl_test_template.ini</language>
+    <language tag="de-DE">en-GB/en-GB.tpl_test_template.sys.ini</language>
+    <language tag="de-DE">en-GB/en-GB.tpl_test_template.ini</language>
+  </languages>-->
+  <!-- Parameter Block start -->
+  <config>
+    <fields name="params">
+      <fieldset name="advanced">
+        <field name="titlepage" type="list" default="0" label="Switch to titlepage mode" description="">
+          <option value="0">No</option>
+          <option value="1">Yes</option>
+        </field>
+      </fieldset>
+      <fieldset name='TPL_SLT_COLORS_TOPMENU'>
+      	<field name="topfgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_TOP'></field>
+        <field name="topbgcolor1" type='color' default='#000' label='TPL_SLT_BACKGROUND_COLOR_TOP'></field>
+        <field name="topfgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_TOP_DARK'></field>
+        <field name="topbgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_TOP_DARK'></field>
+        <field name="topfgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_TOP_LIGHT'></field>
+        <field name="topbgcolor3" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_TOP_LIGHT'></field>
+      </fieldset>
+      <fieldset name='TPL_SLT_COLORS_MAIN'>
+        <field type="spacer" name="menu-colors" label="Top-menu colors" />
+        <!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
+        <field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
+        <field name="mainlicolor" type='color' default='#222' label='TPL_SLT_LINK_COLOR_MAIN'></field>
+        <field name="headercolor" type='color' default='#000' label='Color of header (normally foreground link color or black/white)'></field>
+        <field name="mainbgcolortop" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_MAIN_TOP'></field>
+        <field name="mainbgcolorbot" type='color' default='#fff' label='TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM'></field>
+        
+        <field type="spacer" name="menu-colors" label="Menu colors" />
+        <field name="fgcolor1" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_1'></field>
+        <field name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
+        <field type="spacer" name="spacer1" hr="true" />
+        <field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
+        <field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
+        
+        <field type="spacer" name="effect-colors" label="Effect coloring" />
+        <field name="fgeffect" type="color" default="#000" label="TPL_SLT_FOREGROUND_EFFECT_COLOR"></field>
+        <field name="bgeffect" type="color" default="#eee" label="TPL_SLT_BACKGROUND_EFFECT_COLOR"></field>
+        <field type="spacer" name="spacer3" hr="true" />
+        <field name="fgeffecthdr" type="color" default="#000" label="TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR"></field>
+        <field name="bgeffecthdr" type="color" default="#ccc" label="TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR"></field>
+
+        <field type="spacer" name="side-images" label="Side configuration" />
+        <field name="bgcolorside" type='color' default='#ebebeb' label='TPL_SLT_BACKGROUND_COLOR_AT_SIDES'></field>
+        <field name="imgleft" type='media' directory='' label='TPL_SLT_LEFT_BACKGROUND_IMAGE'></field>
+        <field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field>
+      </fieldset>
+    </fields>
+  </config>
+  <!-- Parameter Block ende -->
+  <updateservers>
+  		<server type="extension" name="SLT Update Site of Christian Wolf" priority="1">http://slt.wolf-stuttgart.net/update/template/slt-update.xml</server>
+  </updateservers>
+</extension>
--- a/res/update.template
+++ b/res/update.template
@@ -3,14 +3,19 @@
 		<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[.].*"/>
+		$SUMS
 	</update>
--- a/scripts/create-details-xml.sh
+++ b/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
--- a/scripts/create-release.sh
+++ b/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,12 @@ if [ -f "$outname" ]; then
 fi

 cp slt.tar.gz "$outname"
+
+sha=$(sha512sum slt.tar.gz | cut -d' ' -f1)
+
+export VERSION="$TOTRELEASE"
+export FORMAT='tar.gz'
+export DOWNLOAD_URL="\$DL_PREFIX/$filename"
+export SUMS="<sha512>$sha</sha512>"
+
+cat res/update.template | envsubst > "$xmlname"
--- a/scripts/create-update-xml.sh
+++ b/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

--- a/serial/major
+++ b/serial/major
@@ -1 +1 @@
-0
+1
--- a/serial/minor
+++ b/serial/minor
@@ -1 +1 @@
-0
+1
--- a/serial/release
+++ b/serial/release
@@ -1 +1 @@
-5
+3
--- a/slt.xml
+++ b/slt.xml
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<updates>
-	<update>
-		<name>Joomla Template</name>
-		<description>Template for the SLT for the Joomla! CMS</description>
-		<element>slt</element>
-		<type>template</type>
-		<version>0.0.1</version>
-	<!-- 	<infourl title="Joomla!">http://www.joomla.org/</infourl> -->
-		<downloads>
-			<downloadurl type="full" format="tar">http://localhost/slt-update/slt1.tar</downloadurl>
-		</downloads>
-		<!--<tags>
-			<tag>stable</tag>
-		</tags>-->
-		<maintainer>Christian Wolf</maintainer>
-	<!-- 	<maintainerurl>http://sammoffatt.com.au</maintainerurl> -->
-	<!-- 	<section>Testing</section> -->
-	<!-- 	<targetplatform name="joomla" version="1.6"/> -->
-	</update>
-</updates>
--- a/slt/.gitignore
+++ b/slt/.gitignore
@@ -0,0 +1,3 @@
+/node_modules/
+/.stylelintcache
+/templateDetails.xml
--- a/slt/.stylelintrc.json
+++ b/slt/.stylelintrc.json
@@ -0,0 +1,13 @@
+{
+    "extends": "stylelint-config-standard-scss",
+    "plugins": [
+        "stylelint-order",
+        "stylelint-scss"
+    ],
+    "rules": {
+        "indentation": 4,
+        "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$",
+        "string-quotes": "single",
+        "declaration-colon-newline-after": null
+    }
+  }
--- a/slt/css/.gitignore
+++ b/slt/css/.gitignore
@@ -0,0 +1,2 @@
+/style.css
+*.css.map
--- a/slt/css/.htaccess
+++ b/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>
--- a/slt/css/abstract/_colors.scss
+++ b/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};
+}
--- a/slt/css/abstract/_index.scss
+++ b/slt/css/abstract/_index.scss
@@ -0,0 +1,2 @@
+@forward 'responsive';
+@forward 'colors';
--- a/slt/css/abstract/_responsive.scss
+++ b/slt/css/abstract/_responsive.scss
@@ -0,0 +1,19 @@
+// 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;
+    }
+}
+
+@mixin for-narrow-screen {
+    @media screen and (max-width: 800px) {
+        @content;
+    }
+}
--- a/slt/css/components/_article.scss
+++ b/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;
+            }
+        }
+    }
+}
--- a/slt/css/components/_contact-list.scss
+++ b/slt/css/components/_contact-list.scss
@@ -0,0 +1,13 @@
+table.com-content-category__table {
+    thead {
+        display: none;
+    }
+
+    tr {
+        > th,
+        > td {
+            border: none;
+            box-shadow: none;
+        }
+    }
+}
--- a/slt/css/components/_contact-view.scss
+++ b/slt/css/components/_contact-view.scss
@@ -0,0 +1,4 @@
+.com-contact__thumbnail {
+    float: right;
+    margin: 10px 0 10px 10px;
+}
--- a/slt/css/components/_current-page-menu.scss
+++ b/slt/css/components/_current-page-menu.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;
+            }
+        }
+    }
+}
--- a/slt/css/components/_index.scss
+++ b/slt/css/components/_index.scss
@@ -0,0 +1,10 @@
+@use 'slideshow';
+@use 'article';
+@use 'current-page-menu';
+@use 'result-table';
+@use 'presseberichte';
+@use 'verbandstag';
+@use 'vereine';
+@use 'contact-list';
+@use 'contact-view';
+@use 'read-more';
--- a/slt/css/components/_presseberichte.scss
+++ b/slt/css/components/_presseberichte.scss
@@ -0,0 +1,17 @@
+@use '../abstract' as abstract;
+
+table.pressespiegel {
+    @include abstract.for-narrow-screen {
+        tr {
+            &:first-child {
+                display: none;
+            }
+
+            > td {
+                &:last-child::before {
+                    content: 'Rubrik: ';
+                }
+            }
+        }
+    }
+}
--- a/slt/css/components/_read-more.scss
+++ b/slt/css/components/_read-more.scss
@@ -0,0 +1,9 @@
+.readmore > .btn {
+    color: var(--color-menu, #000);
+    background-color: var(--color-menu-background, #eee);
+
+    &:hover {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+}
--- a/slt/css/components/_result-table.scss
+++ b/slt/css/components/_result-table.scss
@@ -0,0 +1,15 @@
+@use '../abstract' as abstract;
+
+table.result {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+div.result-links a {
+    display: block;
+
+    @include abstract.for-narrow-screen {
+        padding: 7px 0;
+        margin: 15px 0;
+    }
+}
--- a/slt/css/components/_slideshow.scss
+++ b/slt/css/components/_slideshow.scss
@@ -0,0 +1,14 @@
+@use '../abstract' as abstract;
+
+#slideshow {
+    flex: 1;
+    display: none;
+
+    @include abstract.for-desktop {
+        display: inline-block;
+
+        > div {
+            margin: 20px;
+        }
+    }
+}
--- a/slt/css/components/_verbandstag.scss
+++ b/slt/css/components/_verbandstag.scss
@@ -0,0 +1,11 @@
+@use '../abstract' as abstract;
+
+table.verbandstag {
+    @include abstract.for-narrow-screen {
+        tr {
+            &:first-child {
+                display: none;
+            }
+        }
+    }
+}
--- a/slt/css/components/_vereine.scss
+++ b/slt/css/components/_vereine.scss
@@ -0,0 +1,39 @@
+@use '../abstract' as abstract;
+
+.slt-vereine {
+    @include abstract.for-narrow-screen {
+        display: block;
+        line-height: 150%;
+
+        > tbody,
+        tr,
+        td {
+            display: block;
+            width: 100%;
+        }
+
+        tr {
+            padding: 7px 0;
+
+            &:first-child {
+                display: none;
+            }
+
+            > td:first-child {
+                display: none;
+            }
+
+            > td:nth-child(2) {
+                font-weight: bold;
+            }
+
+            > td:nth-child(4)::before {
+                content: 'Ansprechpartner: ';
+            }
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+}
--- a/slt/css/core/_buttons.scss
+++ b/slt/css/core/_buttons.scss
@@ -0,0 +1,22 @@
+.btn-primary {
+    color: white;
+    background-color: var(--color-main-link);
+    border: none;
+
+    &:hover {
+        color: white;
+        background-color: var(--color-main-link);
+    }
+}
+
+.pagination {
+    a {
+        color: var(--color-main-link);
+    }
+
+    .page-item.active .page-link {
+        color: var(--color-fg-top);
+        background-color: var(--color-bg-top);
+        border: none;
+    }
+}
--- a/slt/css/core/_core.scss
+++ b/slt/css/core/_core.scss
@@ -0,0 +1,65 @@
+@use '../abstract' as abstract;
+
+body {
+    margin: 0;
+    min-height: 100.1vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--color-side-background, #fff);
+
+    /*    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;
+}
+
+a,
+a:hover,
+a:active,
+a:visited {
+    color: var(--color-main-link, #000);
+}
+
+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%;
+
+    /* stylelint-disable no-descending-specificity -- Keep the block of a elements together */
+    a,
+    a:hover,
+    a:active,
+    a:visited {
+        color: var(--color-header-link, #000);
+    }
+    /* stylelint-enable no-descending-specificity */
+}
--- a/slt/css/core/_default-classes.scss
+++ b/slt/css/core/_default-classes.scss
@@ -0,0 +1,70 @@
+.pull-right > img,
+.pull-left > img,
+.pull-right > a > img,
+.pull-left > a > img {
+    margin: 10px;
+}
+
+.right {
+    float: right;
+}
+
+.left {
+    float: left;
+}
+
+.right,
+.left {
+    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: initial;
+// }
+
+.table-striped {
+    > thead > tr {
+        color: var(--color-effect-header, #000);
+        background-color: var(--color-effect-background-header, #aaa);
+    }
+}
+
+.list-striped li:nth-child(odd),
+.row-striped .row-fluid:nth-child(odd),
+.table-striped > tbody > tr:nth-child(odd) {
+    color: var(--color-effect, #000);
+    background-color: var(--color-effect-background, #ccc);
+}
+
+.list-striped li:hover,
+.row-striped .row-fluid:hover,
+.table-striped > tbody > tr:hover {
+    color: var(--color-effect-header, #000);
+    background-color: var(--color-effect-background-header, #aaa);
+}
+
+.table-hover > tbody > tr:hover > * {
+    color: unset;
+}
+
+.well {
+    background-color: inherit;
+}
--- a/slt/css/core/_index.scss
+++ b/slt/css/core/_index.scss
@@ -0,0 +1,3 @@
+@use 'core';
+@use 'default-classes';
+@use 'buttons';
--- a/slt/css/desktop-narrow.css
+++ b/slt/css/desktop-narrow.css
@@ -1,3 +0,0 @@
-#topmenu .nav > li > a {
-  font-size: large;
-}
--- a/slt/css/desktop.css
+++ b/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);
-}*/
-
-
--- a/slt/css/dynamic-styles.css.php
+++ b/slt/css/dynamic-styles.css.php
@@ -0,0 +1,77 @@
+<?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') {
+    echo "#left-menu { display: none; }\n";
+} ?>
+
+:root {
+	--color-fg-top: <?php echo $params['topfgcolor1']; ?>;
+	--color-bg-top: <?php echo $params['topbgcolor1']; ?>;
+	--color-fg-top-dark: <?php echo $params['topfgcolor2']; ?>;
+	--color-bg-top-dark: <?php echo $params['topbgcolor2']; ?>;
+	--color-fg-top-light: <?php echo $params['topfgcolor3']; ?>;
+	--color-bg-top-light: <?php echo $params['topbgcolor3']; ?>;
+
+	--color-main: <?php echo $params['mainfgcolor']; ?>;
+	--color-main-link: <?php echo $params['mainlicolor']; ?>;
+	--color-header-link: <?php echo $params['headercolor']; ?>;
+
+	--color-page-bg-top: <?php echo $params['mainbgcolortop']; ?>;
+	--color-page-bg-bottom: <?php echo $params['mainbgcolorbot']; ?>;
+
+	--color-menu: <?php echo $params['fgcolor1']; ?>;
+	--color-menu-background: <?php echo $params['bgcolor1']; ?>;
+	--color-menu-active: <?php echo $params['fgcolor2']; ?>;
+	--color-menu-background-active: <?php echo $params['bgcolor2']; ?>;
+
+	--color-effect: <?php echo $params['fgeffect']; ?>;
+	--color-effect-background: <?php echo $params['bgeffect']; ?>;
+	--color-effect-header: <?php echo $params['fgeffecthdr']; ?>;
+	--color-effect-background-header: <?php echo $params['bgeffecthdr']; ?>;
+
+	--color-side-background: <?php echo $params['bgcolorside']; ?>;
+	--image-left-side: <?php echo $leftImageValue; ?>;
+	--image-right-side: <?php echo $rightImageValue; ?>;
+}
+
+<?php // Stop execution here, the rest is for debugging
+
+exit(); ?>
+
+:root {
+	--color-effect: blue;
+	--color-effect-background: red;
+	--color-effect-header: yellow;
+	--color-effect-background-header: green;
+}
--- a/slt/css/layout/_alternating-table.scss
+++ b/slt/css/layout/_alternating-table.scss
@@ -0,0 +1,19 @@
+.alternating {
+    tr:nth-child(even) {
+        color: var(--color-effect, #000);
+        background-color: var(--color-effect-background, #ccc);
+
+        a {
+            color: inherit;
+        }
+    }
+
+    tr:nth-child(1) {
+        color: var(--color-effect-header, #000);
+        background-color: var(--color-effect-background-header, #aaa);
+
+        a {
+            color: inherit;
+        }
+    }
+}
--- a/slt/css/layout/_blog.scss
+++ b/slt/css/layout/_blog.scss
@@ -0,0 +1,35 @@
+@use '../abstract' as abstract;
+
+.columns-2,
+.columns-3,
+.columns-4,
+.columns-5,
+.columns-6 {
+    @include abstract.for-desktop {
+        display: grid;
+
+        > div {
+            margin: 5px 5px 15px;
+        }
+    }
+}
+
+.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;
+}
--- a/slt/css/layout/_footer.scss
+++ b/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;
+    }
+}
--- a/slt/css/layout/_index.scss
+++ b/slt/css/layout/_index.scss
@@ -0,0 +1,12 @@
+@use 'page-layout';
+@use 'topmenu';
+@use 'leftmenu';
+@use 'footer';
+@use 'mobile-menu';
+@use 'menu';
+@use 'pageheader';
+@use 'side-images';
+@use 'main-content';
+@use 'blog';
+@use 'mobile-table';
+@use 'alternating-table';
--- a/slt/css/layout/_leftmenu.scss
+++ b/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;
+    // }
+}
--- a/slt/css/layout/_main-content.scss
+++ b/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;
+    }
+}
--- a/slt/css/layout/_menu.scss
+++ b/slt/css/layout/_menu.scss
@@ -0,0 +1,55 @@
+@use '../abstract' as abstract;
+
+.nav,
+.mod-menu__sub {
+    padding: 0;
+
+    > li {
+        display: block;
+    }
+}
+
+.nav {
+    font-size: inherit;
+    color: var(--color-menu, #000);
+    background-color: var(--color-menu-background, #eee);
+
+    a {
+        color: inherit;
+    }
+
+    li.current > a {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+
+    li > a:hover,
+    li > a:focus {
+        color: var(--color-menu-active, #000);
+        background-color: var(--color-menu-background-active, #ccc);
+    }
+
+    .mod-menu__sub {
+        font-size: small;
+        padding-left: 10px;
+        margin-left: 10px;
+
+        /* border-left: solid gray 1px; */
+
+        /* TODO */
+
+        > li > a {
+            @include abstract.for-desktop {
+                display: block;
+            }
+        }
+    }
+}
+
+ul.nav > li > a:hover,
+ul.mod-menu__sub > li > a:hover {
+    /* background-color: inherit; */
+
+    /* FIXME */
+    text-decoration: none;
+}
--- a/slt/css/layout/_mobile-menu.scss
+++ b/slt/css/layout/_mobile-menu.scss
@@ -0,0 +1,85 @@
+@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;
+            display: block;
+            color: var(--color-menu, #000);
+            background-color: var(--color-menu-background, #eee);
+        }
+
+        &.current > a {
+            color: var(--color-menu-active, #000);
+            background-color: var(--color-menu-background-active, #ccc);
+        }
+
+        margin-left: 5px;
+        margin-right: 5px;
+
+        ul {
+            border: none;
+        }
+
+        > ul.nav {
+            margin-left: -5px;
+            margin-right: -5px;
+        }
+    }
+
+    .nav {
+        padding: 0;
+        border: none;
+        margin-left: 0;
+    }
+
+    .mod-menu,
+    .mod-menu__sub {
+        display: flex;
+        flex-direction: column;
+    }
+
+    > 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;
+}
--- a/slt/css/layout/_mobile-table.scss
+++ b/slt/css/layout/_mobile-table.scss
@@ -0,0 +1,39 @@
+@use '../abstract' as abstract;
+
+table:not(.no-responsive-table) {
+    width: 100%;
+
+    @include abstract.for-narrow-screen {
+        display: block;
+
+        > tbody {
+            display: block;
+        }
+
+        tr {
+            display: block;
+            padding: 7px 0;
+            border-style: none;
+            border-bottom-style: solid;
+            border-width: 1px;
+            border-color: var(--color-mobile-table-border, #000);
+
+            &:nth-child(1) {
+                border-top-style: solid;
+            }
+
+            > td {
+                display: block;
+                text-align: left !important;
+            }
+        }
+    }
+}
+
+table:not(.alternating) {
+    @include abstract.for-narrow-screen {
+        tr:nth-child(2n + 1) {
+            background-color: #bbb;
+        }
+    }
+}
--- a/slt/css/layout/_page-layout.scss
+++ b/slt/css/layout/_page-layout.scss
@@ -0,0 +1,55 @@
+@use '../abstract' as abstract;
+
+#page-div {
+    width: 100%;
+
+    @include abstract.for-desktop {
+        display: flex;
+        flex-flow: row;
+        margin-top: 25px;
+
+        // 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;
+    background-image: linear-gradient(
+        to bottom,
+        var(--color-page-bg-top, #eee),
+        var(--color-page-bg-bottom, #fff)
+    );
+
+    @include abstract.for-desktop {
+        display: block;
+        position: fixed;
+        width: 1000px;
+        height: calc(100% - 40px);
+        bottom: 0;
+        z-index: -9;
+        left: calc((100% - 1000px) / 2);
+    }
+}
--- a/slt/css/layout/_pageheader.scss
+++ b/slt/css/layout/_pageheader.scss
@@ -0,0 +1,16 @@
+@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 {
+        align-items: center;
+    }
+}
--- a/slt/css/layout/_side-images.scss
+++ b/slt/css/layout/_side-images.scss
@@ -0,0 +1,25 @@
+@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;
+        background-image: var(--image-left-side, none);
+    }
+
+    #right-side-image {
+        right: 0;
+        background-image: var(--image-right-side, none);
+    }
+}
--- a/slt/css/layout/_topmenu.scss
+++ b/slt/css/layout/_topmenu.scss
@@ -0,0 +1,220 @@
+@use '../abstract/' as abstract;
+
+#topmenu-div {
+    @include abstract.for-desktop {
+        position: sticky;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+    }
+
+    color: var(--color-fg-top, #fff);
+    background-color: var(--color-bg-top, #000);
+}
+
+#topmenu {
+    display: none;
+    font-weight: bold;
+    text-align: center;
+
+    @include abstract.for-desktop {
+        display: flex;
+        width: 100%;
+        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;
+        color: var(--color-fg-top, #fff);
+        background-color: var(--color-bg-top, #000);
+
+        @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;
+            }
+
+            &:hover,
+            &:focus {
+                color: var(--color-fg-top-hover, #000);
+                background-color: var(--color-bg-top-hover, #aaa);
+            }
+
+            &.active {
+                color: var(--color-fg-top-dark, #000);
+                background-color: var(--color-bg-top-dark, #aaa);
+            }
+
+            > .mod-menu__sub {
+                position: absolute;
+                display: none;
+
+                @include abstract.for-desktop {
+                    margin: 0 20px 10px 0;
+                    border: none;
+                    padding: 0;
+                }
+
+                color: var(--color-fg-top-sub);
+                background-color: var(--color-bg-top-sub);
+                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+
+                > 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,
+                    &:focus {
+                        color: var(--color-fg-top-sub-hover, #000);
+                        background-color: var(--color-bg-top-sub-hover, #aaa);
+                    }
+
+                    &:hover > a {
+                        text-decoration: none;
+                    }
+
+                    &.current {
+                        color: var(--color-fg-top-dark, #000);
+                        background-color: var(--color-bg-top-dark, #aaa);
+                    }
+                }
+            }
+
+            &.active > .mod-menu__sub > li:hover {
+                color: var(--color-fg-top-dark);
+                background-color: var(--color-bg-top-dark);
+            }
+
+            &:hover > .mod-menu__sub {
+                display: block;
+            }
+        }
+    }
+
+    @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;
+    }
+}
+
+a.facebook {
+    img {
+        display: none;
+        height: 25px;
+
+        @include abstract.for-desktop {
+            display: inline;
+        }
+    }
+
+    > span.image-title {
+        @include abstract.for-desktop {
+            display: none;
+        }
+    }
+}
+
+:root {
+    --color-fg-top-hover: #000;
+    --color-bg-top-hover: #ccc;
+    --color-fg-top-sub: #000;
+    --color-bg-top-sub: #eee;
+    --color-fg-top-sub-hover: #000;
+    --color-bg-top-sub-hover: #ccc;
+}
--- a/slt/css/main.css
+++ b/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";
--- a/slt/css/mobile.css
+++ b/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);
-}*/
-
-
--- a/slt/css/style.scss
+++ b/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);
+} */
--- a/slt/css/visual.css
+++ b/slt/css/visual.css
@@ -1,153 +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;
-}
-
-.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;
-}
-
--- a/slt/html/com_contact/category/default_items.php
+++ b/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; ?>
-
--- a/slt/html/com_contact/category/index.html
+++ b/slt/html/com_contact/category/index.html
--- a/slt/html/com_contact/contact/default_address.php
+++ b/slt/html/com_contact/contact/default_address.php
@@ -3,122 +3,150 @@
 * @package     Joomla.Site
 * @subpackage  com_contact
 *
- * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
+ * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

 defined('_JEXEC') or die;

+use Joomla\CMS\Language\Text;
+use Joomla\CMS\String\PunycodeHelper;
+
+$icon = $this->params->get('contact_icons') == 0;
+
 /**
 * 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">
+<dl class="com-contact__address 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)) : ?>
+		($this->item->address || $this->item->suburb  || $this->item->state || $this->item->country || $this->item->postcode)) : ?>
 		<dt>
-			<span class="<?php echo $this->params->get('marker_class'); ?>">
-				<?php echo $this->params->get('marker_address'); ?>
-			</span>
+			<?php if ($icon && !$this->params->get('marker_address')) : ?>
+				<span class="icon-address" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('COM_CONTACT_ADDRESS'); ?></span>
+			<?php else : ?>
+				<span class="<?php echo $this->params->get('marker_class'); ?>">
+					<?php echo $this->params->get('marker_address'); ?>
+				</span>
+			<?php endif; ?>
 		</dt>

-		<?php if ($this->contact->address && $this->params->get('show_street_address')) : ?>
+		<?php if ($this->item->address && $this->params->get('show_street_address')) : ?>
 			<dd>
 				<span class="contact-street" itemprop="streetAddress">
-					<?php echo nl2br($this->contact->address); ?>
-					<br />
+					<?php echo nl2br($this->item->address, false); ?>
 				</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')) : ?>
+        <?php if ($this->item->postcode && $this->params->get('show_postcode')) : ?>
+            <dd>
+                <span class="contact-postcode" itemprop="postalCode">
+                    <?php echo $this->item->postcode; ?>
+                </span>
+                <?php if ($this->item->suburb && $this->params->get('show_suburb')) : ?>
+                    <span class="contact-suburb" itemprop="addressLocality">
+                        <?php echo $this->item->suburb; ?>
+                    </span>
+                <?php endif; ?>
+            </dd>
+        <?php endif; ?>
+		<?php if ($this->item->state && $this->params->get('show_state')) : ?>
 			<dd>
 				<span class="contact-state" itemprop="addressRegion">
-					<?php echo $this->contact->state; ?>
-					<br />
+					<?php echo $this->item->state; ?>
 				</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 if ($this->item->country && $this->params->get('show_country')) : ?>
+			<dd>
+				<span class="contact-country" itemprop="addressCountry">
+					<?php echo $this->item->country; ?>
+				</span>
+			</dd>
 		<?php endif; ?>
 	<?php endif; ?>

-<?php if ($this->contact->email_to && $this->params->get('show_email')) : ?>
+<?php if ($this->item->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>
+		<?php if ($icon && !$this->params->get('marker_email')) : ?>
+			<span class="icon-envelope" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('COM_CONTACT_EMAIL_LABEL'); ?></span>
+		<?php else : ?>
+			<span class="<?php echo $this->params->get('marker_class'); ?>">
+				<?php echo $this->params->get('marker_email'); ?>
+			</span>
+		<?php endif; ?>
 	</dt>
 	<dd>
 		<span class="contact-emailto">
-			<?php echo $this->contact->email_to; ?>
+			<?php echo $this->item->email_to; ?>
 		</span>
 	</dd>
 <?php endif; ?>

-<?php if ($this->contact->telephone && $this->params->get('show_telephone')) : ?>
+<?php if ($this->item->telephone && $this->params->get('show_telephone')) : ?>
 	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-			<?php echo $this->params->get('marker_telephone'); ?>
-		</span>
+		<?php if ($icon && !$this->params->get('marker_telephone')) : ?>
+				<span class="icon-phone" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('COM_CONTACT_TELEPHONE'); ?></span>
+		<?php else : ?>
+			<span class="<?php echo $this->params->get('marker_class'); ?>">
+				<?php echo $this->params->get('marker_telephone'); ?>
+			</span>
+		<?php endif; ?>
 	</dt>
 	<dd>
 		<span class="contact-telephone" itemprop="telephone">
-			<?php echo $this->contact->telephone; ?>
+			<?php echo $this->item->telephone; ?>
 		</span>
 	</dd>
 <?php endif; ?>
-<?php if ($this->contact->fax && $this->params->get('show_fax')) : ?>
+<?php if ($this->item->fax && $this->params->get('show_fax')) : ?>
 	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-			<?php echo $this->params->get('marker_fax'); ?>
-		</span>
+		<?php if ($icon && !$this->params->get('marker_fax')) : ?>
+			<span class="icon-fax" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('COM_CONTACT_FAX'); ?></span>
+		<?php else : ?>
+			<span class="<?php echo $this->params->get('marker_class'); ?>">
+				<?php echo $this->params->get('marker_fax'); ?>
+			</span>
+		<?php endif; ?>
 	</dt>
 	<dd>
 		<span class="contact-fax" itemprop="faxNumber">
-		<?php echo $this->contact->fax; ?>
+		<?php echo $this->item->fax; ?>
 		</span>
 	</dd>
 <?php endif; ?>
-<?php if ($this->contact->mobile && $this->params->get('show_mobile')) : ?>
+<?php if ($this->item->mobile && $this->params->get('show_mobile')) : ?>
 	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-			<?php echo $this->params->get('marker_mobile'); ?>
-		</span>
+		<?php if ($icon && !$this->params->get('marker_mobile')) : ?>
+			<span class="icon-mobile" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('COM_CONTACT_MOBILE'); ?></span>
+		<?php else : ?>
+			<span class="<?php echo $this->params->get('marker_class'); ?>">
+				<?php echo $this->params->get('marker_mobile'); ?>
+			</span>
+		<?php endif; ?>
 	</dt>
 	<dd>
 		<span class="contact-mobile" itemprop="telephone">
-			<?php echo $this->contact->mobile; ?>
+			<?php echo $this->item->mobile; ?>
 		</span>
 	</dd>
 <?php endif; ?>
-<?php if ($this->contact->webpage && $this->params->get('show_webpage')) : ?>
+<?php if ($this->item->webpage && $this->params->get('show_webpage')) : ?>
 	<dt>
-		<span class="<?php echo $this->params->get('marker_class'); ?>">
-		</span>
+		<?php if ($icon && !$this->params->get('marker_webpage')) : ?>
+			<span class="icon-home" aria-hidden="true"></span><span class="visually-hidden"><?php echo Text::_('COM_CONTACT_WEBPAGE'); ?></span>
+		<?php else : ?>
+			<span class="<?php echo $this->params->get('marker_class'); ?>">
+				<?php echo $this->params->get('marker_webpage'); ?>
+			</span>
+		<?php endif; ?>
 	</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>
+			<a href="<?php echo $this->item->webpage; ?>" target="_blank" rel="noopener noreferrer" itemprop="url">
+			<?php echo PunycodeHelper::urlToUTF8($this->item->webpage); ?></a>
 		</span>
 	</dd>
 <?php endif; ?>
--- a/slt/html/com_contact/contact/index.html
+++ b/slt/html/com_contact/contact/index.html
--- a/slt/html/com_contact/index.html
+++ b/slt/html/com_contact/index.html
--- a/slt/html/com_content/archive/index.html
+++ b/slt/html/com_content/archive/index.html
--- a/slt/html/com_content/index.html
+++ b/slt/html/com_content/index.html
--- a/slt/html/index.html
+++ b/slt/html/index.html
--- a/slt/index.php
+++ b/slt/index.php
@@ -1,9 +1,12 @@
 <?php
 // No direct access.
-defined('_JEXEC') or die;
+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,31 +15,30 @@ 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', 'templates/system/css/system.css', [
+    'version' => 'auto',
+    'relative' => false,
+]);
+JHtml::_('stylesheet', 'style.css', ['version' => 'auto', 'relative' => true]);
+
+$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));
+JHtml::_('script', 'mobile.js', ['version' => 'auto', 'relative' => true]);

 // Check for a custom CSS file
-JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
+JHtml::_('stylesheet', 'user.css', ['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'} . "\")") ;
-
+JHtml::_('script', 'user.js', ['version' => 'auto', 'relative' => true]);
 ?>

 <?php echo '<!DOCTYPE html>'; ?>
@@ -45,174 +47,7 @@ $rightImageValue = (empty($this->params{'imgright'}) ? "none" : "url(\"" . $this
 <head>

 <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); 
-?>
-->
-
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>

@@ -225,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'>
 	
@@ -235,26 +70,32 @@ 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',
+      ['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'>
@@ -265,7 +106,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>
--- a/slt/js/mobile.js
+++ b/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','');
 				
 			}
 		});
--- a/slt/language/en-GB/en-GB.tpl_slt.ini
+++ b/slt/language/en-GB/en-GB.tpl_slt.ini
@@ -11,17 +11,24 @@ TPL_SLT_LINK_COLOR_MAIN="Foreground color of links in main text"
 TPL_SLT_FOREGROUND_COLOR_MAIN="Foreground color of main text"
 TPL_SLT_BACKGROUND_COLOR_MAIN_TOP="Background color at top of gradient"
 TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM="Background color at bottom of gradient"
-		
-TPL_SLT_BACKGROUND_COLOR_1="Background color of menu"
-TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry"
-TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry"
+
 TPL_SLT_FOREGROUND_COLOR_1="Foreground color of menu"
 TPL_SLT_FOREGROUND_COLOR_2="Foreground color of selected menu entry"
 TPL_SLT_FOREGROUND_COLOR_3="Foreground color of active menu entry"
+
 TPL_SLT_LINK_COLOR_1="Foreground link color of menu"
 TPL_SLT_LINK_COLOR_2="Foreground link color of selected menu entry"
 TPL_SLT_LINK_COLOR_3="Foreground link color of active menu entry"

+TPL_SLT_BACKGROUND_COLOR_1="Background color of menu"
+TPL_SLT_BACKGROUND_COLOR_2="Background color of selected menu entry"
+TPL_SLT_BACKGROUND_COLOR_3="Background color of active menu entry"
+
+TPL_SLT_FOREGROUND_EFFECT_COLOR="Foreground effect color"
+TPL_SLT_BACKGROUND_EFFECT_COLOR="Background effect color"
+TPL_SLT_FOREGROUND_EFFECT_HEADER_COLOR="Foreground effect color for headers"
+TPL_SLT_BACKGROUND_EFFECT_HEADER_COLOR="Background effect color for headers"
+
 TPL_SLT_BACKGROUND_COLOR_AT_SIDES="Background Color at the Sides"
 TPL_SLT_LEFT_BACKGROUND_IMAGE="Left background image"
 TPL_SLT_RIGHT_BACKGROUND_IMAGE="Right background image"
--- a/slt/package-lock.json
+++ b/slt/package-lock.json
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Christian Wolf	f6de133bb7	Create new release	2022-08-18 16:37:20 +02:00
Christian Wolf	3170dffa80	Fix coloring of pagination buttons	2022-08-18 16:36:33 +02:00
Christian Wolf	3d7bc85a77	Add option to specify link color in headers	2022-08-18 16:30:55 +02:00
Christian Wolf	539ef0f3d9	Enlarge top margin	2022-08-18 15:15:31 +02:00
Christian Wolf	a154272171	Create RC for 1.1.2	2022-08-18 12:41:48 +02:00
Christian Wolf	ff336b80e9	Fix styles	2022-08-18 12:38:56 +02:00
Christian Wolf	b21c7a193e	Corrected contact view	2022-08-18 12:33:32 +02:00
Christian Wolf	724aadb276	Corrected some color stylings regarding the top menu	2022-08-18 11:46:37 +02:00
Christian Wolf	cdd249b802	Provide classes for left and right floating elements	2022-08-18 11:06:56 +02:00
Christian Wolf	60d946a17c	Merge pull request 'Update NPM versions' (#2 ) from dev/update-npm into master Reviewed-on: #2	2022-08-18 08:58:45 +00:00
Christian Wolf	d4ac8abce7	Update stylelint config major update	2022-08-18 10:57:11 +02:00
Christian Wolf	2bc93a8133	Update auto-updateable packages	2022-08-18 10:54:13 +02:00
Christian Wolf	04772c269f	Crete new RC with reduced configuration	2022-04-15 20:40:06 +02:00
Christian Wolf	b230575be8	Removed obsolete configuration settings	2022-04-15 20:39:09 +02:00
Christian Wolf	825cca83a2	Create release candidate	2022-04-15 17:28:35 +02:00
Christian Wolf	fc1a8c12bf	Merge branch 'fix/mobile-menu-colors' First approach to fix #702 in the temaplte by reducing complexity	2022-04-15 17:23:29 +02:00
Christian Wolf	1e6b737d3c	Corrected all code styles that need manual intervention	2022-04-15 17:18:46 +02:00
Christian Wolf	def6d36a43	Automatic fixes	2022-04-15 16:54:52 +02:00
Christian Wolf	bc3a0ad36d	Moved dynamic styles to static SCSS using valiables	2022-04-15 16:52:10 +02:00
Christian Wolf	c20a170dc3	Adding all style parameters into CSS variables	2022-04-15 14:41:27 +02:00
Christian Wolf	d31cba17b9	Definition of effect color	2022-04-15 14:38:33 +02:00
Christian Wolf	6441682afe	Simplified menu coloring This reduces the number of required colors and makes desktop and mobile colors closer. Partly fixes #702	2022-04-15 10:22:05 +02:00
Christian Wolf	7bfd331aa1	Added some comments and restructuring language file	2022-04-15 10:20:18 +02:00
Christian Wolf	e3cb982ee2	Enhanced administrator menu description	2022-04-15 10:18:39 +02:00
Christian Wolf	803add1c45	Corrected indendation in XML manifest	2022-04-15 08:23:23 +02:00
Christian Wolf	4d9151fb74	Remove obsolete and outdated file	2022-04-15 08:22:07 +02:00
Christian Wolf	9b8dd1343c	Correct margins in mobile menu	2022-04-10 16:47:44 +02:00
Christian Wolf	d1086e1ec7	Merge branch 'dev/prettier'	2022-04-10 16:17:59 +02:00
Christian Wolf	bcedb8e58a	Run stylelint and prettier durting building	2022-04-10 16:17:32 +02:00
Christian Wolf	d8be862cb5	Install prettier and make it compatible with stylelint	2022-04-10 16:15:53 +02:00
Christian Wolf	3f60629d3b	Save some space where the slideshow would be if not present	2022-04-10 15:19:54 +02:00
Christian Wolf	58ce457c7f	Prevent horizontal overflow on all pages	2022-04-10 15:19:35 +02:00
Christian Wolf	572185b9de	Adding checksum to update scripts	2022-04-10 14:07:18 +02:00
Christian Wolf	61da9c72a6	Create fixing release	2022-04-10 13:53:58 +02:00
Christian Wolf	d4cb60c29c	Fix bug to show tables on desktop devices	2022-04-10 13:53:24 +02:00
Christian Wolf	9754c96984	Create release with new visual enhancements	2022-04-10 13:14:11 +02:00
Christian Wolf	63f7c8c2e5	Clean up some code	2022-04-10 13:12:10 +02:00
Christian Wolf	06d11a6e04	Removed typo in file name	2022-04-10 13:10:09 +02:00
Christian Wolf	1fc58e939e	Added code for responsive tables	2022-04-10 13:10:00 +02:00
Christian Wolf	5f904e323c	Create version 1.0.2	2022-04-09 22:40:13 +02:00
Christian Wolf	7f0a6a427a	Corrected styling of block layout	2022-04-09 22:39:24 +02:00
Christian Wolf	fb5df775ea	Create patch version to remove bugs	2022-04-09 19:56:57 +02:00
Christian Wolf	7026a637a3	Remove breaking overrides of PHP pages	2022-04-09 19:55:11 +02:00
Christian Wolf	a7942b2e1c	Merge pull request 'Migrate the template to Joomla 4' (#1 ) from dev/j4-compatibility into master Reviewed-on: #1	2022-04-09 14:57:51 +00:00
Christian Wolf	c58e1f2bba	Correct release scripts	2022-04-09 16:54:31 +02:00
Christian Wolf	17070595ab	Create first version	2022-04-09 14:13:33 +02:00
Christian Wolf	c686c3dcf9	Allow building different versions for different target platforms	2022-04-09 12:40:04 +02:00
Christian Wolf	bb7365409a	Fixed and cleaned PHP scripts	2022-04-09 12:00:02 +02:00
Christian Wolf	72c41d33d2	Fix mobile menu	2022-04-09 11:35:16 +02:00
Christian Wolf	ace8ca68a3	Fix some issues with stylelint	2022-04-09 11:23:12 +02:00
Christian Wolf	6bf5dee08f	Update NPM packages	2022-04-09 11:22:30 +02:00
Christian Wolf	0c24b915a6	Corrected top menu styling using sticky	2022-04-09 11:22:07 +02:00
Christian Wolf	1afec10f28	Make Stylelint happy	2022-04-07 07:58:41 +02:00
Christian Wolf	c2357284cc	Drop external CSS file for sake of faster development	2022-04-07 07:50:54 +02:00
Christian Wolf	f1d29cb4bb	Make icons reappear	2022-04-07 07:50:13 +02:00
Christian Wolf	7480657110	Removed no longer supported behavior helper	2022-04-07 07:49:58 +02:00
Christian Wolf	07c71a6022	Corrected names of menu entries in CSS	2022-04-07 07:48:37 +02:00
Christian Wolf	0067e22bbe	Create fixup version 0.0.10	2022-04-04 14:21:26 +02:00
Christian Wolf	0b4da2236a	Clean up a bit	2022-04-04 14:16:17 +02:00
Christian Wolf	aff7e2ed90	Merge branch 'maint/update-scripts'	2022-04-04 14:06:46 +02:00
Christian Wolf	114ffbd7fa	Remove template from git source code	2022-04-04 14:02:14 +02:00
Christian Wolf	2ba77e7a9e	Automatically create new template details XML file	2022-04-04 14:01:18 +02:00
Christian Wolf	f809bbff20	Sort the versions in the output XML according to their version	2022-04-04 14:00:40 +02:00
Christian Wolf	68f2edc3be	Created new release	2021-12-06 10:11:20 +01:00
Christian Wolf	744fca9f7c	Created dummy index files	2021-12-04 10:22:05 +01:00
Christian Wolf	113c7eef33	Corrected last changes by introducing new module position This needs modifiaction of the backend configuration	2021-12-04 10:15:43 +01:00
Christian Wolf	a2526182f5	Create basic routine to automatically build a new release	2021-12-03 18:08:39 +01:00
Christian Wolf	07661dcb3e	Removed issue in override	2021-12-03 17:45:07 +01:00
Christian Wolf	e1ceea4459	Merge branch 'dev/scss'	2021-12-03 17:44:47 +01:00
Christian Wolf	3a6bbf59d5	Restructured styles to be compatible to stylelint requirements	2021-12-03 17:44:21 +01:00
Christian Wolf	33f789994a	Removed unnecessary visual effects	2021-12-03 14:43:38 +01:00
Christian Wolf	54fd0a3c10	Corrected code styling	2021-12-03 14:43:12 +01:00
Christian Wolf	5073f8ac71	Removed optical bug in SCSS files	2021-12-03 14:41:11 +01:00
Christian Wolf	f9e06732c4	Removed obsolete css files	2021-12-03 07:51:32 +01:00
Christian Wolf	f8430eb9f2	Rebuilt style using SCSS structures	2021-12-02 15:22:18 +01:00
Christian Wolf	e45ddbfa53	Corrected automatically fixable style issues	2021-12-01 20:41:43 +01:00
Christian Wolf	446339ac47	Added and merged desktop styles	2021-12-01 20:41:10 +01:00
Christian Wolf	917ca0e010	Styled formally the codes	2021-12-01 17:57:55 +01:00
Christian Wolf	37afd3d03d	Created basic structure for SCSS styling	2021-12-01 17:57:39 +01:00
Christian Wolf	916dd08835	Added further parts form user.css into template	2020-12-18 12:15:01 +01:00
Christian Wolf	f0bc626f4d	Corrections for v0.0.6	2020-12-18 11:36:47 +01:00
Christian Wolf	5a9d35fe9d	Add hyphens to justifies content	2020-12-18 11:21:12 +01:00
Christian Wolf	614c815a67	Changed a bit the CSS of icmoon implementation to get it running smoothly	2019-09-13 16:51:08 +02:00