From 13b1b773c6f4310516171795b0fedfeb46701d2f Mon Sep 17 00:00:00 2001 From: Kato Date: Sat, 5 Sep 2026 18:43:23 +0000 Subject: [PATCH] =?UTF-8?q?Wiki=20cards=20=E2=80=94=20adopt=20Hermes=20use?= =?UTF-8?q?r-stories=20tile=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Masonry column layout (3 cols, 2 tablet, 1 mobile) via CSS columns - Tile: 14px radius, thin border, subtle shadow, hover lift via translate - Topic-colored 3px accent bar across top edge (CSS var --topic-accent) - Pill-shaped topic badge (999px radius) instead of boxed badge - Removed stale duplicate visual styles from animation block --- css/styles.css | 93 +++++++++++++++++++++++++++----------------------- js/main.js | 4 ++- 2 files changed, 53 insertions(+), 44 deletions(-) diff --git a/css/styles.css b/css/styles.css index 256f7a1..a0a4d42 100644 --- a/css/styles.css +++ b/css/styles.css @@ -234,24 +234,10 @@ animation: cardStack 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } -/* Wiki cards — staggered entrance */ +/* Wiki cards — staggered entrance (visual design lives in WIKI NEW DESIGN section) */ .wiki-card-new { opacity: 0; transform: translateY(25px); - transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), - transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); - /* Visual styles */ - background: #ffffff; - border-radius: 12px; - padding: 16px; - border: 1px solid #e4e6eb; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - cursor: pointer; - transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); -} -.wiki-card-new:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - border-color: #1877f2; } .wiki-card-new.visible { opacity: 1 !important; @@ -1064,12 +1050,18 @@ body[data-lang="en"] .hide-de { display: none !important; } /* ======================================== WIKI CARDS ======================================== */ +/* Masonry column grid (like Hermes user-stories) */ .wiki-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); - gap: 20px; + column-count: 3; + column-gap: 20px; margin-top: 30px; } +@media (max-width: 1024px) { + .wiki-grid { column-count: 2; } +} +@media (max-width: 640px) { + .wiki-grid { column-count: 1; } +} .wiki-card { padding: 16px; border-radius: 10px; @@ -1122,61 +1114,76 @@ body[data-lang="en"] .hide-de { display: none !important; } .wiki-card-subtopic { color: #1877f2; } /* ======================================== - WIKI NEW DESIGN — Individual Cards + WIKI NEW DESIGN — Hermes-style tiles + (accent top bar, pill badge, masonry tile) */ .wiki-card-new { + break-inside: avoid; + -webkit-column-break-inside: avoid; background: #fff; - border-radius: 12px; - padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); - transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); - cursor: pointer; - border-left: 4px solid #1877f2; + border: 1px solid #e4e6eb; + border-radius: 14px; + padding: 18px 19px 17px; + margin: 0 0 20px; + display: inline-block; + width: 100%; position: relative; overflow: hidden; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); + cursor: pointer; + transition: translate 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } +/* topic-colored accent bar across the top edge */ +.wiki-card-new::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 3px; + background: var(--topic-accent, #1877f2); + opacity: 0.9; +} +/* hover lift uses `translate` (separate property) so the cardStack + animation's forwards-fill on `transform` doesn't kill it */ .wiki-card-new:hover { - transform: translateY(-3px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - border-left-color: #0d5fc9; + translate: 0 -3px; + border-color: var(--topic-accent, #1877f2); + box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25); } .wiki-card-new:active { - transform: translateY(0) scale(0.99); + scale: 0.99; } .wiki-topic-badge { display: inline-block; - padding: 4px 10px; - font-size: 12px; + padding: 2px 10px; + font-size: 11px; font-weight: 600; - border-radius: 6px; - margin-bottom: 12px; + border-radius: 999px; + margin-bottom: 10px; text-transform: uppercase; - letter-spacing: 0.5px; - border-left: 4px solid transparent; - transition: all 0.2s ease; + letter-spacing: 0.04em; } .wiki-subtopic-headline { - font-size: 18px; + font-size: 16px; font-weight: 700; - color: #1a1a2e; - margin: 0 0 12px 0; + color: #1c1e21; + margin: 0 0 8px 0; line-height: 1.3; } .wiki-teaser { font-size: 14px; - color: #65676b; - line-height: 1.5; - margin: 0 0 16px 0; + color: #57606a; + line-height: 1.55; + margin: 0 0 14px 0; } .wiki-card-meta { display: flex; align-items: center; justify-content: space-between; - padding-top: 12px; + padding-top: 10px; border-top: 1px solid #f0f2f5; } diff --git a/js/main.js b/js/main.js index 6aca72c..29d84fc 100644 --- a/js/main.js +++ b/js/main.js @@ -762,6 +762,8 @@ function renderWikiCards(data) { const topic = currentLang === 'en' && item.topic_en ? item.topic_en : (item.topic || 'Unknown'); const topicColor = getTopicColor(topic); + // Feed topic accent into CSS custom properties (top bar + hover border) + card.style.setProperty('--topic-accent', topicColor.border); const subtopic = currentLang === 'en' && item.subtopic_en ? item.subtopic_en : (item.subtopic || ''); const content = currentLang === 'en' && item.wiki_en ? item.wiki_en : (item.wiki || ''); @@ -769,7 +771,7 @@ function renderWikiCards(data) { const teaser = content.trim().substring(0, 180); const teaserEnd = content.trim().length > 180 ? '...' : ''; - const badgeStyle = 'background:' + topicColor.bg + ';color:' + topicColor.text + ';border-left:4px solid ' + topicColor.border; + const badgeStyle = 'background:' + topicColor.bg + ';color:' + topicColor.text; card.innerHTML = '' + escapeHtml(topic).toUpperCase() + '' + '

' + escapeHtml(subtopic) + '

' +