use webp for images, load icons offline

10 files changed, 45 insertions, 23 deletions

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