Crete new RC with reduced configuration

First approach to fix #702 in the temaplte by reducing complexity

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

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

.settings/org.eclipse.php.core.prefs

@@ -1,2 +0,0 @@
-eclipse.preferences.version=1
-include_path=0;/template

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

Makefile

@@ -17,6 +17,7 @@ package: $(PACKAGES)
 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: npm slt/templateDetails.xml

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>

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>

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>

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>

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>

res/templateDetails.tmpl.xml

@@ -50,39 +50,45 @@
   <config>
     <fields name="params">
       <fieldset name="advanced">
-		<field name="titlepage" type="list" default="0" label="Switch to titlepage mode" description="">
+        <field name="titlepage" type="list" default="0" label="Switch to titlepage mode" description="">
-			<option value="0">No</option>
+          <option value="0">No</option>
-			<option value="1">Yes</option>
+          <option value="1">Yes</option>
-		</field>
+        </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="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="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="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="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>
+        <field name="topbgcolor3" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_TOP_LIGHT'></field>
       </fieldset>
       <fieldset name='TPL_SLT_COLORS_MAIN'>
-		<!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
+        <field type="spacer" name="menu-colors" label="Top-menu colors" />
-		<field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
+        <!--<field name="fgcolor1" type='color' default='#fff' label='TPL_SLT_FOREGROUND_COLOR_1'></field>-->
-		<field name="mainlicolor" type='color' default='#222' label='TPL_SLT_LINK_COLOR_MAIN'></field>
+        <field name="mainfgcolor" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_MAIN'></field>
-		<field name="mainbgcolortop" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_MAIN_TOP'></field>
+        <field name="mainlicolor" type='color' default='#222' label='TPL_SLT_LINK_COLOR_MAIN'></field>
-		<field name="mainbgcolorbot" type='color' default='#fff' label='TPL_SLT_BACKGROUND_COLOR_MAIN_BOTTOM'></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 name="fgcolor1" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_1'></field>
+        
-		<field name="licolor1" type='color' default='#222' label='TPL_SLT_LINK_COLOR_1'></field>
+        <field type="spacer" name="menu-colors" label="Menu colors" />
-		<field name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
+        <field name="fgcolor1" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_1'></field>
-		<field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
+        <field name="bgcolor1" type='color' default='#ddd' label='TPL_SLT_BACKGROUND_COLOR_1' format='rgba'></field>
-		<field name="licolor2" type='color' default='#222' label='TPL_SLT_LINK_COLOR_2'></field>
+        <field type="spacer" name="spacer1" hr="true" />
-		<field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
+        <field name="fgcolor2" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_2'></field>
-		<field name="fgcolor3" type='color' default='#000' label='TPL_SLT_FOREGROUND_COLOR_3'></field>
+        <field name="bgcolor2" type='color' default='#bbb' label='TPL_SLT_BACKGROUND_COLOR_2' format='rgba'></field>
-		<field name="licolor3" type='color' default='#222' label='TPL_SLT_LINK_COLOR_3'></field>
+        
-		<field name="bgcolor3" type='color' default='#888' label='TPL_SLT_BACKGROUND_COLOR_3' 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="bgcolorside" type='color' default='#ebebeb' label='TPL_SLT_BACKGROUND_COLOR_AT_SIDES'></field>
+        <field name="bgeffect" type="color" default="#eee" label="TPL_SLT_BACKGROUND_EFFECT_COLOR"></field>
-		<field name="imgleft" type='media' directory='' label='TPL_SLT_LEFT_BACKGROUND_IMAGE'></field>
+        <field type="spacer" name="spacer3" hr="true" />
-		<field name="imgright" type='media' directory='' label='TPL_SLT_RIGHT_BACKGROUND_IMAGE'></field>
+        <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>

res/update.template

@@ -17,4 +17,5 @@
 		</tags>
 		<maintainer>Christian Wolf</maintainer>
 		<targetplatform name="joomla" version="4[.].*"/>
+		$SUMS
 	</update>

scripts/create-release.sh

