diff --git a/index.html b/index.html index e5073b7..7827fdf 100644 --- a/index.html +++ b/index.html @@ -1217,6 +1217,41 @@ .news-teaser { font-size: 0.88rem; margin-bottom: 18px; + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; + } + + .news-card-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .news-read-btn { + display: inline-flex; + align-items: center; + gap: 8px; + align-self: flex-start; + margin-top: auto; + padding: 10px 20px; + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--gold); + border: 1px solid rgba(230, 81, 0, 0.24); + border-radius: 999px; + background: rgba(230, 81, 0, 0.06); + cursor: pointer; + transition: background 0.25s, color 0.25s, border-color 0.25s; + } + + .news-read-btn:hover { + background: var(--gold); + color: #fff; + border-color: var(--gold); } .news-date { @@ -1755,6 +1790,229 @@ padding-top: 8px; } + @keyframes articleFlyIn { + 0% { + opacity: 0; + transform: translateY(60px) scale(0.96); + } + 100% { + opacity: 1; + transform: translateY(0) scale(1); + } + } + + @keyframes articleOverlayIn { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + #article-overlay { + position: fixed; + inset: 0; + z-index: 9500; + display: none; + align-items: center; + justify-content: center; + padding: 20px; + background: rgba(62, 39, 35, 0.88); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + } + + #article-overlay.is-open { + display: flex; + animation: articleOverlayIn 0.3s ease-out; + } + + #article-box { + position: relative; + width: 100%; + max-width: 720px; + max-height: 88vh; + display: flex; + flex-direction: column; + background: #fdf6ee; + border-radius: 6px; + border: 1px solid rgba(93, 64, 55, 0.22); + box-shadow: + 0 40px 100px rgba(0, 0, 0, 0.35), + 0 0 0 1px rgba(255, 243, 224, 0.15); + animation: articleFlyIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; + overflow: hidden; + } + + #article-box .article-rule { + height: 4px; + background: linear-gradient(90deg, var(--gold), var(--gold-hi), var(--gold)); + flex-shrink: 0; + } + + #article-box .article-header { + padding: 32px 40px 0; + text-align: center; + flex-shrink: 0; + border-bottom: 1px solid rgba(93, 64, 55, 0.12); + padding-bottom: 24px; + } + + #article-box .article-header .article-area { + font-family: Georgia, "Times New Roman", serif; + font-size: 0.7rem; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--gold); + font-weight: 400; + } + + #article-box .article-header h2 { + font-family: Georgia, "Times New Roman", serif; + font-size: 2rem; + line-height: 1.2; + color: #3e2723; + margin: 12px 0 10px; + font-weight: 400; + } + + #article-box .article-header .article-date { + font-family: Georgia, "Times New Roman", serif; + font-size: 0.78rem; + color: #8d6e63; + font-style: italic; + } + + #article-box .article-body { + padding: 28px 40px 40px; + overflow-y: auto; + flex: 1; + font-family: Georgia, "Times New Roman", serif; + font-size: 1.05rem; + line-height: 1.85; + color: #4e342e; + column-count: 1; + } + + #article-box .article-body::-webkit-scrollbar { + width: 8px; + } + + #article-box .article-body::-webkit-scrollbar-track { + background: rgba(93, 64, 55, 0.06); + } + + #article-box .article-body::-webkit-scrollbar-thumb { + background: rgba(230, 81, 0, 0.25); + border-radius: 4px; + } + + #article-box .article-body::-webkit-scrollbar-thumb:hover { + background: rgba(230, 81, 0, 0.45); + } + + #article-box .article-body h2, + #article-box .article-body h3 { + font-family: Georgia, "Times New Roman", serif; + font-weight: 400; + color: #3e2723; + margin: 28px 0 12px; + line-height: 1.3; + } + + #article-box .article-body h2 { + font-size: 1.35rem; + border-bottom: 1px solid rgba(93, 64, 55, 0.12); + padding-bottom: 8px; + } + + #article-box .article-body h3 { + font-size: 1.15rem; + } + + #article-box .article-body p { + margin-bottom: 16px; + text-align: justify; + hyphens: auto; + } + + #article-box .article-body ul { + margin: 12px 0; + padding-left: 20px; + list-style: disc; + } + + #article-box .article-body li { + margin-bottom: 6px; + } + + #article-box .article-body a.cta { + display: inline-block; + padding: 14px 28px; + background: var(--gold); + color: #fff; + text-decoration: none; + border-radius: 6px; + font-weight: 700; + font-family: "Segoe UI", system-ui, sans-serif; + font-size: 0.85rem; + letter-spacing: 0.04em; + margin-top: 12px; + transition: background 0.25s; + } + + #article-box .article-body a.cta:hover { + background: var(--gold-hi); + } + + #article-box .article-body iframe { + width: 100%; + max-width: 100%; + height: auto; + aspect-ratio: 16 / 9; + border-radius: 6px; + margin: 20px 0; + border: 1px solid rgba(93, 64, 55, 0.12); + } + + #article-close { + position: absolute; + top: 14px; + right: 14px; + width: 36px; + height: 36px; + border-radius: 50%; + border: none; + background: rgba(93, 64, 55, 0.08); + color: #8d6e63; + font-size: 1.2rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s, color 0.2s; + z-index: 2; + } + + #article-close:hover { + background: rgba(230, 81, 0, 0.12); + color: var(--gold); + } + + @media (max-width: 860px) { + #article-box { + max-height: 92vh; + border-radius: 4px; + } + #article-box .article-header { + padding: 24px 20px 18px; + } + #article-box .article-header h2 { + font-size: 1.5rem; + } + #article-box .article-body { + padding: 20px 20px 28px; + font-size: 0.95rem; + } + } + #modal-confirm .confirm-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; @@ -1941,7 +2199,7 @@
+
+
+ +
+
+
+

+
+
+
+
+
+
', - post.image ? '' + + '.webp' : '', '
', "
", + '
', '
' + post.area + "
", + '' + formatDate(post.date) + "", + "
", '

' + post.title + "

", '

' + post.teaser + "

", - '' + - formatDate(post.date) + - "", "
", + '', "
", "
", ].join(""); @@ -2905,7 +3177,9 @@ "No posts match your search.", ); } else { - grid.innerHTML = pagePosts.map(postMarkup).join(""); + grid.innerHTML = pagePosts.map(function(p, i) { + return postMarkup(p, currentPage * PAGE_SIZE + i); + }).join(""); } if (window._mbsTracking) window._mbsTracking.applyToLinks(grid); @@ -2961,6 +3235,45 @@ searchTrackTimer = setTimeout(trackSearch, 450); }); + var articleOverlay = document.getElementById('article-overlay'); + var articleClose = document.getElementById('article-close'); + var articleTitle = document.getElementById('article-title'); + var articleArea = document.getElementById('article-area'); + var articleDate = document.getElementById('article-date'); + var articleBody = document.getElementById('article-body'); + + function openArticle(index) { + var post = allPosts[index]; + if (!post) return; + articleArea.textContent = post.area || ''; + articleTitle.textContent = post.title || ''; + articleDate.textContent = formatDate(post.date); + articleBody.innerHTML = post.content || ''; + articleBody.scrollTop = 0; + articleOverlay.classList.add('is-open'); + document.body.style.overflow = 'hidden'; + } + + function closeArticle() { + articleOverlay.classList.remove('is-open'); + document.body.style.overflow = ''; + } + + articleClose.addEventListener('click', closeArticle); + articleOverlay.addEventListener('click', function(e) { + if (e.target === articleOverlay) closeArticle(); + }); + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && articleOverlay.classList.contains('is-open')) closeArticle(); + }); + + grid.addEventListener('click', function(e) { + var btn = e.target.closest('.news-read-btn'); + if (!btn) return; + var idx = parseInt(btn.getAttribute('data-article-index'), 10); + openArticle(idx); + }); + fetch(POSTS_URL) .then(function (response) { return response.json();