reintroduce navigation menu
This commit is contained in:
sakrecoer
parent
cee92ebf40
commit
924151b7e7
4 changed files with 106 additions and 89 deletions
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,25 +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%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
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);
|
||||
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 *//
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue