use webp for images, load icons offline

49 files changed, 55 insertions, 39 deletions

diff --git a/compress.sh b/compress.sh
index 2646a56..8cbe9e4 100644
--- a/compress.sh
+++ b/compress.sh
@@ -1,8 +1,6 @@
 #!/usr/bin/bash
 RATIO=10
 cd static/images
-mkdir -p min/ max/
-#find -maxdepth 1 -name "*.jpg" | xargs -I_ convert -scale $((100/$RATIO))% -scale $((100*$RATIO))% -gaussian-blur x${RATIO} -interlace Plane -quality 70% _ min/_
-COMPRESSOPTS="-strip -interlace Plane -quality 75%"
-find -maxdepth 1 -name "*.jpg" | xargs -I_ convert -gaussian-blur x${RATIO} $COMPRESSOPTS -verbose _ min/_
-find -maxdepth 1 -name "*.jpg" | xargs -I_ convert $COMPRESSOPTS -verbose _ max/_
+mkdir -p min/
+find -maxdepth 1 -name "*.jpg" -print0 | xargs -0 -I_ convert -strip -interlace Plane -quality 75% -verbose _ min/_
+find -maxdepth 1 -name "*.jpg" -print0 | sed "s,\.jpg,,g" | xargs -0 -I_ convert -strip -interlace Plane -quality 75% -verbose _.jpg min/_.webp
diff --git a/content/allgemein/about.md b/content/allgemein/about.md
index 166355b..2360bd3 100644
--- a/content/allgemein/about.md
+++ b/content/allgemein/about.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-09-07
 title: Über uns - Das Menü
-image: dreharbeiten.jpg
+image: dreharbeiten
 ---
 
 Kultur ist nicht nur bildende Kunst und Tradition.
diff --git a/content/allgemein/achtung.md b/content/allgemein/achtung.md
index ad9f27c..045bba3 100644
--- a/content/allgemein/achtung.md
+++ b/content/allgemein/achtung.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-09-16
 title: Worauf achte ich beim Essen in Prag
-image: mensa.jpg
+image: mensa
 ---
 
 Worauf achte ich beim Essen in Prag?
diff --git a/content/allgemein/bezahlung.md b/content/allgemein/bezahlung.md
index d0a3058..59f080b 100644
--- a/content/allgemein/bezahlung.md
+++ b/content/allgemein/bezahlung.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-09-15
 title: Bezahlung und Trinkgeld
-image: kronen.jpg
+image: kronen
 ---
 
 Wie kann ich in Prag bezahlen und wie viel Trinkgeld gibt man?
diff --git a/content/allgemein/kueche.md b/content/allgemein/kueche.md
index a42fd57..1a2cbe2 100644
--- a/content/allgemein/kueche.md
+++ b/content/allgemein/kueche.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-09-18
 title: Tschechische Küche
-image: trdlenik.jpg
+image: trdlenik
 ---
 
 Die Böhmische Küche ist die traditionelle Küche des tschechischen Gebietes. Außerdem ist sie auch in Österreich, Ungarn, Bayern, Sachsen und Schlesien verbreitet, somit sind uns Teile dieser Küche schon durchaus bekannt. Das tschechische essen wurde im Laufe der Zeit durch das Klima und andere geographische Faktoren des Landes beeinflusst. In dem folgenden Text werde ich mich auf die Vor- und Nachspeise der Böhmischen Küche beschränken.
diff --git a/content/allgemein/preise.md b/content/allgemein/preise.md
index 5dc4520..06ac8d2 100644
--- a/content/allgemein/preise.md
+++ b/content/allgemein/preise.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-09-17
 title: Preise
-image: minibar.jpg
+image: minibar
 ---
 
 Die Preise für Dienstleistungen richten sich natürlich nach Ort und „Niveau“. In den Stadtzenten gibt es gewöhnlich die teuersten Unterkünfte und Restaurants. Aber auch im Herzen von Prag kann man abseits der Touristenregionen gut und billig essen, sofern man einige Minuten für die Suche einsetzt.
diff --git a/content/restaurants/el_pueblo_mexicana.md b/content/restaurants/el_pueblo_mexicana.md
index c4d7a9c..af80ae8 100644
--- a/content/restaurants/el_pueblo_mexicana.md
+++ b/content/restaurants/el_pueblo_mexicana.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-11-02
 title: Restaurant el pueblo mexicana
-image: mexicana.jpg
+image: mexicana
 rating: 5
 latitude: 50.079595
 longitude: 14.4249872
diff --git a/content/restaurants/u_graffu.md b/content/restaurants/u_graffu.md
index 3c6dada..a6e0e33 100644
--- a/content/restaurants/u_graffu.md
+++ b/content/restaurants/u_graffu.md
@@ -2,7 +2,7 @@
 categories:
 date: 2016-11-02
 title: Restaurant U Graffu
