feature: update styling

2 files changed, 55 insertions, 8 deletions

diff --git a/src/styles/index.css b/src/styles/index.css
index 72a8b4f..97e3eb5 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -398,27 +398,44 @@ only screen and (max-width:960px) {
     }
 
     #nav-menu > ul {
-        flex-direction: column;
+        flex-direction: row;
+        flex-wrap: wrap;
         gap: 0.5rem;
     }
 
-    #nav-menu > ul > li {
+    /* Main links: full-width rows, left-aligned */
+    #nav-menu > ul > li:has(> a) {
+        flex: 0 0 100%;
+    }
+
+    #nav-menu > ul > li:has(> a) a {
         width: 100%;
+        text-align: left;
+        font-size: 1.5rem;
+        padding: 0.75rem 0;
     }
 
-    #nav-menu > ul > li[style*="margin-left: auto"] {
+    /* Theme buttons: single side-by-side row */
+    #nav-menu > ul > li:has(> button[id^="theme_button"]) {
+        flex: 1;
         margin-left: 0 !important;
         margin-top: 1rem;
     }
 
+    #nav-menu > ul > li:has(> button[id^="theme_button"]) button {
+        width: 100%;
+        text-align: center;
+    }
+
+    /* Dark/light toggle: full-width row */
     #nav-menu > ul > li[style*="margin-left: 1rem"] {
+        flex: 0 0 100%;
         margin-left: 0 !important;
     }
 
-    #nav-menu > ul button,
-    #nav-menu > ul a {
+    #nav-menu > ul > li[style*="margin-left: 1rem"] button {
         width: 100%;
-        text-align: center;
+        text-align: left;
     }
 
     header > nav {
diff --git a/src/styles/resume.css b/src/styles/resume.css
index 97e504e..8bd2014 100644
--- a/src/styles/resume.css
+++ b/src/styles/resume.css
@@ -59,10 +59,40 @@ html {
     margin-top: 0.2rem;
 }
 
-.experience-tech > svg {
+.tech-icon {
+    position: relative;
+    display: inline-flex;
+    margin-right: 0.5rem;
+}
+
+.tech-icon > svg {
     width: 1.125rem;
     height: 1.125rem;
-    margin-right: 0.5rem;
+    display: block;
+}
+
+.tech-icon::after {
+    content: attr(data-tech);
+    position: absolute;
+    bottom: calc(100% + 0.35rem);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.25rem;
+    background: var(--tooltip-bg, #24292e);
+    color: var(--tooltip-fg, #fff);
+    font-size: 0.7rem;
+    line-height: 1.2;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.12s ease;
+    z-index: 10;
+}
+
+.tech-icon:hover::after,
+.tech-icon:focus-visible::after {
+    opacity: 1;
 }
 
 .skills_table_container {