G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move language switch out of the nav into a floating corner widget

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-15 17:59:07 -04:00
parent eb9137b300
commit 965ec4c2c5
2 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/assets/styles.css
+7 -5
View File
@@ -889,12 +889,15 @@ h1, h2, h3, h4 { font-weight: 600; }
.dropdown { background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--bd); }
:root[data-theme="dark"] .dropdown { background: rgba(10, 14, 26, .96); }
.theme-btn, .menu-btn { border-radius: 10px; border-color: var(--bd); background: var(--glass); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bd); border-radius: 10px; background: var(--glass); flex: none; }
.lang-switch a, .lang-switch span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 7px; font: 600 11.5px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--slate); transition: color .15s ease, background-color .15s ease; }
.lang-switch {
position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 90;
display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--bd); border-radius: 12px;
background: var(--nav-bg, var(--glass)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 8px 28px rgba(2, 8, 23, .28);
}
.lang-switch a, .lang-switch span { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 8px; border-radius: 8px; font: 600 12px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--slate); transition: color .15s ease, background-color .15s ease; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch [aria-current] { color: var(--ink); background: rgba(26, 127, 255, .22); }
.mobile-menu .lang-switch { display: flex; width: max-content; margin-top: 20px; }
.mobile-menu .lang-switch a { padding: 0 6px; font-size: 12.5px; border-bottom: 0; }
/* Real logo on dark, vector recreation on light */
.logo-img { display: none; height: 30px; width: auto; }
@@ -956,7 +959,6 @@ h1, h2, h3, h4 { font-weight: 600; }
.brand-word { font-size: 12px; }
.logo-mark { width: 38px; }
.nav-cta { gap: 6px; }
.nav-cta .lang-switch { display: none; }
.hero { padding-top: 56px; }
.page-hero { padding-block: 48px 56px; }
.cluster { grid-template-columns: 1fr; margin-top: 48px; }