diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..c8e3da9 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,454 @@ +/* General Styles */ +* { + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #fff; + color: #333; +} + +.container { + width: 90%; + max-width: 1200px; + margin: auto; + overflow: hidden; + padding: 0 20px; +} + +/* --- Sticky Navigation Bar --- */ +.sticky-nav-wrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: #FADADD; /* 保持截图中的粉色背景 */ + z-index: 1000; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + transition: background-color 0.3s ease; /* 新增：平滑过渡效果 */ +} +/* .sticky-nav-wrapper .container 的 padding: 0 20px; 会保持内容居中 */ + +/* 新增：导航栏滚动后的样式 */ +.sticky-nav-wrapper.scrolled-nav { + background-color: rgba(250, 218, 221, 0.85); /* 半透明粉色，可调整透明度 (0.85) */ +} + +.header-top-bar-content { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 0; /* 导航栏的垂直内边距 */ +} + +.logo a { + font-size: 24px; + font-weight: bold; + color: #333; + text-decoration: none; + text-transform: uppercase; +} + +.main-nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; +} + +.main-nav li { + margin-left: 25px; +} + +.main-nav a { + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 16px; +} + +.main-nav a:hover { + color: #007bff; +} + +/* --- Hero Area --- */ +.site-hero-area { + background-color: #FADADD; /* 粉色背景，现在只用于英雄图片区域 */ + /* padding-top 将由 JS 设置，以避免被固定导航栏遮挡 */ +} + +.hero-image-placeholder { + background-color: #FEC5D6; /* 英雄图占位符的备用背景色 */ + height: 300px; /* 英雄图高度 */ + display: flex; + align-items: center; + justify-content: center; + color: #864659; /* 英雄图上文字颜色 */ + font-size: 2em; + font-weight: bold; + text-align: center; + background-image: url('placeholder-hero.jpg'); /* 替换为您的英雄图片URL */ + background-size: cover; + background-position: center; +} + +.hero-image-placeholder .hero-text { + background-color: rgba(250, 218, 221, 0.6); /* 文字背景，增加可读性 */ + padding: 10px 20px; + border-radius: 5px; +} + +/* --- Main Content Area --- */ +.main-content-area { /* 用于包裹博客主要内容，方便整体控制 */ + /* 如果需要，可以在这里添加额外的上边距，但目前由 .site-hero-area 的 padding-top 控制 */ +} + +.blog-main-title { + text-align: center; + font-size: 28px; + color: #333; + margin: 40px 0 20px 0; + font-weight: 600; +} + +.filter-buttons { + text-align: center; + margin-bottom: 30px; +} + +.filter-button { + background-color: #007bff; + color: white; + border: none; + padding: 10px 20px; + margin: 0 5px; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + font-weight: 500; +} + +.filter-button:hover { + background-color: #0056b3; +} + +.posts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; +} + +/* --- Post Card Styles (Corrected and Improved) --- */ +.post-card { + background: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + overflow: hidden; + display: flex; + flex-direction: column; +} + +.post-card-image { + height: 200px; + background-color: #333; /* 图片加载失败时的备用背景 */ + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.post-card-image .play-icon { + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); + transition: background-color 0.2s ease-in-out; + font-size: 0; /* 隐藏原始的 "►" 字符 */ + border: none; /* 确保没有额外的边框 */ +} + +.post-card-image .play-icon::before { + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 10px 0 10px 15px; /* TopHeight RightWidth BottomHeight LeftWidth */ + border-color: transparent transparent transparent rgba(255, 255, 255, 0.95); /* 三角形颜色 */ + display: block; + margin-left: 3px; /* 根据实际效果微调此值以使三角形视觉居中 */ +} + +.post-card-image .play-icon:hover { + background-color: rgba(0, 0, 0, 0.7); /* 悬停时背景变暗 */ +} + +.post-card-image .image-title-overlay { + position: absolute; + top: 15px; + left: 50%; + transform: translateX(-50%); + color: white; + background-color: rgba(0,0,0,0.6); + padding: 5px 15px; + border-radius: 3px; + font-size: 1em; + font-weight: bold; + text-align: center; + white-space: nowrap; +} + +.post-card-image .image-subtitle-overlay { + position: absolute; + top: 48px; /* 示例值，请根据 image-title-overlay 的实际高度和间距调整 */ + left: 50%; + transform: translateX(-50%); + color: #eee; + background-color: rgba(0,0,0,0.5); + padding: 2px 8px; + border-radius: 3px; + font-size: 0.8em; + white-space: nowrap; +} + +.polytopia-watermark { + position: absolute; + bottom: 10px; + left: 10px; + color: rgba(255, 255, 255, 0.6); + background-color: rgba(0,0,0,0.4); + padding: 2px 5px; + border-radius: 2px; + font-size: 0.7em; + text-transform: uppercase; +} + +.post-card-content { + padding: 20px; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.post-card-content h2 { + margin-top: 0; + margin-bottom: 5px; + font-size: 1.3em; + color: #222; + font-weight: 600; +} + +.post-card-content .date { + font-size: 0.85em; + color: #666; + margin-bottom: 15px; + display: block; +} + +.post-card-content p { + font-size: 0.95em; + color: #444; + margin-bottom: 15px; + flex-grow: 1; +} + +.post-card-content .go-there-link { + color: #007bff; + text-decoration: none; + font-weight: 500; + font-size: 0.95em; + align-self: flex-start; +} + +.post-card-content .go-there-link:hover { + text-decoration: underline; +} + +/* --- Footer Styles --- */ +footer { + background: #222; + color: #ccc; + text-align: center; + padding: 40px 20px 20px 20px; + margin-top: 40px; +} + +.footer-top-social { + margin-bottom: 30px; + display: flex; + justify-content: center; + align-items: center; +} + +.footer-top-social a { + color: #fff; + text-decoration: none; + font-size: 1.3em; + margin: 0 12px; +} + +.footer-top-social a:hover { + color: #00A2FF; +} + +footer .footer-columns { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + margin-bottom: 30px; + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} + +footer .footer-column { + flex: 1; + min-width: 200px; + margin: 10px 20px; + text-align: left; +} + +footer .footer-column h4 { + color: #fff; + border-bottom: none; + padding-bottom: 5px; + margin-bottom: 15px; + font-size: 1.1em; + font-weight: 600; +} + +footer .footer-column ul { + list-style: none; + padding: 0; +} + +footer .footer-column ul li { + margin-bottom: 10px; +} + +footer .footer-column ul li a { + color: #bbb; + font-size: 0.95em; +} + +footer .footer-column ul li a:hover { + color: #fff; +} + +.community-channels-title { + font-size: 1.4em; + color: #fff; + margin-top: 40px; + margin-bottom: 20px; + font-weight: 600; +} + +.footer-bottom-social { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-bottom: 30px; +} + +.footer-bottom-social a { + background-color: #333; + color: #fff; + text-decoration: none; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2em; + margin: 8px; + transition: background-color 0.3s ease; +} + +.footer-bottom-social a:hover { + background-color: #007bff; +} + +footer .copyright { + font-size: 0.9em; + color: #888; + margin-top: 20px; +} + +/* --- Responsive Adjustments --- */ +@media (max-width: 768px) { + .header-top-bar-content { /* 调整固定导航栏在小屏幕上的表现 */ + flex-direction: column; + padding: 10px 0; /* 减少垂直内边距 */ + } + .logo { + margin-bottom: 10px; + } + .main-nav ul { + justify-content: center; + flex-wrap: wrap; + } + .main-nav li { + margin: 5px 10px; + } + + .site-hero-area { + /* padding-top will be dynamically adjusted by JS */ + } + .hero-image-placeholder { + height: 200px; /* 减小英雄图高度 */ + font-size: 1.5em; + } + .blog-main-title { + font-size: 24px; + } + .filter-button { + padding: 8px 15px; + font-size: 14px; + } + .posts-grid { + grid-template-columns: 1fr; /* 单列博文 */ + } + .container { /* 全局 container 调整 */ + width: 95%; + padding: 0 10px; + } + /* 固定导航栏内的 .container 也继承此处的 padding */ + + footer .footer-columns { + flex-direction: column; + align-items: center; + } + footer .footer-column { + text-align: center; + margin-bottom: 25px; + width: 100%; + } + footer .footer-column h4 { + text-align: center; + } + .footer-top-social { + margin-bottom: 20px; + } + .community-channels-title { + margin-top: 20px; + font-size: 1.2em; + } + .footer-bottom-social a { + width: 36px; + height: 36px; + font-size: 1.1em; + margin: 5px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..10ce90a --- /dev/null +++ b/index.html @@ -0,0 +1,104 @@ + + + + + + POLYTOPIA - The Battle of Polytopia Official Blog (复刻版) + + + + + + + + +
+
+ POLYTOPIA ILLUSTRATION +
+
+ + +
+
+

POLYTOPIA BLOG POSTS

+
+ + +
+
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/js/blog-data.json b/js/blog-data.json new file mode 100644 index 0000000..db72401 --- /dev/null +++ b/js/blog-data.json @@ -0,0 +1,119 @@ +[ + { + "id": 1, + "title": "Solaris – The Polaris Skin", + "date": "May 7, 2025", + "description": "New Skin Release: Solaris start with powers to turn water into lava and enemies into ashes. Master Heatwork, Geothermics, Explosives, and more. Get it in the Tribe Picker on mobile or as DLC on Steam. (50% on the main game on Steam). Tap to get it.", + "imageUrl": "solaris_skin.jpg", + "imageTitleOverlay": "SOLARIS", + "imageSubtitleOverlay": "Polaris Skin", + "watermark": "THE BATTLE OF POLYTOPIA", + "hasPlayIcon": false, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 2, + "title": "Solaris – Pyro", + "date": "May 6, 2025", + "description": "Tap to learn how to create perfect barbecue conditions.", + "imageUrl": "pyro_skin.jpg", + "imageTitleOverlay": "PYRO", + "imageSubtitleOverlay": "Polaris Skin", + "watermark": "THE BATTLE OF POLYTOPIA", + "hasPlayIcon": true, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 3, + "title": "Luxidoor Tribe Moon", + "date": "May 2, 2025", + "description": "Some shackles are gilded. The Aumux have built this empire as much as we have. But if this path continues… (Tap to read more).", + "imageUrl": "luxidoor_moon.jpg", + "imageTitleOverlay": "LUXIDOOR", + "imageSubtitleOverlay": "Tribe Moon", + "watermark": "THE BATTLE OF POLYTOPIA", + "hasPlayIcon": false, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 4, + "title": "Xin-Xi Lore", + "date": "May 1, 2025", + "description": "High in the mountains, the Xin-xi endure — disciplined, silent, and unshakable. Lean everything about the Xin-xi and Sha-po", + "imageUrl": "xinxi_lore.jpg", + "imageTitleOverlay": "MOUNTAINS SPIRIT STEEL", + "imageSubtitleOverlay": "LORE", + "watermark": "XIN-XI SHA-PO", + "hasPlayIcon": true, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 5, + "title": "Walpurgis Night", + "date": "April 30, 2025", + "description": "Today we celebrate Walpurgis Night in Sweden. This means we light bonfires and welcome the arrival of spring. Tap for info on what's coming up next.", + "imageUrl": "walpurgis_night.jpg", + "imageTitleOverlay": "WALPURGIS NIGHT", + "imageSubtitleOverlay": "", + "watermark": "THE BATTLE OF POLYTOPIA", + "hasPlayIcon": true, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 6, + "title": "∑∫ỹriȱŋ Week", + "date": "April 21, 2025", + "description": "50% on ∑∫ỹriȱŋ on Steam & Mobile. The Shard of D'Naeh calls to those who can hear it, a torrent of insidious promises and lies. Tap to view full ₼idŋighţ Skin Lore.", + "imageUrl": "elyrion_week.jpg", + "imageTitleOverlay": "∑∫ỹriȱŋ", + "imageSubtitleOverlay": "Tribe Week", + "watermark": "THE BATTLE OF POLYTOPIA", + "hasPlayIcon": false, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 7, + "title": "Cosmic Observations", + "date": "April 20, 2025", + "description": "There have been observations of cosmic eggs. Tap to view more.", + "imageUrl": "cosmic_observations.jpg", + "imageTitleOverlay": "COSMIC OBSERVATIONS", + "imageSubtitleOverlay": "", + "watermark": "POLYTOPIA NEWS", + "hasPlayIcon": false, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 8, + "title": "Xin-Xi Polysseum", + "date": "April 11, 2025", + "description": "The Xin-Xi like to turn mountains into their greatest weapon, make sure you do the same in this month's Polysseum. Tap to join.", + "imageUrl": "xinxi_polysseum.jpg", + "imageTitleOverlay": "XIN-XI POLYSSEUM", + "imageSubtitleOverlay": "", + "watermark": "TOURNAMENT", + "hasPlayIcon": false, + "linkUrl": "#", + "linkText": "Go There" + }, + { + "id": 9, + "title": "Xin-Xi Tribe Moon", + "date": "April 1, 2025", + "description": "Faceless ghosts, nameless shadows—the Sha-po live only to serve the Xin-xi throne. Tap to read more.", + "imageUrl": "xinxi_tribe_moon_april.jpg", + "imageTitleOverlay": "XIN XI", + "imageSubtitleOverlay": "Tribe Moon", + "watermark": "LORE", + "hasPlayIcon": false, + "linkUrl": "#", + "linkText": "Go There" + } +] \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..ac16d85 --- /dev/null +++ b/js/main.js @@ -0,0 +1,90 @@ +// 主要JavaScript功能 + +// --- 动态调整英雄区上内边距 --- +function adjustHeroAreaPadding() { + const stickyNav = document.getElementById('stickyNavWrapper'); + const heroArea = document.getElementById('siteHeroArea'); + if (stickyNav && heroArea) { + const navHeight = stickyNav.offsetHeight; + heroArea.style.paddingTop = navHeight + 'px'; + } +} + +// --- 新增：处理导航栏滚动时的背景变化 --- +function handleStickyNavScroll() { + const stickyNav = document.getElementById('stickyNavWrapper'); + const scrollThreshold = 10; // 滚动多少像素后改变背景 (可调整) + + if (stickyNav) { + if (window.scrollY > scrollThreshold) { + stickyNav.classList.add('scrolled-nav'); + } else { + stickyNav.classList.remove('scrolled-nav'); + } + } +} + +// --- 博文卡片生成逻辑 --- +function createPostCard(post) { + const card = document.createElement('article'); + card.className = 'post-card'; + let imageOverlayHTML = ''; + if (post.imageTitleOverlay) { + imageOverlayHTML += `
${post.imageTitleOverlay}
`; + } + if (post.imageSubtitleOverlay) { + imageOverlayHTML += `
${post.imageSubtitleOverlay}
`; + } + card.innerHTML = ` +
+ ${imageOverlayHTML} + ${post.hasPlayIcon ? '►' : ''} + ${post.watermark ? `${post.watermark}` : ''} +
+
+

${post.title}

+ ${post.date} +

${post.description}

+ ${post.linkText} +
+ `; + return card; +} + +// --- 显示博文 --- +function displayPosts() { + const postsGrid = document.getElementById('postsGrid'); + if (postsGrid) { + // 从JSON文件加载博客数据 + fetch('./js/blog-data.json') + .then(response => response.json()) + .then(blogPostsData => { + blogPostsData.forEach(post => { + const postCard = createPostCard(post); + postsGrid.appendChild(postCard); + }); + }) + .catch(error => { + console.error('Error loading blog data:', error); + }); + } +} + +// --- 初始化函数 --- +function initializeApp() { + // 调整英雄区域内边距 + adjustHeroAreaPadding(); + + // 显示博文 + displayPosts(); + + // 新增：处理导航栏初始滚动状态 + handleStickyNavScroll(); +} + +// --- 事件监听器 --- +// 页面加载时和窗口大小改变时调整 +window.addEventListener('DOMContentLoaded', initializeApp); +window.addEventListener('resize', adjustHeroAreaPadding); +// 新增：监听滚动事件以改变导航栏背景 +window.addEventListener('scroll', handleStickyNavScroll); \ No newline at end of file