reintroduce navigation menu

_data/navigation.yml

@@ -0,0 +1,6 @@
+- name: Releases
+  url: '/releases/'
+  external_site: false
+- name: Log
+  url: /news/
+  external_site: false

_includes/navigation.html

@@ -1,11 +1,29 @@
 <!-- Navigation -->
-{% if page.url == '/' %}
+<div id="logo" class="logo">
-<a id="logo" alt="Back to top" title="Back to top" class="logo smooth-scroll-middle" href="#top">&nbsp;</a>
+  <a href="/" class="smooth-scroll-middle" style="height: 57px;"><img width="200em" src="/assets/panix-logo.svg" alt="{{ site.name }} Logo" /></a>
-{% elsif page.collection == 'tracks' %}
+  &nbsp;&nbsp;&nbsp;<a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span style="font-size: 34px;" class="icon solid fa-bars"></span></a>
-<a id="logo" alt="Back to Album" title="Back to Album" class="logo smooth-scroll-middle" href="../">&nbsp;</a>
+  </div>
-{% else %}
+  
-<a id="logo" alt="Back to home page" title="Back to home page" class="logo" href="/">&nbsp;</a>
+  <div id="navbar" style="display: block;" class="modalDialog">
+    <a href="#close" onclick="removeBlur()" alt="Close Menu" title="Close Menu"><div id="closearea">  </div></a>
+    <nav>
+      <a href="#close" title="Close" onclick="removeBlur()" class="close-button close" style="margin: 0 auto;">X</a>
+      <ul> 
+     {% if page.url != '/' %}
+  
+        <li><a href="{{ relBase }}/" class="button small">{{ site.data.translations[page.lang].home }}</a></li>
+        {% endif %}
+        {% for entry in site.data.navigation %}
+        {% if entry.external_site == false %}
+        <li><a href="{{ relBase }}{{ entry.url }}" class="button small">{{ entry.name }}</a></li>
+        {% else %}
+        <li><a href="{{ entry.url }}" target="_blank" rel="noopener" class="button small">{{ entry.name }}</a></li>
+        {% endif %}
+        {% endfor %}
+        </li>
+      </ul>
+    </nav>
+  </div>
   
   
-{% endif %}
+  <!-- End Navigation -->
-<!-- End Navigation -->

_sass/_set.scss

@@ -65,19 +65,21 @@
   animation-play-state: paused;
 }
 
-/* Navigation */
 
