Fixed lazyloading logo movement and mobile media query

tomanistor · Jun 2, 2019 · f8b42ce · f8b42ce
1 parent de63d87
commit f8b42ce
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 14 deletions.
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -86,16 +86,16 @@
     {{ 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 }}">
     {{ else }}
       <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
@@ -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
@@ -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
@@ -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
@@ -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 {