ToolboxBodensee · DO1JLR · Feb 15, 2019 · Feb 14, 2019 · Feb 14, 2019 · Feb 14, 2019
@@ -39,5 +39,12 @@ $RECYCLE.BIN/
 
 # Toolbox Website files
 assets/css/main.css
+assets/css/main.min.css
 assets/css/ie9.css
+assets/css/ie9.min.css
+.sass-cache/
+assets/css/main.css.map
+assets/css/ie9.css.map
+assets/css/main.min.css.map
+assets/css/ie9.min.css.map
 
@@ -8,6 +8,8 @@ cache:
     - $HOME/.cache/lektor/builds
 before_install:
   - git lfs pull
+  - gem install sass
+  - make sass
 install: "pip install Lektor"
 script: "lektor build"
 before_deploy: "echo 'c3woc.de ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBC5NslYj+wtriBuKIxJfDRm9E2hnlstWR8durQ6pKvVvP7wjcoXIyAxe41GvJ9SoEhSjF7oVlzlw+zAkzl5WOZ4=' > ~/.ssh/known_hosts"

@@ -3,12 +3,16 @@ LEKTOR_SERVER_FLAGS=-h 127.0.0.1
 all: build
 
 sass:
-	sassc ./assets/sass/main.scss ./assets/css/main.css
-	sassc ./assets/sass/ie9.scss ./assets/css/ie9.css
-	rm ./assets/css/main.min.css
-	rm ./assets/css/ie9.min.css
-	python3 ./deployment/cssminify.py -o ./assets/css/main.min.css ./assets/css/main.css
-	python3 ./deployment/cssminify.py -o ./assets/css/ie9.min.css ./assets/css/ie9.css
+	sass -t compressed ./assets/sass/main.scss ./assets/css/main.min.css
+	sass -t compressed ./assets/sass/ie9.scss ./assets/css/ie9.min.css
+	rm ./assets/css/main.min.css.map
+	rm ./assets/css/ie9.min.css.map
+
+sass-uncompressed:
+	sass ./assets/sass/main.scss ./assets/css/main.css
+	sass ./assets/sass/ie9.scss ./assets/css/ie9.css
+	rm ./assets/css/main.css.map
+	rm ./assets/css/ie9.css.map
 
 install:
 	pip install lektor

@@ -117,14 +117,34 @@ Bei der Farbwahl (z.B. Menüfarben) sollte das [Toolbox Presse-Kit](https://gith
 CSS
 ------------------------
 
-Das CSS-Design wird mit [sass](https://sass-lang.com/) generiert.
+Das CSS-Design wird mit [sass](https://github.com/sass/sassc-ruby/) generiert.
 Das vereinfacht die Verständlichkeit der einzelnen Designelemente
 und ermöglicht auch das Anpassen des Designs durch das simple Verändern weniger Variablen.
-Example use:
+Example use and installation:
 ```bash
+# Install sass:
+gem install sass
+# generate css from sass
 make sass
 ```
 
+**Nützliche Tipps:**
+Nahezu aller Style der Webseite wird über die main.css datei geregelt. Diese befindet sich jedoch nicht mehr im git sondern muss lokal gebaut werden.
+Das Lektor Template prüft, ob die Datei ``assets/css/main.min.css`` oder ``assets/css/main.css`` vorhanden ist. 
+Sollte keine der genannten Dateien verfügbar sein, so wird diese von der offiziellen toolbox-bodensee.de Webseite eingebunden. Wenn sie lokal verfügbar ist, wird die lokale Datei eingebunden.
+Der lokale Lektor Server cached einige Dateien. So kann es sein, dass das nachträgliche hinzufügen der css Datei keine beachtung findet und nicht zum neu einbinden seitens lektor führt.
+Der lokale cache kann mit den folgenden Befehl geleert werden und anschließend der lokale Server wieder gestartet werden:
+```bash
+# generate non-minified css:
+make sass-uncompressed
+
+# clean lektor cache
+lektor clear
+
+# run lektor server
+lektor server
+```
+
 Docker
 ------------------------
 

@@ -1,11 +1,25 @@
-<!DOCTYPE html>
+{% set fqdn = 'toolbox-bodensee.de'
+%}<!DOCTYPE html>
 <html{% if alt %} lang="{{ alt }}"{% endif %}>
   <head>
     <meta charset="utf-8">
     <title>{% block title %}Startseite{% endblock %}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="{{ '/css/main.min.css'|asseturl }}" />
-    <!--[if lte IE 9]><link rel="stylesheet" href="{{ 'assets/css/ie9.min.css'|asseturl }}" /><![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />{%
+    if '/css/main.min.css'|asseturl == empty and '/css/main.css'|asseturl == empty %}
+    <link rel="stylesheet" href="{{ '/css/font-awesome.min.css'|asseturl }}" />
+    <link rel="stylesheet" href="{{ '/fonts/roboto.css'|asseturl }}" />{%
+     endif %}
+    <link rel="stylesheet" href={%
+        if '/css/main.min.css'|asseturl == empty %}{%
+            if '/css/main.css'|asseturl == empty %}"https://{{ fqdn }}/css/main.min.css"{%
+            else %}"{{ '/css/main.css'|asseturl }}"{%
+            endif %}{%
+        else %}"{{ '/css/main.min.css'|asseturl }}"{%
+        endif %} /> 
+    <!--[if lte IE 9]><link rel="stylesheet" href={%
+        if '/css/ie9.min.css'|asseturl == empty %}"https://{{ fqdn }}/css/ie9.min.css"{%
+        else %}"{{ '/css/ie9.min.css'|asseturl }}"{%
+        endif %}" /><![endif]-->
     {% block expand_description 
     %}<meta name="description" content="{% 
         if bag('translate', this.alt, 'description') %}{{ bag('translate', this.alt, 'description') }}{%