-image: ugraffu.jpg
+image: ugraffu
 rating: 4
 latitude: 50.075192
 longitude: 14.4272207
diff --git a/static/images/max/dreharbeiten.jpg b/static/images/max/dreharbeiten.jpg
deleted file mode 100644
index ebb92af..0000000
--- a/static/images/max/dreharbeiten.jpg
+++ /dev/null
diff --git a/static/images/max/kronen.jpg b/static/images/max/kronen.jpg
deleted file mode 100644
index ca6a6b4..0000000
--- a/static/images/max/kronen.jpg
+++ /dev/null
diff --git a/static/images/max/mensa.jpg b/static/images/max/mensa.jpg
deleted file mode 100644
index 13b67d0..0000000
--- a/static/images/max/mensa.jpg
+++ /dev/null
diff --git a/static/images/max/mexicana-pizza.jpg b/static/images/max/mexicana-pizza.jpg
deleted file mode 100644
index 032fddd..0000000
--- a/static/images/max/mexicana-pizza.jpg
+++ /dev/null
diff --git a/static/images/max/mexicana.jpg b/static/images/max/mexicana.jpg
deleted file mode 100644
index 51d990e..0000000
--- a/static/images/max/mexicana.jpg
+++ /dev/null
diff --git a/static/images/max/minibar.jpg b/static/images/max/minibar.jpg
deleted file mode 100644
index 80268ad..0000000
--- a/static/images/max/minibar.jpg
+++ /dev/null
diff --git a/static/images/max/skyline.jpg b/static/images/max/skyline.jpg
deleted file mode 100644
index 5356662..0000000
--- a/static/images/max/skyline.jpg
+++ /dev/null
diff --git a/static/images/max/trdlenik.jpg b/static/images/max/trdlenik.jpg
deleted file mode 100644
index c5cf674..0000000
--- a/static/images/max/trdlenik.jpg
+++ /dev/null
diff --git a/static/images/max/ugraffu-chips.jpg b/static/images/max/ugraffu-chips.jpg
deleted file mode 100644
index 311b764..0000000
--- a/static/images/max/ugraffu-chips.jpg
+++ /dev/null
diff --git a/static/images/max/ugraffu.jpg b/static/images/max/ugraffu.jpg
deleted file mode 100644
index 5bbefa4..0000000
--- a/static/images/max/ugraffu.jpg
+++ /dev/null
diff --git a/static/images/min/.directory b/static/images/min/.directory
deleted file mode 100644
index 2df0508..0000000
--- a/static/images/min/.directory
+++ /dev/null
@@ -1,4 +0,0 @@
-[Dolphin]
-PreviewsShown=true
-Timestamp=2016,10,23,17,40,36
-Version=3
diff --git a/static/images/min/dreharbeiten.jpg b/static/images/min/dreharbeiten.jpg
index 8a90578..ebb92af 100644
--- a/static/images/min/dreharbeiten.jpg
+++ b/static/images/min/dreharbeiten.jpg
diff --git a/static/images/min/dreharbeiten.webp b/static/images/min/dreharbeiten.webp
new file mode 100644
index 0000000..3d645a2
--- /dev/null
+++ b/static/images/min/dreharbeiten.webp
diff --git a/static/images/min/kronen.jpg b/static/images/min/kronen.jpg
index 6704378..ca6a6b4 100644
--- a/static/images/min/kronen.jpg
+++ b/static/images/min/kronen.jpg
diff --git a/static/images/min/kronen.webp b/static/images/min/kronen.webp
new file mode 100644
index 0000000..1356e15
--- /dev/null
+++ b/static/images/min/kronen.webp
diff --git a/static/images/min/mensa.jpg b/static/images/min/mensa.jpg
index 98619ee..13b67d0 100644
--- a/static/images/min/mensa.jpg
+++ b/static/images/min/mensa.jpg
diff --git a/static/images/min/mensa.webp b/static/images/min/mensa.webp
new file mode 100644
index 0000000..4912c49
--- /dev/null
+++ b/static/images/min/mensa.webp
diff --git a/static/images/min/mexicana-pizza.jpg b/static/images/min/mexicana-pizza.jpg
index 5e9814a..032fddd 100644
--- a/static/images/min/mexicana-pizza.jpg
+++ b/static/images/min/mexicana-pizza.jpg
diff --git a/static/images/min/mexicana-pizza.webp b/static/images/min/mexicana-pizza.webp
new file mode 100644
index 0000000..3853463
--- /dev/null
+++ b/static/images/min/mexicana-pizza.webp
diff --git a/static/images/min/mexicana.jpg b/static/images/min/mexicana.jpg
index c49a17d..51d990e 100644
--- a/static/images/min/mexicana.jpg
+++ b/static/images/min/mexicana.jpg
diff --git a/static/images/min/mexicana.webp b/static/images/min/mexicana.webp
new file mode 100644
index 0000000..978cf12
--- /dev/null
+++ b/static/images/min/mexicana.webp
diff --git a/static/images/min/minibar.jpg b/static/images/min/minibar.jpg
index 5ca3efe..80268ad 100644
--- a/static/images/min/minibar.jpg
+++ b/static/images/min/minibar.jpg
diff --git a/static/images/min/minibar.webp b/static/images/min/minibar.webp
new file mode 100644
index 0000000..7156cb9
--- /dev/null
+++ b/static/images/min/minibar.webp
diff --git a/static/images/min/skyline.jpg b/static/images/min/skyline.jpg
index 49fefd5..5356662 100644
--- a/static/images/min/skyline.jpg
+++ b/static/images/min/skyline.jpg
diff --git a/static/images/min/skyline.webp b/static/images/min/skyline.webp
new file mode 100644
index 0000000..8c0aade
--- /dev/null
+++ b/static/images/min/skyline.webp
diff --git a/static/images/min/trdlenik.jpg b/static/images/min/trdlenik.jpg
index c693898..c5cf674 100644
--- a/static/images/min/trdlenik.jpg
+++ b/static/images/min/trdlenik.jpg
diff --git a/static/images/min/trdlenik.webp b/static/images/min/trdlenik.webp
new file mode 100644
index 0000000..d9b5b78
--- /dev/null
+++ b/static/images/min/trdlenik.webp
diff --git a/static/images/min/ugraffu-chips.jpg b/static/images/min/ugraffu-chips.jpg
index dce7075..311b764 100644
--- a/static/images/min/ugraffu-chips.jpg
+++ b/static/images/min/ugraffu-chips.jpg
diff --git a/static/images/min/ugraffu-chips.webp b/static/images/min/ugraffu-chips.webp
new file mode 100644
index 0000000..7866840
--- /dev/null
+++ b/static/images/min/ugraffu-chips.webp
diff --git a/static/images/min/ugraffu.jpg b/static/images/min/ugraffu.jpg
index 0030b63..5bbefa4 100644
--- a/static/images/min/ugraffu.jpg
+++ b/static/images/min/ugraffu.jpg
diff --git a/static/images/min/ugraffu.webp b/static/images/min/ugraffu.webp
new file mode 100644
index 0000000..9dbc332
--- /dev/null
+++ b/static/images/min/ugraffu.webp
diff --git a/themes/flog/layouts/_default/single.html b/themes/flog/layouts/_default/single.html
index 13b62d5..b3bdbbb 100644
--- a/themes/flog/layouts/_default/single.html
+++ b/themes/flog/layouts/_default/single.html
@@ -4,22 +4,22 @@
         <main role="main" class="container">
             <article itemscope itemtype="http://schema.org/BlogPosting" class="section">
                 {{ if .Params.image }}
