ben/HowDoYouConvert
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes

Browse Source
This commit is contained in:
Codex
2026-03-07 23:54:54 +00:00
parent 055ecdebc3
commit de10c47a8c
1 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
hdyc-svelte/src/app.css
View File

@@ -371,6 +371,7 @@ a:focus-visible {
font-weight: 800; font-weight: 800;
font-size: 1.15rem; font-size: 1.15rem;
letter-spacing: -0.02em; letter-spacing: -0.02em;
white-space: nowrap;
} }
.site-logo .logo-accent { .site-logo .logo-accent {
color: var(--accent); color: var(--accent);
@@ -466,11 +467,11 @@ a:focus-visible {
.palette-dots { .palette-dots {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
width: 38px; max-width: 38px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: visible; overflow-y: visible;
flex: 0 0 auto; flex: 0 0 auto;
transition: width 0.2s ease, gap 0.2s ease; transition: max-width 0.2s ease, gap 0.2s ease;
} }
.palette-dot { .palette-dot {
width: 30px; width: 30px;
@@ -486,9 +487,10 @@ a:focus-visible {
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
order: 0; order: 0;
transform-origin: center;
} }
.palette-dot:hover { .palette-dot:hover {
transform: translateY(-1px); transform: scale(1.05);
} }
.palette-dot.active, .palette-dot.active,
.palette-dot:focus-visible { .palette-dot:focus-visible {
@@ -510,7 +512,7 @@ a:focus-visible {
} }
.floating-palette-controls:hover .palette-dots, .floating-palette-controls:hover .palette-dots,
.floating-palette-controls:focus-within .palette-dots { .floating-palette-controls:focus-within .palette-dots {
width: 360px; max-width: min(280px, calc(100vw - 2rem));
gap: 0.25rem; gap: 0.25rem;
} }
.floating-palette-controls:hover .palette-dot:not(.active), .floating-palette-controls:hover .palette-dot:not(.active),
@@ -666,15 +668,25 @@ a:focus-visible {
} }
.category-grid { .category-grid {
width: min(1160px, 100%); width: min(1160px, 100%);
display: flex; margin: 0 auto;
flex-wrap: wrap; display: grid;
justify-content: center; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.75rem, 1.3vw, 1.25rem); gap: clamp(0.75rem, 1.3vw, 1.25rem);
} }
.category-grid .category-card { .category-grid .category-card {
flex: 0 1 clamp(180px, 22vw, 220px); width: 100%;
min-width: 180px; }
max-width: 220px;
@media (min-width: 640px) {
.category-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
@media (min-width: 1280px) {
.category-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
} }
/* ─── Calculator List (category page) ────────────────────── */ /* ─── Calculator List (category page) ────────────────────── */
@@ -822,6 +834,25 @@ a:focus-visible {
} }
} }
@media (max-width: 960px) {
.site-header {
gap: 0.5rem;
}
.header-left,
.header-right {
min-width: 0;
}
.site-logo {
flex: 1 1 auto;
}
.desktop-header-search {
display: none;
}
.header-icon-btn {
display: inline-flex;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.site-header { .site-header {
padding: 0 1rem; padding: 0 1rem;