@@ -21,8 +21,11 @@ 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"

serial/minor

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

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>

slt/.stylelintrc.json

@@ -6,6 +6,8 @@
     ],
     "rules": {
         "indentation": 4,
-        "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$"
+        "selector-class-pattern": "^([a-z][a-z0-9]*)((-|__)[a-z0-9]+)*$",
+        "string-quotes": "single",
+        "declaration-colon-newline-after": null
     }
   }

slt/css/abstract/_index.scss

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

slt/css/abstract/_responsive.scss

@@ -11,3 +11,9 @@
         @content;
     }
 }
+
+@mixin for-narrow-screen {
+    @media screen and (max-width: 800px) {
+        @content;
+    }
+}

slt/css/components/_article.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 .article-info {
     font-size: smaller;
@@ -20,7 +20,7 @@
             border: none;
             text-shadow: unset;
 
-            > span[class^="icon-"] {
+            > span[class^='icon-'] {
                 display: none;
             }
         }

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;
+        }
+    }
+}

slt/css/components/_index.scss

@@ -1,3 +1,9 @@
-@use "slideshow";
+@use 'slideshow';
-@use "article";
+@use 'article';
-@use "current-page-manu";
+@use 'current-page-menu';
+@use 'result-table';
+@use 'presseberichte';
+@use 'verbandstag';
+@use 'vereine';
+@use 'contact-list';
+@use 'read-more';

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: ';
+                }
+            }
+        }
+    }
+}

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);
+    }
+}

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;
+    }
+}

slt/css/components/_slideshow.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #slideshow {
     flex: 1;
@@ -6,5 +6,9 @@
 
     @include abstract.for-desktop {
         display: inline-block;
+
+        > div {
+            margin: 20px;
+        }
     }
 }

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;
+            }
+        }
+    }
+}

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;
+        }
+    }
+}

