diff --git a/index.html b/index.html index e71b2b2..8175617 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,12 @@ + +
diff --git a/script.js b/script.js index 8e1480a..54fb7a3 100644 --- a/script.js +++ b/script.js @@ -137,6 +137,7 @@ const defaultPreferences = { view: "cards", accent: "violet", }; +const availableViews = ["cards", "list", "compact-cards", "compact-list"]; const preferences = { ...defaultPreferences, ...readPreferences() }; const catalog = document.querySelector("[data-catalog-root]"); @@ -355,10 +356,14 @@ function attachCardInteractions() { } function applyPreferences(nextPreferences) { + if (!availableViews.includes(nextPreferences.view)) { + nextPreferences.view = defaultPreferences.view; + } + document.documentElement.dataset.theme = nextPreferences.theme; document.documentElement.dataset.accent = nextPreferences.accent; - catalog.classList.toggle("cards-view", nextPreferences.view === "cards"); - catalog.classList.toggle("list-view", nextPreferences.view === "list"); + catalog.classList.remove("cards-view", "list-view", "compact-cards-view", "compact-list-view"); + catalog.classList.add(`${nextPreferences.view}-view`); setActiveButton(themeButtons, "theme", nextPreferences.theme); setActiveButton(viewButtons, "view", nextPreferences.view); setActiveButton(accentButtons, "accent", nextPreferences.accent); diff --git a/styles.css b/styles.css index 2f3f3b9..08eeb77 100644 --- a/styles.css +++ b/styles.css @@ -242,10 +242,11 @@ h1 { .segmented { flex: 1; min-height: 34px; + min-width: 0; border-radius: 12px; background: transparent; color: var(--muted); - font-size: 0.88rem; + font-size: 0.84rem; font-weight: 800; } @@ -560,7 +561,8 @@ h1 { grid-template-columns: 1fr; } -.catalog.list-view .nav-card { +.catalog.list-view .nav-card, +.catalog.compact-list-view .nav-card { min-height: 112px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 42px; @@ -568,11 +570,94 @@ h1 { gap: 16px; } -.catalog.list-view .arrow { +.catalog.list-view .arrow, +.catalog.compact-list-view .arrow { position: static; justify-self: end; } +.catalog.compact-cards-view .items-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.catalog.compact-list-view .items-grid { + grid-template-columns: 1fr; +} + +.catalog.compact-cards-view .section-head, +.catalog.compact-list-view .section-head { + padding: 18px 20px; +} + +.catalog.compact-cards-view .section-head p:not(.eyebrow), +.catalog.compact-list-view .section-head p:not(.eyebrow), +.catalog.compact-cards-view .group-head p:not(.group-number), +.catalog.compact-list-view .group-head p:not(.group-number), +.catalog.compact-cards-view .tags, +.catalog.compact-list-view .tags { + display: none; +} + +.catalog.compact-cards-view .section-head h2, +.catalog.compact-list-view .section-head h2 { + font-size: clamp(1.35rem, 3vw, 2rem); +} + +.catalog.compact-cards-view .group-head, +.catalog.compact-list-view .group-head { + padding: 14px 16px; + align-items: center; +} + +.catalog.compact-cards-view .group-head h3, +.catalog.compact-list-view .group-head h3 { + margin-top: 4px; + font-size: 1.05rem; +} + +.catalog.compact-cards-view .nav-card { + min-height: 132px; + gap: 10px; + padding: 14px; +} + +.catalog.compact-cards-view .nav-card img { + width: 44px; + height: 44px; +} + +.catalog.compact-cards-view .nav-card h4, +.catalog.compact-list-view .nav-card h4 { + font-size: 0.98rem; +} + +.catalog.compact-cards-view .item-type, +.catalog.compact-list-view .item-type { + font-size: 0.82rem; +} + +.catalog.compact-cards-view .arrow { + width: 30px; + height: 30px; + right: 12px; + bottom: 12px; +} + +.catalog.compact-list-view .nav-card { + min-height: 78px; + padding: 12px 14px; + grid-template-columns: 42px minmax(0, 1fr) 34px; +} + +.catalog.compact-list-view .nav-card img { + width: 42px; + height: 42px; +} + +.catalog.compact-list-view .item-number { + font-size: 0.72rem; +} + .empty-state { min-height: 280px; display: grid; @@ -603,6 +688,10 @@ h1 { .items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } + + .catalog.compact-cards-view .items-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } } @media (max-width: 720px) { @@ -626,6 +715,10 @@ h1 { flex-wrap: wrap; } + .control-group .segmented { + flex-basis: calc(50% - 4px); + } + .control-group > span { width: 100%; min-width: 0; @@ -657,6 +750,10 @@ h1 { padding: 12px; } + .catalog.compact-cards-view .items-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .nav-card { min-height: 210px; } @@ -666,7 +763,13 @@ h1 { min-height: 136px; } - .catalog.list-view .arrow { + .catalog.compact-list-view .nav-card { + grid-template-columns: 42px minmax(0, 1fr); + min-height: 84px; + } + + .catalog.list-view .arrow, + .catalog.compact-list-view .arrow { position: absolute; }