gengxin
This commit is contained in:
大哥大哥的大哥哥
@@ -0,0 +1,99 @@
|
||||
const chapters = require('../../data/chapters')
|
||||
const {
|
||||
getProgress,
|
||||
saveProgress,
|
||||
resetStoryProgress,
|
||||
getSettings,
|
||||
} = require('../../utils/storage')
|
||||
const { chapterRoute } = require('../../utils/chapterRoute')
|
||||
const bridge = require('../../utils/platformBridge')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
chapters: [],
|
||||
fontScale: 'large',
|
||||
catalogListEnded: false,
|
||||
},
|
||||
|
||||
onShow() {
|
||||
const progress = getProgress()
|
||||
const settings = getSettings()
|
||||
const completed = new Set(progress.completedChapters)
|
||||
const lastChapter = Number(progress.lastChapter) || 1
|
||||
const completedHotspots = progress.completedHotspots || {}
|
||||
this.setData({
|
||||
chapters: chapters.map((chapter) => ({
|
||||
...chapter,
|
||||
completed: completed.has(chapter.chapterId),
|
||||
current: chapter.number === lastChapter,
|
||||
readingLabel: completed.has(chapter.chapterId)
|
||||
? '重新翻看这一回'
|
||||
: chapter.number === lastChapter
|
||||
? '上次读到这里'
|
||||
: '翻开这一回',
|
||||
eventCount: Array.isArray(completedHotspots[chapter.chapterId])
|
||||
? completedHotspots[chapter.chapterId].length
|
||||
: 0,
|
||||
})),
|
||||
lastChapter,
|
||||
fontScale: settings.fontScale === 'xlarge' ? 'xlarge' : 'large',
|
||||
catalogListEnded: false,
|
||||
})
|
||||
},
|
||||
|
||||
markListEnd() {
|
||||
if (!this.data.catalogListEnded) {
|
||||
this.setData({ catalogListEnded: true })
|
||||
}
|
||||
},
|
||||
|
||||
openChapter(event) {
|
||||
const chapter = Number(event.currentTarget.dataset.chapter)
|
||||
const progress = getProgress()
|
||||
const chapterMeta = chapters.find((item) => item.number === chapter)
|
||||
const replay = Boolean(
|
||||
chapterMeta
|
||||
&& progress.completedChapters.includes(chapterMeta.chapterId),
|
||||
)
|
||||
progress.lastChapter = chapter
|
||||
saveProgress(progress)
|
||||
wx.navigateTo({ url: chapterRoute(chapter, { replay }) })
|
||||
},
|
||||
|
||||
restartStory() {
|
||||
const expectedScope = bridge.getScope()
|
||||
const visibleGeneration = this.__tangShowGeneration
|
||||
wx.showModal({
|
||||
title: '从第一回重新开始？',
|
||||
content: '关卡进度会清空；已经收藏的“我的桂香岁月”和大字设置会保留。',
|
||||
confirmText: '重新开始',
|
||||
cancelText: '先不清空',
|
||||
confirmColor: '#9f3028',
|
||||
success: (result) => {
|
||||
if (!result || !result.confirm || this.__tangDead || !this.__tangVisible
|
||||
|| visibleGeneration !== this.__tangShowGeneration
|
||||
|| expectedScope !== bridge.getScope()) return
|
||||
if (!resetStoryProgress(expectedScope)) {
|
||||
wx.showToast({ title: '进度暂时没有清空，请稍后再试', icon: 'none' })
|
||||
return
|
||||
}
|
||||
wx.redirectTo({ url: chapterRoute(1) })
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
goBack() {
|
||||
wx.reLaunch({ url: '/tang-detective/pages/home/home' })
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '唐侦探：翻开十五回桂香故事',
|
||||
path: '/tang-detective/pages/catalog/catalog',
|
||||
}
|
||||
},
|
||||
|
||||
onShareTimeline() {
|
||||
return { title: '唐侦探：翻开十五回桂香故事', query: '' }
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,184 @@
|
||||
const memoryCards = require('../../data/memoryCards')
|
||||
const { getProgress } = require('../../utils/storage')
|
||||
const { getCollectedMemories } = require('../../utils/memoryCollection')
|
||||
const { chapterRoute } = require('../../utils/chapterRoute')
|
||||
const bridge = require('../../utils/platformBridge')
|
||||
const STATUS_TEXT = {
|
||||
guest: '游客阅读 · 仅存本机', offline: '离线存档 · 点此重试', pending: '本机已保存 · 等待同步',
|
||||
connecting: '正在连接存档…', syncing: '本机已保存 · 正在同步', synced: '阅读存档已同步',
|
||||
conflict: '存档有冲突 · 点此选择', 'auth-expired': '登录已失效 · 本机记录保留',
|
||||
'storage-error': '本机未存成功 · 请检查空间', 'version-error': '存档版本不一致 · 仅本机阅读',
|
||||
'sync-error': '存档未同步 · 请更新后重试',
|
||||
}
|
||||
const {
|
||||
getHomeLayoutMetrics,
|
||||
getHomeLayoutStyle,
|
||||
hasReadingProgress,
|
||||
} = require('./homeLayout')
|
||||
|
||||
Page({
|
||||
data: {
|
||||
tangStatusText: '正在读取存档…',
|
||||
coverOpened: false,
|
||||
completedCount: 0,
|
||||
lastChapter: 1,
|
||||
hasReadingProgress: false,
|
||||
memoryCount: 0,
|
||||
homeLayoutStyle: [
|
||||
'height:390px',
|
||||
'--home-top-inset:8px',
|
||||
'--home-right-inset:10px',
|
||||
'--home-bottom-inset:7px',
|
||||
'--home-left-inset:10px',
|
||||
].join(';'),
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.unsubscribeTang = bridge.subscribe(() => this.refreshTangStatus())
|
||||
this.refreshTangStatus()
|
||||
this.applyHomeLayout()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.refreshHomeProgress()
|
||||
this.refreshTangStatus()
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
if (this.unsubscribeTang) this.unsubscribeTang()
|
||||
},
|
||||
|
||||
refreshHomeProgress() {
|
||||
const progress = getProgress()
|
||||
this.setData({
|
||||
completedCount: progress.completedChapters.length,
|
||||
lastChapter: progress.lastChapter || 1,
|
||||
hasReadingProgress: hasReadingProgress(progress),
|
||||
memoryCount: getCollectedMemories(progress, memoryCards).length,
|
||||
})
|
||||
this.applyHomeLayout()
|
||||
},
|
||||
|
||||
refreshTangStatus() {
|
||||
this.setData({ tangStatusText: STATUS_TEXT[bridge.getStatus()] || '本机阅读存档' })
|
||||
},
|
||||
|
||||
async syncTang() {
|
||||
const scope = bridge.getScope()
|
||||
const visibleGeneration = this.__tangShowGeneration
|
||||
const stillActive = () => !this.__tangDead && this.__tangVisible
|
||||
&& this.__tangShowGeneration === visibleGeneration && bridge.getScope() === scope
|
||||
if (!wx.getStorageSync('token')) {
|
||||
wx.showToast({ title: '请先在学堂登录，游客记录不会自动上传', icon: 'none' })
|
||||
return
|
||||
}
|
||||
await bridge.open(true)
|
||||
if (!stillActive()) return
|
||||
if (bridge.getStatus() !== 'conflict') { this.refreshHomeProgress(); return }
|
||||
const conflictContext = bridge.getConflictContext()
|
||||
wx.showActionSheet({
|
||||
itemList: ['采用云端存档', '用本机存档覆盖云端'],
|
||||
success: result => {
|
||||
if (!stillActive() || bridge.getConflictContext() !== conflictContext) return
|
||||
const choice = result.tapIndex === 0 ? 'cloud' : 'local'
|
||||
wx.showModal({
|
||||
title: '确认阅读存档',
|
||||
content: choice === 'cloud' ? '将用云端进度替换当前本机进度。原记录会保留一份本机备份。'
|
||||
: '将用本机进度覆盖云端，其他设备的未同步阅读可能不在其中。原记录会保留一份本机备份。',
|
||||
confirmText: '确认使用',
|
||||
success: async answer => {
|
||||
if (answer.confirm && stillActive()) {
|
||||
await bridge.resolveConflict(choice, conflictContext)
|
||||
if (stillActive()) this.refreshHomeProgress()
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
returnToXuetang() {
|
||||
bridge.flush()
|
||||
wx.reLaunch({ url: '/tongji/pages/weekly' })
|
||||
},
|
||||
|
||||
onResize(resizeInfo) {
|
||||
this.applyHomeLayout(resizeInfo)
|
||||
},
|
||||
|
||||
applyHomeLayout(resizeInfo = null) {
|
||||
let windowInfo = {}
|
||||
try {
|
||||
windowInfo = wx.getWindowInfo
|
||||
? wx.getWindowInfo()
|
||||
: wx.getSystemInfoSync()
|
||||
} catch (error) {
|
||||
windowInfo = {}
|
||||
}
|
||||
|
||||
const resizeSize = resizeInfo && resizeInfo.size
|
||||
? resizeInfo.size
|
||||
: resizeInfo
|
||||
if (resizeSize) {
|
||||
windowInfo = {
|
||||
...windowInfo,
|
||||
windowWidth: resizeSize.windowWidth || windowInfo.windowWidth,
|
||||
windowHeight: resizeSize.windowHeight || windowInfo.windowHeight,
|
||||
}
|
||||
}
|
||||
|
||||
let menuRect = {}
|
||||
try {
|
||||
menuRect = wx.getMenuButtonBoundingClientRect
|
||||
? wx.getMenuButtonBoundingClientRect()
|
||||
: {}
|
||||
} catch (error) {
|
||||
menuRect = {}
|
||||
}
|
||||
|
||||
const metrics = getHomeLayoutMetrics(windowInfo, menuRect)
|
||||
this.setData({
|
||||
homeLayoutStyle: getHomeLayoutStyle(metrics),
|
||||
})
|
||||
},
|
||||
|
||||
startGame() {
|
||||
const chapter = this.data.lastChapter || 1
|
||||
wx.navigateTo({
|
||||
url: chapterRoute(chapter),
|
||||
})
|
||||
},
|
||||
|
||||
revealCover() {
|
||||
if (this.data.coverOpened) return
|
||||
this.setData({ coverOpened: true })
|
||||
},
|
||||
|
||||
keepCoverOpen() {},
|
||||
|
||||
openCatalog() {
|
||||
wx.navigateTo({ url: '/tang-detective/pages/catalog/catalog' })
|
||||
},
|
||||
|
||||
openCast() {
|
||||
wx.navigateTo({ url: '/tang-detective/pages/cast/cast' })
|
||||
},
|
||||
|
||||
openMemories() {
|
||||
wx.navigateTo({ url: '/tang-detective/pages/memories/memories' })
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '唐侦探：在一桌饭里，看见被忽略的人',
|
||||
path: '/tang-detective/pages/home/home',
|
||||
}
|
||||
},
|
||||
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: '唐侦探：在一桌饭里，看见被忽略的人',
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,69 @@
|
||||
<view class="safe-shell home-shell" style="{{homeLayoutStyle}}">
|
||||
<view class="tang-host-bar">
|
||||
<button class="tang-host-button" catchtap="returnToXuetang" aria-label="退出唐侦探，返回学堂">‹ 返回学堂</button>
|
||||
<button class="tang-sync-button" catchtap="syncTang">{{tangStatusText}}</button>
|
||||
</view>
|
||||
<view
|
||||
class="home-comic-book {{coverOpened ? 'is-open' : 'is-closed'}}"
|
||||
bindtap="revealCover"
|
||||
aria-label="{{coverOpened ? '唐侦探漫画书已经翻开' : '唐侦探漫画封面，轻触翻开'}}"
|
||||
>
|
||||
<view class="home-cover-art" aria-label="桂香饭店人物群像漫画封面">
|
||||
<image
|
||||
class="home-cover-image"
|
||||
src="/tang-detective/assets/comic/s01-c01/S01-C01-P02-missing-table-ensemble-v1.jpg"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="home-cover-shade"></view>
|
||||
<view class="home-cover-spine"><text>甄养堂 · 中国健康连环画</text></view>
|
||||
<view class="home-cover-title-block">
|
||||
<text class="home-cover-series">第一季</text>
|
||||
<text class="home-cover-title">唐侦探</text>
|
||||
<text class="home-cover-subtitle">桂香里的第十五桌</text>
|
||||
</view>
|
||||
<view wx:if="{{!coverOpened}}" class="home-cover-touch">
|
||||
<text class="home-cover-touch-mark">›</text>
|
||||
<text>翻开瞧瞧</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
wx:if="{{coverOpened}}"
|
||||
class="home-flyleaf paper-panel"
|
||||
catchtap="keepCoverOpen"
|
||||
aria-label="漫画书扉页"
|
||||
>
|
||||
<view class="home-brand">
|
||||
<view class="seal">甄</view>
|
||||
<view class="home-brand-copy">
|
||||
<text class="home-brand-name">甄养堂</text>
|
||||
<text class="home-brand-kind">一本能看、能点、能带回家聊的中国健康连环画</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="home-flyleaf-title">桂香里的第十五桌</text>
|
||||
<text class="home-season">第一季 · 一桌饭里的三代人</text>
|
||||
<text class="home-quote">“一桌饭，不应该只有坐下的人，还应该有被看见的人。”</text>
|
||||
|
||||
<button
|
||||
class="home-primary"
|
||||
catchtap="startGame"
|
||||
aria-label="{{hasReadingProgress ? '继续阅读上次看到的地方' : '翻开第一回'}}"
|
||||
>
|
||||
{{hasReadingProgress ? '接着上回往下看' : '翻开第一回'}}
|
||||
</button>
|
||||
|
||||
<view class="home-tabs">
|
||||
<button class="home-tab" catchtap="openCatalog" aria-label="打开十五回目录">目录</button>
|
||||
<button class="home-tab" catchtap="openCast" aria-label="打开人物画谱">人物</button>
|
||||
<button class="home-tab home-memory-tab" catchtap="openMemories" aria-label="打开我的桂香岁月">
|
||||
岁月册<text wx:if="{{memoryCount > 0}}"> · {{memoryCount}}页</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<text class="home-tagline">先看画、听故事；翻到背面，再聊聊这回事。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text wx:if="{{coverOpened}}" class="home-disclaimer">这里聊的是日常生活，不替代诊断、处方或个体化治疗建议。</text>
|
||||
</view>
|
||||
@@ -0,0 +1,683 @@
|
||||
@import "/tang-detective/shared.wxss";
|
||||
|
||||
.tang-host-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 44px; padding-right: 92px; }
|
||||
.tang-host-button, .tang-sync-button { margin: 0; min-height: 44px; padding: 0 12px; line-height: 44px; font-size: 16px; border-radius: 8px; color: #f3e5bd; background: #30251c; }
|
||||
.tang-sync-button { font-size: 14px; }
|
||||
.home-shell {
|
||||
--home-top-inset: calc(8px + constant(safe-area-inset-top));
|
||||
--home-right-inset: calc(10px + constant(safe-area-inset-right));
|
||||
--home-bottom-inset: calc(7px + constant(safe-area-inset-bottom));
|
||||
--home-left-inset: calc(10px + constant(safe-area-inset-left));
|
||||
--home-top-inset: calc(8px + env(safe-area-inset-top));
|
||||
--home-right-inset: calc(10px + env(safe-area-inset-right));
|
||||
--home-bottom-inset: calc(7px + env(safe-area-inset-bottom));
|
||||
--home-left-inset: calc(10px + env(safe-area-inset-left));
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
padding: var(--home-top-inset) var(--home-right-inset)
|
||||
var(--home-bottom-inset) var(--home-left-inset);
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-comic-book {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
color: #33251b;
|
||||
background: #1d130f;
|
||||
border: 3px solid #9e845e;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 15px 34px rgba(0, 0, 0, 0.36);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.home-comic-book.is-open {
|
||||
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
|
||||
}
|
||||
|
||||
.home-cover-art {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #241811;
|
||||
}
|
||||
|
||||
.home-comic-book.is-open .home-cover-art {
|
||||
border-right: 7px solid #6f2b23;
|
||||
box-shadow: 10px 0 24px rgba(32, 19, 12, 0.34);
|
||||
}
|
||||
|
||||
.home-cover-image,
|
||||
.home-cover-shade {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home-cover-shade {
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(29, 18, 12, 0.68), transparent 24%, transparent 72%, rgba(29, 18, 12, 0.2)),
|
||||
linear-gradient(0deg, rgba(31, 18, 12, 0.82), transparent 53%);
|
||||
box-shadow: inset 0 0 70px rgba(30, 16, 9, 0.3);
|
||||
}
|
||||
|
||||
.home-cover-spine {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 46px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #f0d8a7;
|
||||
background: rgba(74, 35, 26, 0.94);
|
||||
border-right: 2px solid #c59a58;
|
||||
font-family: "Songti SC", "STSong", serif;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
letter-spacing: 3px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.home-cover-title-block {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 72px;
|
||||
bottom: 54px;
|
||||
display: flex;
|
||||
max-width: 64%;
|
||||
padding: 13px 19px 15px;
|
||||
color: #f7e7c4;
|
||||
background: rgba(43, 27, 18, 0.86);
|
||||
border-left: 7px solid #a53a30;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-cover-series {
|
||||
color: #e4c277;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.home-cover-title {
|
||||
margin-top: 3px;
|
||||
font-family: "Songti SC", "STSong", serif;
|
||||
font-size: 43px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 8px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.home-cover-subtitle {
|
||||
margin-top: 6px;
|
||||
color: #f1d18c;
|
||||
font-family: "Songti SC", "STSong", serif;
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-cover-touch {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
right: 24px;
|
||||
bottom: 22px;
|
||||
display: flex;
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 8px 15px;
|
||||
color: #fff0ca;
|
||||
background: rgba(54, 34, 23, 0.9);
|
||||
border: 2px solid #d7b36d;
|
||||
border-radius: 999px;
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.home-cover-touch-mark {
|
||||
display: flex;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6c271f;
|
||||
background: #f0d28c;
|
||||
border-radius: 50%;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-flyleaf {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 16px 20px;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, rgba(92, 61, 35, 0.03) 0, rgba(92, 61, 35, 0.03) 1px, transparent 1px, transparent 5px),
|
||||
#f2e4bf;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-flyleaf-title {
|
||||
display: block;
|
||||
margin-top: 9px;
|
||||
color: #8d2d26;
|
||||
font-family: "Songti SC", "STSong", serif;
|
||||
font-size: 29px;
|
||||
font-weight: 900;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-quote {
|
||||
position: static;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #4e3a2b;
|
||||
font-size: 18px;
|
||||
font-weight: 750;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-primary {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-tabs {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-flyleaf .home-tab {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: 5px 7px;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-comic-book button::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.home-book {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
grid-template-columns: minmax(0, 3fr) minmax(285px, 2fr);
|
||||
border: 2px solid #9e845e;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.home-art {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, rgba(65, 42, 25, 0.04) 0, rgba(65, 42, 25, 0.04) 1px, transparent 1px, transparent 5px),
|
||||
#241811;
|
||||
border-right: 5px solid var(--cinnabar);
|
||||
}
|
||||
|
||||
.home-art-image,
|
||||
.home-art-shade {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home-art-shade {
|
||||
pointer-events: none;
|
||||
background: linear-gradient(0deg, rgba(35, 23, 16, 0.82), transparent 48%);
|
||||
}
|
||||
|
||||
.home-memory-ribbon {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 6px 10px 6px 7px;
|
||||
color: #4a3225;
|
||||
background: rgba(241, 221, 178, 0.96);
|
||||
border: 2px solid #9e754a;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 14px rgba(25, 15, 8, 0.28);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 17px;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-memory-ribbon-mark {
|
||||
display: flex;
|
||||
width: 28px;
|
||||
height: 35px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffe9bb;
|
||||
background: #963128;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.home-quote {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 22px;
|
||||
bottom: 18px;
|
||||
left: 22px;
|
||||
color: #f5e5c0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.home-copy {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 18px 24px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-brand .seal {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: none;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.home-brand-copy {
|
||||
display: flex;
|
||||
color: #7f2a23;
|
||||
flex-direction: column;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.home-brand-kind {
|
||||
color: #765f45;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 45px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 7px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #8d2d26;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-season {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
color: #6f5942;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.home-primary {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
padding: 8px 14px;
|
||||
color: #fff0cb;
|
||||
background: var(--cinnabar);
|
||||
border: 3px solid #74231d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 18px rgba(111, 32, 27, 0.24);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 21px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.home-tabs {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
margin-top: 10px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 10px;
|
||||
color: #4b3829;
|
||||
background: #ead9b2;
|
||||
border: 2px solid #997b54;
|
||||
border-radius: 7px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.home-memory-count {
|
||||
display: flex;
|
||||
min-width: 30px;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 6px;
|
||||
color: #f9edce;
|
||||
background: #704b35;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-tagline {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
color: #594431;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
.home-disclaimer {
|
||||
display: block;
|
||||
flex: none;
|
||||
color: #d7c49b;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
|
||||
font-size: 17px;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-height: 620px) {
|
||||
.home-copy {
|
||||
justify-content: flex-start;
|
||||
overflow-y: hidden;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.home-brand .seal {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.home-brand-copy {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.home-brand-kind {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
margin-top: 7px;
|
||||
font-size: 39px;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.home-season {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.home-primary {
|
||||
min-height: 60px;
|
||||
margin-top: 11px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.home-tabs {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.home-tab {
|
||||
min-height: 48px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.home-tagline {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.home-disclaimer {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 730px) {
|
||||
.home-brand-kind {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-brand {
|
||||
max-width: calc(100% - 104px);
|
||||
}
|
||||
|
||||
.home-title {
|
||||
font-size: 39px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.home-tagline {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 16px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.home-memory-ribbon {
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
min-height: 48px;
|
||||
padding: 5px 8px 5px 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 430px) {
|
||||
.home-comic-book.is-open {
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(292px, 1fr);
|
||||
}
|
||||
|
||||
.home-cover-title-block {
|
||||
left: 62px;
|
||||
bottom: 34px;
|
||||
padding: 9px 13px 10px;
|
||||
}
|
||||
|
||||
.home-cover-series {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-cover-title {
|
||||
font-size: 34px;
|
||||
letter-spacing: 6px;
|
||||
}
|
||||
|
||||
.home-cover-subtitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.home-cover-touch {
|
||||
right: 16px;
|
||||
bottom: 13px;
|
||||
min-height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.home-flyleaf {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-brand .seal {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-brand-copy {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-flyleaf-title {
|
||||
margin-top: 5px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-season {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-quote {
|
||||
margin-top: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-primary {
|
||||
min-height: 50px;
|
||||
margin-top: 6px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-tabs {
|
||||
gap: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-tab {
|
||||
min-height: 48px;
|
||||
padding: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-flyleaf .home-tagline {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-copy {
|
||||
justify-content: flex-start;
|
||||
overflow-y: hidden;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.home-brand .seal {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.home-brand-copy {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.home-brand-kind {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.home-title {
|
||||
margin-top: 4px;
|
||||
font-size: 34px;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.home-subtitle {
|
||||
margin-top: 2px;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.home-season {
|
||||
margin-top: 3px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.home-primary {
|
||||
min-height: 60px;
|
||||
margin-top: 7px;
|
||||
padding: 6px 10px;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.home-tabs {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.home-tagline {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-disclaimer {
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user