slt/css/core/_core.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 body {
     margin: 0;
@@ -6,6 +6,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    background-color: var(--color-side-background, #fff);
 
     /*    padding: 0px 20px 10px 20px; */
     padding: 0;
@@ -23,6 +24,13 @@ a {
     text-decoration: none;
 }
 
+a,
+a:hover,
+a:active,
+a:visited {
+    color: var(--color-main-link, #000);
+}
+
 p {
     text-align: justify;
     hyphens: auto;

slt/css/core/_default-classes.scss

@@ -21,10 +21,35 @@ li.row-fluid {
     padding-bottom: 0;
 }
 
-.row-striped .row-fluid:nth-child(n),
+// .row-striped .row-fluid:nth-child(n),
-.list-striped li:nth-child(n),
+// .list-striped li:nth-child(n),
-.table-striped tbody > tr:nth-child(n) > td {
+// .table-striped tbody > tr:nth-child(n) > td {
-    background-color: inherit;
+//     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 {

slt/css/core/_index.scss

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

slt/css/dynamic-styles.css.php

@@ -1,9 +1,9 @@
 <?php
 
-define( '_JEXEC', 1 );
+define('_JEXEC', 1);
 define('JPATH_BASE', '../../../');
-require_once ( JPATH_BASE .'/includes/defines.php' );
+require_once JPATH_BASE . '/includes/defines.php';
-require_once ( JPATH_BASE .'/includes/framework.php' );
+require_once JPATH_BASE . '/includes/framework.php';
 
 $container = \Joomla\CMS\Factory::getContainer();
 $container->alias(\Joomla\Session\SessionInterface::class, 'session.web.site');
@@ -11,10 +11,10 @@ $mainframe = $container->get(\Joomla\CMS\Application\SiteApplication::class);
 $template = $mainframe->getTemplate(true);
 $params = $template->params;
 
-header("content-type: text/css");
+header('content-type: text/css');
 
 // duration of cached content (1 hour)
-$offset = 60 * 60 ;
+$offset = 60 * 60;
 // cache control to process
 header("Cache-Control: must-revalidate, max-age=$offset, public");
 
@@ -23,165 +23,54 @@ header("Cache-Control: must-revalidate, max-age=$offset, public");
 // send cache expiration header to broswer
 // header($ExpStr);
 
-$leftImageValue  = (empty($params['imgleft']) ? "none" : "url(\"" . JPATH_BASE. "/" . $params['imgleft'] . "\")") ; 
+$leftImageValue = empty($params['imgleft'])
-$rightImageValue = (empty($params['imgright']) ? "none" : "url(\"" . JPATH_BASE . "/" . $params['imgright'] . "\")") 
+    ? 'none'
-
+    : "url(\"" . JPATH_BASE . $params['imgleft'] . "\")";
+$rightImageValue = empty($params['imgright'])
+    ? 'none'
+    : "url(\"" . JPATH_BASE . $params['imgright'] . "\")";
 ?>
 
-<?php
+<?php if ($params['titlepage'] === '1') {
-if($params['titlepage'] === '1')
+    echo "#left-menu { display: none; }\n";
-{
+} ?>
-?>
-#left-menu
-{
-	display: none;
-}
-<?php 
-}
-?>
 
-body
+:root {
-{
+	--color-fg-top: <?php echo $params['topfgcolor1']; ?>;
-	background-color: <?php echo $params['bgcolorside']; ?>;
+	--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-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; ?>;
 }
 
-a, a:hover, a:active, a:visited
+<?php // Stop execution here, the rest is for debugging
-{
-	color: <?php echo $params['mainlicolor']; ?>;
-}
 
-#page-bg
+exit(); ?>
-{
-	background-image: linear-gradient(to bottom, <?php echo $params['mainbgcolortop'] . ',' . $params['mainbgcolorbot']; ?>);
-	color: <?php echo $params['mainfgcolor']; ?>;
-}
 
-#mobile-menu li > a {
+:root {
-	background-color: <?php echo $params['bgcolor2']; ?>;
+	--color-effect: blue;
-    color: <?php echo $params['licolor2']; ?>;
+	--color-effect-background: red;
-}
+	--color-effect-header: yellow;
-
+	--color-effect-background-header: green;
-#mobile-menu li.current > a {
-	background-color: <?php echo $params['bgcolor3']; ?>;
-    color: <?php echo $params['licolor3']; ?>;
-}
-
-ul.mod-menu {
-	background-color: <?php echo $params['bgcolor1']; ?>;
-	color: <?php echo $params['fgcolor1']; ?>;
-}
-
-#mobile-menu {
-	background-color: <?php echo $params['bgcolor1']; ?>;
-	color: <?php echo $params['fgcolor1']; ?>;
-}
-
-ul.mod-menu li.current > a,
-ul.mod-menu li.current:hover > a
-{
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['licolor2']; ?>;
-}
-
-ul.nav > li > a:hover,
-ul.nav > li > a:focus,
-ul.mod-menu__sub > li > a:hover,
-ul.mod-menu__sub > li > a:focus
-{
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['licolor3']; ?>;
-}
-
-#topmenu,
-#topmenu > ul.mod-menu {
-  background-color: <?php echo $params['topbgcolor1']; ?>;
-  color: <?php echo $params['topfgcolor1']; ?>;
-}
-
-#topmenu .mod-menu__sub > li.current
-
-{
-  background-color: <?php echo $params['topbgcolor2']; ?>;
-  color: <?php echo $params['topfgcolor2']; ?>;
-}
-
-#topmenu .mod-menu__sub {
-  background-color: <?php echo $params['topbgcolor3']; ?>;
-  color: <?php echo $params['topfgcolor3']; ?>;
-}
-
-#topmenu .nav > li:hover,
-#topmenu .nav > li:focus,
-#topmenu .nav > li.active,
-#topmenu .mod-menu__sub > li:hover,
-#topmenu .mod-menu__sub > li:focus
-{
-  background-color: <?php echo $params['topbgcolor2']; ?>;
-  color: <?php echo $params['topfgcolor2']; ?>;
-}
-
-#left-side-image
-{
-	background-image: <?php echo $leftImageValue; ?>;
-}
-
-#right-side-image
-{
-	background-image: <?php echo $rightImageValue; ?>;
-}
-
-.list-striped li:nth-child(odd),
-.row-striped .row-fluid:nth-child(odd),
-.table-striped > tbody > tr:nth-child(odd)
-{
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['fgcolor2']; ?>;
-}
-.row-striped .row-fluid:nth-child(odd) a,
-.table-striped > tbody > tr:nth-child(odd) a
-{
-	color: <?php echo $params['licolor2']; ?>;
-}
-.list-striped li:hover,
-.row-striped .row-fluid:hover,
-.table-striped > tbody > tr:hover
-{
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-.row-striped .row-fluid:hover a,
-.table-striped > tbody > tr:hover a
-{
-	color: <?php echo $params['licolor3']; ?>;
-}
-.table-striped > thead > tr
-{
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-
-table.alternating tr:nth-child(even) {
-	background-color: <?php echo $params['bgcolor2']; ?>;
-	color: <?php echo $params['fgcolor2']; ?>;
-}
-table.alternating tr:nth-child(even) a
-{
-	color: <?php echo $params['licolor2']; ?>;
-}
-table.alternating tr:nth-child(1) {
-	background-color: <?php echo $params['bgcolor3']; ?>;
-	color: <?php echo $params['fgcolor3']; ?>;
-}
-table.alternating tr:nth-child(1) a {
-	color: <?php echo $params['licolor3']; ?>;
-}
-.readmore > .btn
-{
-	color: <?php echo $params['fgcolor1'];?>;
-	background-color: <?php echo $params['bgcolor1']; ?>;
-}
-.readmore > .btn:hover
-{
-	color: <?php echo $params['fgcolor3'];?>;
-	background-color: <?php echo $params['bgcolor3']; ?>;
 }

slt/css/layout/_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;
+        }
+    }
+}

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;
+}

