update various UI/UX

stepanjakl · Jun 21, 2024 · 66a0f5a · 66a0f5a
1 parent 33068ff
commit 66a0f5a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -352,7 +352,7 @@
                                 <a href="#profile"
                                    aria-label="Learn more about me"
                                    rel="noreferrer"
-                                   class="flex align-items-center tooltip_wrapper">
+                                   class="z-4 flex align-items-center tooltip_wrapper">
                                     <span id="menu_link_icon"
                                           class="inline-flex rounded-full"
                                           style="padding: 0.59375rem;
@@ -388,7 +388,7 @@
                                    rel="noreferrer"
                                    style="cursor: progress"
                                    onclick="document.activeElement.blur(); return false"
-                                   class="flex align-items-center tooltip_wrapper"
+                                   class="z-3 flex align-items-center tooltip_wrapper"
                                    disabled>
                                     <span id="menu_link_icon"
                                           class="inline-flex rounded-full"
@@ -430,7 +430,7 @@
                                        id="menu_button-close"
                                        tabindex="0"
                                        onclick="document.querySelector('#menu_dropdown').close(); document.querySelector('#menu_button-open').focus()"
-                                       class="z-2 inset-0"
+                                       class="inset-0"
                                        style="position: absolute"
                                        aria-label="Close dropdown menu"></a>
                                     <button id="menu_button"
@@ -446,7 +446,7 @@
                                         </div>
                                     </button>
                                     <a href="#" id="underlay_menu" class="fixed inset-0 cursor-default"></a>
-                                    <dialog id="menu_dropdown" class="z-1 absolute pt-1/2">
+                                    <dialog id="menu_dropdown" class="z-10 absolute pt-1/2">
                                         <div>
                                             <a href="https://cal.com/stepanjakl"
                                                target="_blank"

diff --git a/styles/animation.css b/styles/animation.css
@@ -85,7 +85,7 @@ body {
         pointer-events: none;
     }
 
-    99.9% {
+    25% {
         pointer-events: none;
     }
 
@@ -429,6 +429,14 @@ svg.animate-face-icon path {
     color: var(--icon);
 }
 
+#menu:target #menu_button {
+    z-index: 6;
+}
+
+#menu:target #menu_button-close {
+    z-index: 7;
+}
+
 #menu_button_wrapper:hover #menu_button, #menu:target #menu_button {
     transition: color var(--animate-in-segment-2\/3) linear,  background-color var(--animate-in-segment-2\/3) linear;
     transform: translate3d(0,0,0);
@@ -858,7 +866,7 @@ svg.animate-face-icon path {
 }
 
 #debug:not(:checked)~main #menu:target #underlay_menu {
-    z-index: 0;
+    z-index: 5;
     pointer-events: auto;
     opacity: 1;
     transition: opacity var(--animate-in-segment) linear;

diff --git a/styles/style.css b/styles/style.css
@@ -877,17 +877,17 @@ main {
     }
 }
 
-#menu:target #menu_button_wrapper>a:first-of-type {
+/* #menu:target #menu_button_wrapper>a:first-of-type {
     z-index: -1;
-}
+} */
 
 #menu_button_wrapper>a:nth-of-type(2) {
     z-index: -1;
 }
 
-#menu:target #menu_button_wrapper>a:nth-of-type(2) {
+/* #menu:target #menu_button_wrapper>a:nth-of-type(2) {
     z-index: 2;
-}
+} */
 
 
 /* Intro - Right Column - Menu Dropdown */

diff --git a/styles/utility.css b/styles/utility.css
@@ -387,6 +387,22 @@ body {
     z-index: 2;
 }
 
+.z-3 {
+    z-index: 3;
+}
+
+.z-4 {
+    z-index: 4;
+}
+
+.z-5 {
+    z-index: 5;
+}
+
+.z-10 {
+    z-index: 10;
+}
+
 
 /* Inset */