diff options
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/index.css | 29 | ||||
| -rw-r--r-- | src/styles/resume.css | 34 |
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 { |