slt/css/layout/_footer.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #impressum {
     flex: 0 0 auto;

slt/css/layout/_index.scss

@@ -1,9 +1,12 @@
-@use "page-layout";
+@use 'page-layout';
-@use "topmenu";
+@use 'topmenu';
-@use "leftmenu";
+@use 'leftmenu';
-@use "footer";
+@use 'footer';
-@use "mobile-menu";
+@use 'mobile-menu';
-@use "menu";
+@use 'menu';
-@use "pageheader";
+@use 'pageheader';
-@use "side-images";
+@use 'side-images';
-@use "main-content";
+@use 'main-content';
+@use 'blog';
+@use 'mobile-table';
+@use 'alternating-table';

slt/css/layout/_leftmenu.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #left-menu {
     display: none;

slt/css/layout/_main-content.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #content {
     flex: 1 0 auto;

slt/css/layout/_menu.scss

@@ -1,22 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
-
-.nav {
-    font-size: inherit;
-
-    a {
-        color: inherit;
-    }
-}
-
-.mod-menu__sub {
-    font-size: small;
-
-    > li > a {
-        @include abstract.for-desktop {
-            display: block;
-        }
-    }
-}
 
 .nav,
 .mod-menu__sub {
@@ -24,14 +6,42 @@
 
     > li {
         display: block;
+    }
+}
 
-        > .mod-menu__sub {
+.nav {
-            padding-left: 10px;
+    font-size: inherit;
-            margin-left: 10px;
+    color: var(--color-menu, #000);
+    background-color: var(--color-menu-background, #eee);
 
-            /* border-left: solid gray 1px; */
+    a {
+        color: inherit;
+    }
 
-            /* TODO */
+    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;
+            }
         }
     }
 }

slt/css/layout/_mobile-menu.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #mobile-menu,
 #content {
@@ -23,39 +23,45 @@
         padding-right: 0;
     }
 
