AAAaaaaAAAAAAMOUR AMOUR

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,17 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="transform" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
     <inspection_tool class="LanguageDetectionInspection" enabled="true" level="TYPO" enabled_by_default="true" />
     <inspection_tool class="SpellCheckingInspection" enabled="true" level="INFORMATION" enabled_by_default="true">
       <option name="processCode" value="true" />

resources/css/main.scss

@@ -50,22 +50,101 @@ html, body {
 .dropdown {
   position: fixed;
   z-index: 2;
-  background-color: #706fff;
+  background: linear-gradient(to left bottom, variables.$clr_brand, #003e86);
-  width: 100vw;
+  width: 100%;
   height: 90vh;
-  animation: slide-in-right 550ms;
+  -webkit-animation: drawer-open 550ms;
+  animation: drawer-open 550ms;
   flex-direction: column;
   align-items: center;
 
   .dropdown-nav-item {
-    color: white;
+    display: inline-block;
+    position: relative;
+    margin-top: math.div(variables.$px_horizontalPadding, 4);
+    background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
+
+    &:first-of-type {
+      margin-top: math.div(variables.$px_horizontalPadding, 2);
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      transform: scaleX(0);
+      height: 2px;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to left, #FFF, #AFF);
+      transform-origin: bottom right;
+      transition: transform 0.25s ease-out;
+    }
+
+    &:hover:after {
+      transform: scaleX(1);
+      transform-origin: bottom left;
+    }
   }
 }
 
 .dropdown_close_animation {
-  animation: 550ms slide-in-left;
+  -webkit-animation: drawer-close 550ms;
+  animation: drawer-close 550ms;
+}
+
+@-webkit-keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@-webkit-keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 #container {

resources/css/partials/header.scss

@@ -68,6 +68,7 @@ $dropdown-toggle_s_second_bar: math.div($dropdown-toggle_s_width - 4, 2);
     width: $dropdown-toggle_l_width;
     height: $dropdown-toggle_l_width;
     position: relative;
+    cursor: pointer;
 
     .bar {
       padding: 0;

resources/css/views/index.scss

@@ -152,7 +152,7 @@ $social-button_inner_margin: 10px;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background-color: variables.$clr_brand;
+  background: linear-gradient(to left, variables.$clr_brand, #3b8fff);
   color: white;
 
   p {

resources/scripts/main.js

@@ -1,13 +1,19 @@
-function toggleDropdown() {
+async function sleep(milliseconds) {
-    let target = document.getElementsByClassName('dropdown')[0];
+    return new Promise(resolve => setTimeout(resolve, milliseconds));
-    if (target.classList.contains('hidden')) {
+}
-        target.classList.remove('hidden');
+
-        target.classList.add('flex');
+async function toggleDropdown() {
-        //document.getElementById('container').style.display = 'none';
+    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');
     }
     else {
-        target.classList.add('dropdown_close_animation');
+        dropdown.classList.add('dropdown_close_animation');
-        target.classList.add('hidden');
+        await sleep(550);
-        target.classList.remove('flex');
+        dropdown.classList.remove('dropdown_close_animation');
+        dropdown.classList.add('hidden');
+        dropdown.classList.remove('flex');
     }
 }

resources/styles/main.css

@@ -130,7 +130,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  background-color: #1d60b5;
+  background: linear-gradient(to left, #1d60b5, #3b8fff);
   color: white;
 }
 .social p {
@@ -206,6 +206,7 @@
   width: 36px;
   height: 36px;
   position: relative;
+  cursor: pointer;
 }
 #header .dropdown-toggle .bar {
   padding: 0;
@@ -390,23 +391,93 @@ html, body {
 .dropdown {
   position: fixed;
   z-index: 2;
-  background-color: #706fff;
+  background: linear-gradient(to left bottom, #1d60b5, #003e86);
-  width: 100vw;
+  width: 100%;
   height: 90vh;
-  animation: slide-in-right 550ms;
+  -webkit-animation: drawer-open 550ms;
+  animation: drawer-open 550ms;
   flex-direction: column;
   align-items: center;
 }
 .dropdown .dropdown-nav-item {
-  color: white;
+  display: inline-block;
+  position: relative;
+  margin-top: 50px;
+  background: -webkit-linear-gradient(#FFFFFF, #adf0ff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
   font: 600 28px "Montserrat", sans-serif;
   text-decoration: none;
 }
-
+.dropdown .dropdown-nav-item:first-of-type {
-.dropdown_close_animation {
+  margin-top: 100px;
-  animation: 550ms slide-in-left;
+}
+.dropdown .dropdown-nav-item:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(to left, #FFF, #AFF);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+.dropdown .dropdown-nav-item:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
+.dropdown_close_animation {
+  -webkit-animation: drawer-close 550ms;
+  animation: drawer-close 550ms;
+}
+
+@-webkit-keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes drawer-close {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@-webkit-keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes drawer-open {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
 #container {
   height: 90vh;
   display: grid;