-                <img class="jsonly" src="/images/min/{{ .Params.image }}" style="width: 100%;" onload="this.src = '/images/{{ .Params.image }}'">
-                <noscript>
-                    <img src="/images/{{ .Params.image }}" style="width: 100%;">
-                    <style>.jsonly { display: none }</style>
-                </noscript>
+                <picture>
+                    <source srcset="/images/min/{{ .Params.image }}.webp" type="image/webp">
+                    <source srcset="/images/min/{{ .Params.image }}.jpg" type="image/jpeg">
+                    <img width="100%" src="/images/min/{{ .Params.image }}.jpg">
+                </picture>
                 {{ end }}
                 <h1 itemprop="headline" class="header">{{ .Title }}</h1>
                 <span><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02" }}"></time></span>
                 {{ if .Params.rating }}
                 <div class="center right">
-                    <i class="material-icons">
+                    <i>
                     {{ range seq .Params.rating }}
-                    star
+                        <img src="/fonts/icons/ic_star_black_24px.svg">
                     {{ end }}
                     {{ range seq (sub 5 (int .Params.rating)) }}
-                    star_border
+                        <img src="/fonts/icons/ic_star_border_black_24px.svg">
                     {{ end }}
                     </i>
                 </div>
diff --git a/themes/flog/layouts/partials/footer.html b/themes/flog/layouts/partials/footer.html
index fc0f949..5ffadd4 100644
--- a/themes/flog/layouts/partials/footer.html
+++ b/themes/flog/layouts/partials/footer.html
@@ -49,11 +49,6 @@
                     }
                 });
             });
-            $('body').imagesLoaded({ background: true }, function() {
-                $('<img src="/images/skyline.jpg">').load(function() {
-                    $('body').css('background-image', 'url(' + this.src + ')');
-                });
-            });
         </script>
     </body>
 </html>