+/* NAVIGATION */
+/* Style the navbar */
+#logo {
+  padding:10px;
+
+}
 .logo {
-  z-index: 10;
   text-decoration: none;
-  position: absolute;
+  position: fixed;
   top:20px;
   left: 50%;
   transform: translateX(-50%);
-  width: 80%;
+  width: 300px;
-  height: 15%;
   background-color: transparent;
-  background-image: url('/assets/panix-logo.svg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 95% 95%;
@@ -86,25 +88,18 @@
   transition: all 400ms ease-in;
   box-shadow: none;
   border-radius: 20px;
-  -webkit-filter: blur(15px);
+  display: flex;
-  -moz-filter: blur(15px);
+  flex-wrap: wrap;
-  -ms-filter: blur(15px);
+  justify-content: center;
-  -o-filter: blur(15px);
+  align-content: space-evenly;
-  filter: blur(15px);
+  background-color: rgba(255, 255, 255, 0.5);
-}
-.logo:hover {
-  -webkit-filter: blur(0px);
-  -moz-filter: blur(0px);
-  -ms-filter: blur(0px);
-  -o-filter: blur(0px);
-  filter: blur(0px);
 }
 .sticky {
   position: fixed;
   top: 20px;
-  right: 20px;
+  left: 50%;
-  width: 50%;
+  transform: translateX(-50%);
-  height: 10%;
+
   background-color: _palette(bg);
   background-repeat: no-repeat;
   background-position: center center;
@@ -113,53 +108,8 @@
   -moz-transition: all 400ms ease-in;
   transition: all 400ms ease-in;
   box-shadow: 0 0 10px 1px _palette(border-alt);
-  -webkit-filter: blur(0px);
-  -moz-filter: blur(0px);
-  -ms-filter: blur(0px);
-  -o-filter: blur(0px);
-  filter: blur(0px);
  }
- .sticky:hover {
+ 
-  -webkit-filter: blur(0px);
-  -moz-filter: blur(0px);
-  -ms-filter: blur(0px);
-  -o-filter: blur(0px);
-  filter: blur(0px);
- }
- @media only screen and (min-width: 769px) {
-  .logo {
-    position: absolute;
-    top:20px;
-    right: 20px;
-    width: 25%;
-    height: 15%;
-    background-color: transparent;
-    background-image: url('/assets/panix-logo.svg');
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 95% 95%;
-    -webkit-transition: all 400ms ease-in;
-    -moz-transition: all 400ms ease-in;
-    transition: all 400ms ease-in;
-    box-shadow: none;
-    border-radius: 20px;
-  }
-  .sticky {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    width: 20%;
-    height: 10%;
-    background-color: _palette(bg);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 95% 95%;
-    -webkit-transition: all 400ms ease-in;
-    -moz-transition: all 400ms ease-in;
-    transition: all 400ms ease-in;
-    box-shadow: 0 0 10px 1px _palette(border-alt);
-   }
-}
 
 nav {
   position: absolute;
@@ -175,6 +125,7 @@ nav {
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
+
   ul {
     margin: auto;
 
@@ -207,17 +158,19 @@ nav {
  }
 .modalDialog {
   position: fixed;
+  font-family: Arial, Helvetica, sans-serif;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  background: _palette(border-dark);
+  background: _palette(fg-light);
   z-index: 11;
   opacity:0;
   -webkit-transition: opacity 400ms ease-in;
   -moz-transition: opacity 400ms ease-in;
   transition: opacity 400ms ease-in;
   pointer-events: none;
+  
 }
 
 .modalDialog:target {
@@ -243,8 +196,8 @@ nav {
 
 
 .close-button {
-  background: _palette(fg);
+  background: _palette(accent-dark);
-  color: _palette(bg);
+  color: #FFFFFF;
   line-height: 48px;
   position: absolute;
   right: -12px;
@@ -264,8 +217,8 @@ nav {
 }
 
 .close-button:hover { 
-  background: _palette(accent); 
+  background: _palette(bg_alt); 
-  color: _palette(fg);
+  color: _palette(bg);
 }
 
 #closearea {
@@ -275,6 +228,46 @@ nav {
 
 }
 
+@media only screen and (min-width: 769px) {
+  .logo {
+    position: fixed;
+    top:20px;
+    left: 95%;
+    transform: translateX(-95%);
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 95% 95%;
+    -webkit-transition: all 400ms ease-in;
+    -moz-transition: all 400ms ease-in;
+    transition: all 400ms ease-in;
+    box-shadow: none;
+    border-radius: 20px;
+    z-index: 90000;
+
+  }
+  .sticky {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+
+    background-color: _palette(bg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 95% 95%;
+    -webkit-transition: all 400ms ease-in;
+    -moz-transition: all 400ms ease-in;
+    transition: all 400ms ease-in;
+    box-shadow: 0 0 10px 1px _palette(border-alt);
+   }
+   nav {
+     top: 120px;
+     left: 95%;
+     transform: translate(-95%);
+   }
+
+}
+
 
 
 //* POSTS *//

assets/js/set.js

@@ -20,13 +20,13 @@ function scrollMenu() {
 }
 
 // Make a pretty background when menu is open
-// var bodyBluring = document.getElementById("wrapper")
+var bodyBluring = document.getElementById("wrapper")
 
-// function blurBody() {
+function blurBody() {
-//   bodyBluring.classList.toggle("blurredout");
+  bodyBluring.classList.toggle("blurredout");
-// }
+}
-// function removeBlur() {
+function removeBlur() {
-//   bodyBluring.classList.remove("blurredout")
+  bodyBluring.classList.remove("blurredout")
-// }
+}
 
 /// request permission to autoplay