余白:桌面端文章去卡片 + 阅读页宽屏三栏外扩
去卡片(桌面 + 手机统一) - .paper 去掉底色 / 1px 边框 / 20px 圆角 / box-shadow,正文直接落在页面上; 右上角那团强调色渐晕(::before)是卡片的角饰,一并删掉,position/overflow 随之不再需要 - 48px 横向内边距保留:它不是装饰,是「中列 776 - 96 = 680 = --measure」这半个算式, 删了正文要么超出行宽、要么在列里右空 96px;手机上归零(那 48px 在 390 屏上是浪费) 宽屏三栏外扩(≥1200px) - 1100 的画布上限在 1456 的屏上两侧各空 171px,同时中列只有 650px、正文 554px ——根本没到 --measure 的 680。所以「文章太窄」和「留白太大」是同一个原因 - 上限提到 1340,列改 180 / minmax(0,776) / 220 + space-between: 中列 776 = 680(正文) + 48×2(.paper 内边距),正文吃满 --measure 且列内不剩空; space-between 让时间线左缘 / 目录右缘正好落在 28px 内边距上 - 顶栏在阅读页同步放宽(YohakuTop 按 /post/* 加 .top-in.wide),否则品牌和主题键 会比左右栏缩进一百多像素。首页仍 1100 —— 信息流卡片跟着放到 1340 只会把封面拉成条 实测(offsetWidth,.paper 有入场动画的 scale,getBoundingClientRect 会带上它) - 1456:画布 1100 -> 1340,两侧空白 171 -> 51,中列 650 -> 776,正文 554 -> 678 - 1920:两侧空白 403 -> 283;1200 及以下不变;首页 top-in 仍 1100、卡片 1044 - 平铺后桌面 .paper:bg 透明 / border 0 / radius 0 / shadow none / ::before none, 正文 680;手机正文 335(与上一版一致) 修一处自己引入的编译错误:顶栏那个 class 起初命名 wide,与组件里已有的 wide(721px matchMedia)撞名 —— Identifier 'wide' has already been declared, :3000 直接 500、页面全白。已改名 mqWide。 公网 138.2.17.73:8080 产物 md5 与磁盘一致;npm run build 无警告。
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { RouterLink, useRoute } from 'vue-router'
|
||||
import { site } from '../../site'
|
||||
|
||||
@@ -31,6 +31,10 @@ function isOn(l) {
|
||||
return l.to === '/' ? route.path === '/' : route.path.startsWith(l.to)
|
||||
}
|
||||
|
||||
// 阅读页的三栏栅格在宽屏是 1340(见 article.css),顶栏跟着放宽才对齐。
|
||||
// 其余页面仍是 1100 —— 首页信息流卡片已经够宽,跟着放到 1340 只会让封面拉成条。
|
||||
const wide = computed(() => route.path.startsWith('/post/'))
|
||||
|
||||
function onScroll() {
|
||||
scrolled.value = (window.scrollY || 0) > 8
|
||||
}
|
||||
@@ -57,19 +61,19 @@ function onKey(e) {
|
||||
}
|
||||
|
||||
// 窗口拉宽回桌面必须自己退场:v-if 是 JS 状态,CSS 媒体查询管不着它
|
||||
const wide = window.matchMedia('(min-width: 721px)')
|
||||
const mqWide = window.matchMedia('(min-width: 721px)')
|
||||
function onWide(e) { if (e.matches) menuOpen.value = false }
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
window.addEventListener('keydown', onKey)
|
||||
wide.addEventListener('change', onWide)
|
||||
mqWide.addEventListener('change', onWide)
|
||||
onScroll()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', onScroll)
|
||||
window.removeEventListener('keydown', onKey)
|
||||
wide.removeEventListener('change', onWide)
|
||||
mqWide.removeEventListener('change', onWide)
|
||||
document.body.style.overflow = ''
|
||||
menuOpen.value = false
|
||||
})
|
||||
@@ -85,7 +89,7 @@ function toggleTheme() {
|
||||
|
||||
<template>
|
||||
<header class="top" :class="{ scrolled }">
|
||||
<div class="top-in">
|
||||
<div class="top-in" :class="{ wide }">
|
||||
<RouterLink class="brand" to="/">
|
||||
<span class="av">{{ initial() }}</span>
|
||||
<span>{{ title() }}</span>
|
||||
|
||||
Reference in New Issue
Block a user