diff --git a/themes/flog/layouts/partials/header.html b/themes/flog/layouts/partials/header.html
index fdef850..8d9c1e6 100644
--- a/themes/flog/layouts/partials/header.html
+++ b/themes/flog/layouts/partials/header.html
@@ -16,7 +16,7 @@
                     <div class="nav-wrapper">
                         <a href="/" class="brand-logo" style="margin-left: 1rem;">{{ .Title }}</a>
                         <a href="#" data-activates="slide-sections" class="button-collapse">
-                            <i class="material-icons">menu</i>
+                            <i><img src="/fonts/icons/ic_menu_white_36px.svg"></i>
                         </a>
                         <ul class="right hide-on-med-and-down">
                             {{ $active_section := (or .Section (or (and (not .IsPage) (lower .Title)) "")) }}
diff --git a/themes/flog/layouts/partials/listing.html b/themes/flog/layouts/partials/listing.html
index cefede4..a826617 100644
--- a/themes/flog/layouts/partials/listing.html
+++ b/themes/flog/layouts/partials/listing.html
@@ -11,11 +11,13 @@
             <div class="card">
                 {{ if .Params.image }}
                 <div class="card-image">
-                    <a class="jsonly" href="{{ .RelPermalink }}"><img src="/images/min/{{ .Params.image }}" onload="this.src = '/images/max/{{ .Params.image }}'"></a>
-                    <noscript>
-                        <a href="{{ .RelPermalink }}"><img src="/images/max/{{ .Params.image }}"></a>
-                        <style>.jsonly { display: none }</style>
-                    </noscript>
+                    <a href="{{ .RelPermalink }}">
+                        <picture>
+                            <source srcset="/images/min/{{ .Params.image }}.webp" type="image/webp">
+                            <source srcset="/images/min/{{ .Params.image }}.jpg" type="image/jpg">
+                            <img src="/images/min/{{ .Params.image }}.jpg">
+                        </picture>
+                    </a>
                 </div>
                 {{ end }}
                 <section class="card-content" itemprop="text">
@@ -28,14 +30,14 @@
                     <a href="{{ .RelPermalink }}">
                     Weiterlesen…
                     {{ if .Params.rating }}
-                        <i class="material-icons right">
+                        <span class="right">
                         {{ range seq .Params.rating }}
-                        star
+                            <img src="/fonts/icons/ic_star_black_24px.svg">
                         {{ end }}
                         {{ range seq (sub 5 (int .Params.rating)) }}
-                        star_border
+                            <img src="/fonts/icons/ic_star_border_black_24px.svg">
                         {{ end }}
-                        </i>
+                        </span>
                     {{ end }}
                     </a>
                 </div>
diff --git a/themes/flog/static/fonts/icons/ic_menu_black_24px.svg b/themes/flog/static/fonts/icons/ic_menu_black_24px.svg
new file mode 100644
index 0000000..e46eebf
--- /dev/null
+++ b/themes/flog/static/fonts/icons/ic_menu_black_24px.svg
@@ -0,0 +1,4 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
diff --git a/themes/flog/static/fonts/icons/ic_menu_white_24px.svg b/themes/flog/static/fonts/icons/ic_menu_white_24px.svg
new file mode 100644
index 0000000..3521f19
--- /dev/null
+++ b/themes/flog/static/fonts/icons/ic_menu_white_24px.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
diff --git a/themes/flog/static/fonts/icons/ic_menu_white_36px.svg b/themes/flog/static/fonts/icons/ic_menu_white_36px.svg
new file mode 100644
index 0000000..c9f67a0
--- /dev/null
+++ b/themes/flog/static/fonts/icons/ic_menu_white_36px.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
diff --git a/themes/flog/static/fonts/icons/ic_menu_white_48px.svg b/themes/flog/static/fonts/icons/ic_menu_white_48px.svg
new file mode 100644
index 0000000..d1aa749
--- /dev/null
+++ b/themes/flog/static/fonts/icons/ic_menu_white_48px.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+</svg>
\ No newline at end of file
diff --git a/themes/flog/static/fonts/icons/ic_star_black_24px.svg b/themes/flog/static/fonts/icons/ic_star_black_24px.svg
new file mode 100644
index 0000000..742e71a
--- /dev/null
+++ b/themes/flog/static/fonts/icons/ic_star_black_24px.svg
@@ -0,0 +1,5 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/themes/flog/static/fonts/icons/ic_star_border_black_24px.svg b/themes/flog/static/fonts/icons/ic_star_border_black_24px.svg
new file mode 100644
index 0000000..d8196ab
--- /dev/null
+++ b/themes/flog/static/fonts/icons/ic_star_border_black_24px.svg
@@ -0,0 +1,4 @@
+<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file