diff --git a/resources/css/main.scss b/resources/css/main.scss
index 9c4db52..8d77f2a 100644
--- a/resources/css/main.scss
+++ b/resources/css/main.scss
@@ -38,6 +38,10 @@ html, body {
display: flex;
}
+.inline-block {
+ display: inline-block;
+}
+
#header {
// Layout, details and children is set in partials/header.scss
height: 10vh;
@@ -59,7 +63,6 @@ html, body {
align-items: center;
.dropdown-nav-item {
- display: inline-block;
position: relative;
margin-top: math.div(variables.$px_horizontalPadding, 4);
background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
@@ -67,6 +70,8 @@ html, body {
-webkit-text-fill-color: transparent;
font: 600 28px "Montserrat", sans-serif;
text-decoration: none;
+ -webkit-animation: navbar-appear 550ms;
+ animation: navbar-appear 550ms;
&:first-of-type {
margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -97,6 +102,11 @@ html, body {
animation: drawer-close 550ms;
}
+.dropdown-nav-item_close_animation {
+ -webkit-animation: navbar-disappear 550ms;
+ animation: navbar-disappear 550ms;
+}
+
@-webkit-keyframes drawer-close {
from {
-webkit-transform: translate3d(0, 0, 0);
@@ -147,6 +157,56 @@ html, body {
}
}
+@-webkit-keyframes navbar-appear {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+@keyframes navbar-appear {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@-webkit-keyframes navbar-disappear {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+@keyframes navbar-disappear {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
#container {
height: 90vh;
display: grid;
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index 7854f9b..d8bbf17 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -165,6 +165,7 @@ $social-button_inner_margin: 10px;
width: auto;
border: 2px solid white;
border-radius: 50%;
+ margin: 0 10px 0 0;
img {
margin: 10px;
@@ -179,5 +180,9 @@ $social-button_inner_margin: 10px;
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
}
}
+
+ &:last-of-type {
+ margin: 0;
+ }
}
}
\ No newline at end of file
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
index 88da9a2..9cabc93 100644
--- a/resources/scripts/main.js
+++ b/resources/scripts/main.js
@@ -2,18 +2,44 @@ async function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
+let dropdown = document.getElementsByClassName('dropdown')[0];
+let navitems = document.getElementsByClassName('dropdown-nav-item');
+
+function showDropdown() {
+ dropdown.classList.remove('hidden');
+ dropdown.classList.add('flex');
+}
+
+function hideDropdown() {
+ dropdown.classList.remove('flex');
+ dropdown.classList.add('hidden');
+}
+
+function showNavitems() {
+ for (let i = 0; i < navitems.length; i++) {
+ navitems[i].classList.remove('hidden');
+ navitems[i].classList.add('inline-block');
+ }
+}
+
+function hideNavitems() {
+ for (let i = 0; i < navitems.length; i++) {
+ navitems[i].classList.remove('inline-block');
+ navitems[i].classList.add('hidden');
+ }
+}
+
async function toggleDropdown() {
- let dropdown = document.getElementsByClassName('dropdown')[0];
- let navitems = document.getElementsByClassName('dropdown-nav-item');
if (dropdown.classList.contains('hidden')) {
- dropdown.classList.remove('hidden');
- dropdown.classList.add('flex');
+ showDropdown();
+ await sleep(200);
+ showNavitems();
}
else {
dropdown.classList.add('dropdown_close_animation');
await sleep(550);
dropdown.classList.remove('dropdown_close_animation');
- dropdown.classList.add('hidden');
- dropdown.classList.remove('flex');
+ hideDropdown();
+ hideNavitems();
}
}
\ No newline at end of file
diff --git a/resources/styles/main.css b/resources/styles/main.css
index 6eb7a7d..a5d5af9 100644
--- a/resources/styles/main.css
+++ b/resources/styles/main.css
@@ -142,6 +142,7 @@
width: auto;
border: 2px solid white;
border-radius: 50%;
+ margin: 0 10px 0 0;
}
.social .social-button img {
margin: 10px;
@@ -154,6 +155,9 @@
.social .social-button:hover img {
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
}
+.social .social-button:last-of-type {
+ margin: 0;
+}
#header {
background: #FDFFFF;
@@ -379,6 +383,10 @@ html, body {
display: flex;
}
+.inline-block {
+ display: inline-block;
+}
+
#header {
height: 10vh;
}
@@ -400,7 +408,6 @@ html, body {
align-items: center;
}
.dropdown .dropdown-nav-item {
- display: inline-block;
position: relative;
margin-top: 50px;
background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
@@ -408,6 +415,8 @@ html, body {
-webkit-text-fill-color: transparent;
font: 600 28px "Montserrat", sans-serif;
text-decoration: none;
+ -webkit-animation: navbar-appear 550ms;
+ animation: navbar-appear 550ms;
}
.dropdown .dropdown-nav-item:first-of-type {
margin-top: 100px;
@@ -434,6 +443,11 @@ html, body {
animation: drawer-close 550ms;
}
+.dropdown-nav-item_close_animation {
+ -webkit-animation: navbar-disappear 550ms;
+ animation: navbar-disappear 550ms;
+}
+
@-webkit-keyframes drawer-close {
from {
-webkit-transform: translate3d(0, 0, 0);
@@ -478,6 +492,50 @@ html, body {
transform: translate3d(0, 0, 0);
}
}
+@-webkit-keyframes navbar-appear {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+@keyframes navbar-appear {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+@-webkit-keyframes navbar-disappear {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+@keyframes navbar-disappear {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
#container {
height: 90vh;
display: grid;