-    li > a {
+    li {
-        margin: 5px 0;
+        > a {
-        padding: 10px 5px;
+            margin: 5px 0;
-        display: block;
+            padding: 10px;
-        flex: 0;
+            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;
     }
 
-    li {
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-
-    .mod-menu__sub > li {
-        margin: 0;
-    }
-
-    li > ul.nav {
-        margin-left: -5px;
-        margin-right: -5px;
-    }
-
-    li ul {
-        border: none;
-    }
-
     > ul.mod-menu {
         background-color: initial;
         color: initial;

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;
+        }
+    }
+}

slt/css/layout/_page-layout.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #page-div {
     width: 100%;
@@ -36,6 +36,11 @@
 
 #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;

slt/css/layout/_pageheader.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 #header {
     flex: 0 0 auto;
@@ -11,7 +11,6 @@
     }
 
     > div {
-        margin: 20px;
         align-items: center;
     }
 }

slt/css/layout/_side-images.scss

@@ -1,4 +1,4 @@
-@use "../abstract" as abstract;
+@use '../abstract' as abstract;
 
 @include abstract.for-desktop {
     #left-side-image,
@@ -15,9 +15,11 @@
 
     #left-side-image {
         left: 0;
+        background-image: var(--image-left-side, none);
     }
 
     #right-side-image {
         right: 0;
+        background-image: var(--image-right-side, none);
     }
 }

slt/css/layout/_topmenu.scss

@@ -1,4 +1,16 @@
-@use "../abstract/" as abstract;
+@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;
@@ -7,7 +19,7 @@
 
     @include abstract.for-desktop {
         display: flex;
-        width: 100vw;
+        width: 100%;
         font-weight: bold;
         text-align: center;
 
@@ -38,6 +50,8 @@
         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;
@@ -70,6 +84,13 @@
                 background-color: inherit;
             }
 
