reintroduce navigation menu
This commit is contained in:
sakrecoer
parent
cee92ebf40
commit
924151b7e7
4 changed files with 106 additions and 89 deletions
6
_data/navigation.yml
Normal file
6
_data/navigation.yml
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
- name: Releases
|
||||
url: '/releases/'
|
||||
external_site: false
|
||||
- name: Log
|
||||
url: /news/
|
||||
external_site: false
|
||||
|
|
@ -1,11 +1,29 @@
|
|||
<!-- Navigation -->
|
||||
{% if page.url == '/' %}
|
||||
<a id="logo" alt="Back to top" title="Back to top" class="logo smooth-scroll-middle" href="#top"> </a>
|
||||
{% elsif page.collection == 'tracks' %}
|
||||
<a id="logo" alt="Back to Album" title="Back to Album" class="logo smooth-scroll-middle" href="../"> </a>
|
||||
{% else %}
|
||||
<a id="logo" alt="Back to home page" title="Back to home page" class="logo" href="/"> </a>
|
||||
<div id="logo" class="logo">
|
||||
<a href="/" class="smooth-scroll-middle" style="height: 57px;"><img width="200em" src="/assets/panix-logo.svg" alt="{{ site.name }} Logo" /></a>
|
||||
<a href="#navbar" onclick="blurBody()" alt="Navigation Menu" title="Navigation Menu"><span style="font-size: 34px;" class="icon solid fa-bars"></span></a>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<!-- End Navigation -->
|
||||
137
_sass/_set.scss
137
_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%;
|
||||
height: 15%;
|
||||
width: 300px;
|
||||
background-color: transparent;
|
||||
background-image: url('/assets/panix-logo.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 95% 95%;
|
||||
|
|
@ -86,70 +88,18 @@
|
|||
transition: all 400ms ease-in;
|
||||
box-shadow: none;
|
||||
border-radius: 20px;
|
||||
-webkit-filter: blur(15px);
|
||||
-moz-filter: blur(15px);
|
||||
-ms-filter: blur(15px);
|
||||
-o-filter: blur(15px);
|
||||
filter: blur(15px);
|
||||
}
|
||||
.logo:hover {
|
||||
-webkit-filter: blur(0px);
|
||||
-moz-filter: blur(0px);
|
||||
-ms-filter: blur(0px);
|
||||
-o-filter: blur(0px);
|
||||
filter: blur(0px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: space-evenly;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 50%;
|
||||
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);
|
||||
-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%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background-color: _palette(bg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
|
|
@ -159,7 +109,7 @@
|
|||
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);
|
||||
color: _palette(bg);
|
||||
background: _palette(accent-dark);
|
||||
color: #FFFFFF;
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
|
|
@ -264,8 +217,8 @@ nav {
|
|||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: _palette(accent);
|
||||
color: _palette(fg);
|
||||
background: _palette(bg_alt);
|
||||
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 *//
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
// bodyBluring.classList.toggle("blurredout");
|
||||
// }
|
||||
// function removeBlur() {
|
||||
// bodyBluring.classList.remove("blurredout")
|
||||
// }
|
||||
function blurBody() {
|
||||
bodyBluring.classList.toggle("blurredout");
|
||||
}
|
||||
function removeBlur() {
|
||||
bodyBluring.classList.remove("blurredout")
|
||||
}
|
||||
|
||||
/// request permission to autoplay
|
||||
Loading…
Add table
Add a link
Reference in a new issue