From 99c794d8bc7624ff259b5b382b359af3c7d44844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferit=20Yi=C4=9Fit=20BALABAN?= Date: Thu, 7 Jul 2022 23:32:24 +0300 Subject: [PATCH] ... --- index.html | 10 +++--- resources/css/main.scss | 62 +++++++++++++++++++++++++++++++++- resources/css/views/index.scss | 5 +++ resources/scripts/main.js | 38 +++++++++++++++++---- resources/styles/main.css | 60 +++++++++++++++++++++++++++++++- 5 files changed, 162 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 27f171c..50e15aa 100644 --- a/index.html +++ b/index.html @@ -32,11 +32,11 @@
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;