+            &:hover,
+            &:focus,
+            &.active {
+                color: var(--color-fg-top-dark, #000);
+                background-color: var(--color-bg-top-dark, #aaa);
+            }
+
             > .mod-menu__sub {
                 position: absolute;
                 display: none;
@@ -80,6 +101,10 @@
                     padding: 0;
                 }
 
+                color: var(--color-fg-top-light, #000);
+                background-color: var(--color-bg-top-light, #ddd);
+                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+
                 > li {
                     @include abstract.for-desktop {
                         padding: 0 5px;
@@ -94,18 +119,26 @@
                         }
                     }
 
+                    &:hover,
+                    &:focus,
+                    &.active {
+                        color: var(--color-fg-top-dark, #000);
+                        background-color: var(--color-bg-top-dark, #aaa);
+                    }
+
                     &:hover > a {
                         text-decoration: none;
                     }
+
+                    &.current {
+                        color: var(--color-fg-top-dark, #000);
+                        background-color: var(--color-bg-top-dark, #aaa);
+                    }
                 }
             }
 
             &:hover > .mod-menu__sub {
                 display: block;
-
-                @include abstract.for-desktop {
-                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
-                }
             }
         }
     }
@@ -152,16 +185,6 @@
     }
 }
 
-#topmenu-div {
-    @include abstract.for-desktop {
-        position: sticky;
-        top: 0;
-        width: 100vw;
-        height: 40px;
-        z-index: 1;
-    }
-}
-
 a.facebook {
     img {
         display: none;

slt/css/style.scss

@@ -1,7 +1,7 @@
-@use "abstract";
+@use 'abstract';
-@use "core";
+@use 'core';
-@use "layout";
+@use 'layout';
-@use "components";
+@use 'components';
 
 /*
  * Debug

slt/index.php

@@ -1,6 +1,6 @@
 <?php
 // No direct access.
-defined('_JEXEC') or die;
+defined('_JEXEC') or die();
 
 use Joomla\CMS\Uri\Uri;
 
@@ -16,21 +16,29 @@ JHtml::_('bootstrap.loadCss', true, $this->direction);
 JHtml::_('jquery.framework');
 
 // Add Stylesheets
-JHtml::_('stylesheet', 'templates/system/css/system.css', array('version' => 'auto', 'relative' => false));
+JHtml::_('stylesheet', 'templates/system/css/system.css', [
-JHtml::_('stylesheet', 'style.css', array('version' => 'auto', 'relative' => true));
+    'version' => 'auto',
+    'relative' => false,
+]);
+JHtml::_('stylesheet', 'style.css', ['version' => 'auto', 'relative' => true]);
 
-$doc->addStyleSheet($this->baseurl.'/media/system/css/joomla-fontawesome.css');
+$doc->addStyleSheet(
-$doc->addStyleSheet($this->baseurl.'/templates/slt/css/dynamic-styles.css.php?Itemid=' . $app->input->getInt('Itemid'));
+    $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));
+JHtml::_('script', 'user.js', ['version' => 'auto', 'relative' => true]);
-
 ?>
 
 <?php echo '<!DOCTYPE html>'; ?>
@@ -62,7 +70,13 @@ JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
 			</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-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>

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"

slt/package-lock.json

@@ -8,6 +8,9 @@
       "name": "slt",
       "version": "0.0.9",
       "devDependencies": {
+        "@prettier/plugin-php": "^0.18.4",
+        "prettier": "^2.6.2",
+        "prettier-config-standard": "^5.0.0",
         "sass": "^1.44.0",
         "stylelint": "^14.1.0",
         "stylelint-config-standard-scss": "^3.0.0",
@@ -85,6 +88,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@prettier/plugin-php": {
+      "version": "0.18.4",
+      "resolved": "https://registry.npmjs.org/@prettier/plugin-php/-/plugin-php-0.18.4.tgz",
+      "integrity": "sha512-phnY20asLUpCSDXjCUN7FKGaZZTf1C+PSpTzGMOJ/UfIyD24sYJXCT8qqbcpp7rWI6ZsCsJiZcVnNmLFThx78Q==",
+      "dev": true,
+      "dependencies": {
+        "linguist-languages": "^7.5.1",
+        "mem": "^8.0.0",
+        "php-parser": "3.1.0-beta.5"
+      },
+      "peerDependencies": {
+        "prettier": "^1.15.0 || ^2.0.0"
+      }
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -970,6 +987,12 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linguist-languages": {
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/linguist-languages/-/linguist-languages-7.15.0.tgz",
+      "integrity": "sha512-qkSSNDjDDycZ2Wcw+GziNBB3nNo3ddYUInM/PL8Amgwbd9RQ/BKGj2/1d6mdxKgBFnUqZuaDbkIwkE4KUwwmtQ==",
+      "dev": true
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1006,6 +1029,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dev": true,
+      "dependencies": {
+        "p-defer": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -1028,6 +1063,22 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/mem": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
+      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
+      "dev": true,
+      "dependencies": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/mem?sponsor=1"
+      }
+    },
     "node_modules/meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -1076,6 +1127,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -1168,6 +1228,15 @@
         "wrappy": "1"
       }
     },
+    "node_modules/p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -1267,6 +1336,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/php-parser": {
+      "version": "3.1.0-beta.5",
+      "resolved": "https://registry.npmjs.org/php-parser/-/php-parser-3.1.0-beta.5.tgz",
+      "integrity": "sha512-3F3+yThjD7wn0sMuIG5iMQqutmH+RJUAbEyPW5S/greTp5ZArkpEweylQh+do22q9UJlJT1PrLN/AwnzDUti6Q==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1381,6 +1456,30 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-config-standard": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-config-standard/-/prettier-config-standard-5.0.0.tgz",
+      "integrity": "sha512-QK252QwCxlsak8Zx+rPKZU31UdbRcu9iUk9X1ONYtLSO221OgvV9TlKoTf6iPDZtvF3vE2mkgzFIEgSUcGELSQ==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": "^2.4.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -2193,6 +2292,17 @@
         "fastq": "^1.6.0"
       }
     },
+    "@prettier/plugin-php": {
+      "version": "0.18.4",
+      "resolved": "https://registry.npmjs.org/@prettier/plugin-php/-/plugin-php-0.18.4.tgz",
+      "integrity": "sha512-phnY20asLUpCSDXjCUN7FKGaZZTf1C+PSpTzGMOJ/UfIyD24sYJXCT8qqbcpp7rWI6ZsCsJiZcVnNmLFThx78Q==",
+      "dev": true,
+      "requires": {
+        "linguist-languages": "^7.5.1",
+        "mem": "^8.0.0",
+        "php-parser": "3.1.0-beta.5"
+      }
+    },
     "@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -2871,6 +2981,12 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "linguist-languages": {
+      "version": "7.15.0",
+      "resolved": "https://registry.npmjs.org/linguist-languages/-/linguist-languages-7.15.0.tgz",
+      "integrity": "sha512-qkSSNDjDDycZ2Wcw+GziNBB3nNo3ddYUInM/PL8Amgwbd9RQ/BKGj2/1d6mdxKgBFnUqZuaDbkIwkE4KUwwmtQ==",
+      "dev": true
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2901,6 +3017,15 @@
         "yallist": "^4.0.0"
       }
     },
+    "map-age-cleaner": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+      "dev": true,
+      "requires": {
+        "p-defer": "^1.0.0"
+      }
+    },
     "map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -2913,6 +3038,16 @@
       "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
       "dev": true
     },
+    "mem": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
+      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
+      "dev": true,
+      "requires": {
+        "map-age-cleaner": "^0.1.3",
+        "mimic-fn": "^3.1.0"
+      }
+    },
     "meow": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
@@ -2949,6 +3084,12 @@
         "picomatch": "^2.3.1"
       }
     },
+    "mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "dev": true
+    },
     "min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3020,6 +3161,12 @@
         "wrappy": "1"
       }
     },
+    "p-defer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
+      "dev": true
+    },
     "p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -3089,6 +3236,12 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "php-parser": {
+      "version": "3.1.0-beta.5",
+      "resolved": "https://registry.npmjs.org/php-parser/-/php-parser-3.1.0-beta.5.tgz",
+      "integrity": "sha512-3F3+yThjD7wn0sMuIG5iMQqutmH+RJUAbEyPW5S/greTp5ZArkpEweylQh+do22q9UJlJT1PrLN/AwnzDUti6Q==",
+      "dev": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -3161,6 +3314,19 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "prettier": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "dev": true
+    },
+    "prettier-config-standard": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-config-standard/-/prettier-config-standard-5.0.0.tgz",
+      "integrity": "sha512-QK252QwCxlsak8Zx+rPKZU31UdbRcu9iUk9X1ONYtLSO221OgvV9TlKoTf6iPDZtvF3vE2mkgzFIEgSUcGELSQ==",
+      "dev": true,
+      "requires": {}
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",

slt/package.json

@@ -4,13 +4,18 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "stylelint": "npx stylelint css/*.scss css/**/*.scss --cache",
-    "stylelint-fix": "npx stylelint css/**.scss css/**/*.scss --fix",
+    "stylelint:fix": "npx stylelint css/**.scss css/**/*.scss --fix",
+    "prettier": "npx prettier -c css/**/*.scss **/*.php",
+    "prettier:fix": "npx prettier -w css/**/*.scss **/*.php **.php",
     "sass": "npx sass css/style.scss:css/style.css -s compressed --no-source-map",
     "sass-dev": "npx sass css/style.scss:css/style.css",
     "sass-watch": "npx sass css/style.scss:css/style.css --watch"
   },
   "author": "Christian Wolf",
   "devDependencies": {
+    "@prettier/plugin-php": "^0.18.4",
+    "prettier": "^2.6.2",
+    "prettier-config-standard": "^5.0.0",
     "sass": "^1.44.0",
     "stylelint": "^14.1.0",
     "stylelint-config-standard-scss": "^3.0.0",

slt/prettier.config.js

@@ -0,0 +1,7 @@
+let config = require("prettier-config-standard");
+
+config.tabWidth = 4;
+// config.singleQuote = false;
+// console.log(config)
+
+module.exports = config;