Fixed lazyloading logo movement and mobile media queryv2.0.0

5 files changed, 13 insertions, 14 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 20d3e4d..73307b8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -86,6 +86,11 @@
     {{ partial "css.html" . }}
   {{ end }}
 
+  {{ if .Site.Params.lazyLoading }}
+    <style>.lazyload{opacity:.0001;}.logo .lazyload{min-width:10em;}</style>
+    <script src="/scripts/vendor/lazysizes.min.js" async></script>
+  {{ end }}
+
   {{ if .Site.Params.highlightJS }}
     {{ if .Site.Params.highlightJSStyle }}
       <link rel="stylesheet" href="{{ .Site.Params.highlightJSStyle }}">
@@ -93,9 +98,4 @@
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
     {{ end }}
   {{ end }}
-
-  {{ if .Site.Params.lazyLoading }}
-    <style>.lazyload{opacity:0.0001;}</style>
-    <script src="/scripts/vendor/lazysizes.min.js" async></script>
-  {{ end }}
 </head>
diff --git a/static/scripts/src/index.js b/static/scripts/src/index.js
index d61fe45..9a52ef2 100644
--- a/static/scripts/src/index.js
+++ b/static/scripts/src/index.js
@@ -36,12 +36,12 @@
       el.classList.toggle('active')
     })
     if (menuActive) {
-      this.querySelector('img:nth-of-type(1)').style.display = 'block'
+      this.querySelector('img:nth-of-type(1)').style.display = 'inline-block'
       this.querySelector('img:nth-of-type(2)').style.display = 'none'
       menuActive = false
     } else {
       this.querySelector('img:nth-of-type(1)').style.display = 'none'
-      this.querySelector('img:nth-of-type(2)').style.display = 'block'
+      this.querySelector('img:nth-of-type(2)').style.display = 'inline-block'
       menuActive = true
     }
   })
diff --git a/static/scripts/src/main.js b/static/scripts/src/main.js
index 64a0ea5..d993884 100644
--- a/static/scripts/src/main.js
+++ b/static/scripts/src/main.js
@@ -18,12 +18,12 @@
       el.classList.toggle('active')
     })
     if (menuActive) {
-      this.querySelector('img:nth-of-type(1)').style.display = 'block'
+      this.querySelector('img:nth-of-type(1)').style.display = 'inline-block'
       this.querySelector('img:nth-of-type(2)').style.display = 'none'
       menuActive = false
     } else {
       this.querySelector('img:nth-of-type(1)').style.display = 'none'
-      this.querySelector('img:nth-of-type(2)').style.display = 'block'
+      this.querySelector('img:nth-of-type(2)').style.display = 'inline-block'
       menuActive = true
     }
   })
diff --git a/static/styles/scss/_typography.scss b/static/styles/scss/_typography.scss
index b8813f8..1667d20 100644
--- a/static/styles/scss/_typography.scss
+++ b/static/styles/scss/_typography.scss
@@ -32,7 +32,7 @@ $base-line-height: 1.6;
 $base-font-size: 1.25rem; // 20px
 $vertical-rhythm: $base-line-height * $base-font-size; // 2.125em or 34px
 
-$breakpoint-medium: 48em; // 768px
+$breakpoint-medium: 49.99em; // 768px
 $breakpoint-small: 25em; // 400px
 
 @mixin size($level) {
diff --git a/static/styles/scss/main.scss b/static/styles/scss/main.scss
index 0e5decc..209413e 100644
--- a/static/styles/scss/main.scss
+++ b/static/styles/scss/main.scss
@@ -9,7 +9,7 @@
 @import "about";
 @import "gallery";
 
-@media (max-width: 48em) {
+@media (max-width: 47.99em) {
   body .container {
     padding: $vertical-rhythm * 4 $vertical-rhythm;
   }
@@ -64,10 +64,9 @@ nav {
     vertical-align: middle;
   }
 
-  div.logo,
-  div.nav-toggle {
+  .logo,
+  .nav-toggle {
     visibility: hidden;
-    max-width: none;
   }
 
   .nav-toggle a {