From 15cdabb647e50efe3de6a7ea3c745746f70c80bf Mon Sep 17 00:00:00 2001
From: secret-deus <1263403710@qq.com>
Date: Thu, 16 Jul 2026 20:01:52 +0800
Subject: [PATCH] style(notebook): flatten cards and add side physics doodles
Remove panel/card borders and shadows for a flatter reading layout.
Add SideDoodles with physics formulas/curves, random angles on load.
---
src/components/Footer.astro | 4 +-
src/components/Header.astro | 4 +-
src/components/SideDoodles.astro | 432 +++++++++++++++++++++++
src/layouts/BaseLayout.astro | 2 +
src/layouts/ProseLayout.astro | 2 +-
src/pages/index.astro | 22 +-
src/pages/posts/folder/[...folder].astro | 10 +-
src/pages/posts/index.astro | 10 +-
src/pages/tags/index.astro | 6 +-
src/styles/board.css | 20 +-
src/styles/global.css | 56 ++-
11 files changed, 501 insertions(+), 67 deletions(-)
create mode 100644 src/components/SideDoodles.astro
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 8074b42..9098a39 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -14,7 +14,9 @@ const year = new Date().getFullYear();
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 0379bab..04eb706 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -2,6 +2,7 @@
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
+import SideDoodles from '../components/SideDoodles.astro';
interface Props {
title: string;
@@ -19,6 +20,7 @@ const { title, description = '', wide = false } = Astro.props;
+
diff --git a/src/layouts/ProseLayout.astro b/src/layouts/ProseLayout.astro
index 3a31dcf..1f47551 100644
--- a/src/layouts/ProseLayout.astro
+++ b/src/layouts/ProseLayout.astro
@@ -208,7 +208,7 @@ const parentFolder =
.hero-image :global(img) {
width: 100%;
display: block;
- box-shadow: var(--shadow);
+ box-shadow: none;
}
.prose :global(> *:first-child) {
margin-top: 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7177770..1062bea 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -214,8 +214,9 @@ const latestDate = (() => {
border: 1px solid var(--accent);
}
.btn-ghost {
- border: 1px solid rgb(var(--line));
+ border: none;
color: rgb(var(--ink));
+ background: color-mix(in srgb, rgb(var(--code-bg)) 80%, transparent);
}
.metric.linkish {
text-decoration: none;
@@ -224,16 +225,15 @@ const latestDate = (() => {
}
.featured-panel {
padding: 0;
- overflow: hidden;
+ overflow: visible;
}
.featured {
display: block;
- padding: 1.1rem 1.15rem;
+ padding: 0.85rem 0.15rem 1rem;
text-decoration: none;
color: inherit;
- background:
- radial-gradient(ellipse 90% 80% at 100% 0%, var(--accent-soft), transparent 55%),
- rgb(var(--surface-elevated));
+ background: transparent;
+ border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 70%, transparent);
}
.featured-top {
display: flex;
@@ -280,15 +280,15 @@ const latestDate = (() => {
display: flex;
justify-content: space-between;
gap: 0.4rem;
- padding: 0.6rem 0.7rem;
- border: 1px solid rgb(var(--line));
- border-radius: 8px;
+ padding: 0.55rem 0.45rem;
+ border: none;
+ border-radius: 6px;
text-decoration: none;
color: inherit;
- background: rgb(var(--code-bg));
+ background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
}
.folder-card:hover {
- border-color: var(--accent);
+ background: var(--accent-soft);
color: inherit;
}
.folder-card-name {
diff --git a/src/pages/posts/folder/[...folder].astro b/src/pages/posts/folder/[...folder].astro
index 3ae2e3b..d015a49 100644
--- a/src/pages/posts/folder/[...folder].astro
+++ b/src/pages/posts/folder/[...folder].astro
@@ -141,15 +141,15 @@ const crumbs = folder.split('/').filter(Boolean);
justify-content: space-between;
align-items: center;
gap: 0.5rem;
- padding: 0.65rem 0.75rem;
- border: 1px solid rgb(var(--line));
- border-radius: 8px;
+ padding: 0.55rem 0.45rem;
+ border: none;
+ border-radius: 6px;
text-decoration: none;
color: inherit;
- background: rgb(var(--code-bg));
+ background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
}
.folder-card:hover {
- border-color: var(--accent);
+ background: var(--accent-soft);
color: inherit;
}
.folder-card-name {
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 987cdda..db0d4d8 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -107,15 +107,15 @@ const rootEntries = posts.filter((n) => !n.id.includes('/'));
justify-content: space-between;
align-items: center;
gap: 0.5rem;
- padding: 0.65rem 0.75rem;
- border: 1px solid rgb(var(--line));
- border-radius: 8px;
+ padding: 0.55rem 0.45rem;
+ border: none;
+ border-radius: 6px;
text-decoration: none;
color: inherit;
- background: rgb(var(--code-bg));
+ background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
}
.folder-card:hover {
- border-color: var(--accent);
+ background: var(--accent-soft);
color: inherit;
}
.folder-card-name {
diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
index 0573e87..331ec49 100644
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -125,9 +125,9 @@ const groups = groupTagsByInitial(allStats);
width: 100%;
margin-top: 0.85rem;
padding: 0.55rem 0.75rem;
- border: 1px solid rgb(var(--line));
- border-radius: 8px;
- background: rgb(var(--surface));
+ border: none;
+ border-radius: 6px;
+ background: color-mix(in srgb, rgb(var(--code-bg)) 80%, transparent);
color: rgb(var(--ink));
font: inherit;
}
diff --git a/src/styles/board.css b/src/styles/board.css
index 68d8339..25a216b 100644
--- a/src/styles/board.css
+++ b/src/styles/board.css
@@ -28,11 +28,11 @@
}
.panel {
- border: 1px solid rgb(var(--line));
- border-radius: var(--radius);
- background: rgb(var(--surface-elevated));
- box-shadow: var(--shadow);
- padding: 0.85rem 0.95rem;
+ border: none;
+ border-radius: 0;
+ background: transparent;
+ box-shadow: none;
+ padding: 0.55rem 0.15rem 0.75rem;
}
.panel-head {
@@ -40,7 +40,9 @@
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
- margin-bottom: 0.6rem;
+ margin-bottom: 0.55rem;
+ padding-bottom: 0.35rem;
+ border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 70%, transparent);
}
.panel-head h2,
@@ -82,8 +84,8 @@
.metric {
padding: 0.5rem 0.55rem;
- border-radius: 8px;
- background: rgb(var(--code-bg));
+ border-radius: 6px;
+ background: color-mix(in srgb, rgb(var(--code-bg)) 70%, transparent);
}
.metric strong {
@@ -139,7 +141,7 @@
}
.dense-list > li + li {
- border-top: 1px solid rgb(var(--line));
+ border-top: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
}
.dense-item {
diff --git a/src/styles/global.css b/src/styles/global.css
index 256afeb..62a9b5a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -12,9 +12,10 @@
--surface: 252, 251, 248;
--surface-elevated: 255, 255, 255;
--code-bg: 242, 241, 237;
- --shadow: 0 1px 2px rgba(var(--ink), 0.04), 0 8px 24px rgba(var(--ink), 0.05);
- --shadow-lift: 0 4px 12px rgba(var(--ink), 0.07), 0 14px 32px rgba(var(--ink), 0.08);
- --radius: 10px;
+ /* 弱化卡片感：阴影默认关闭，仅极少数浮层可用 */
+ --shadow: none;
+ --shadow-lift: none;
+ --radius: 8px;
/* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */
--content: 46rem;
--wide: min(72rem, calc(100vw - 3rem));
@@ -38,8 +39,8 @@
--surface: 18, 20, 22;
--surface-elevated: 26, 28, 31;
--code-bg: 34, 37, 42;
- --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
- --shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.28);
+ --shadow: none;
+ --shadow-lift: none;
}
}
@@ -71,9 +72,16 @@ body {
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
+ /* 大屏两侧极淡纸纹点缀，避免纯色空白 */
+ background-image:
+ radial-gradient(ellipse 42% 28% at 8% 18%, var(--accent-soft), transparent 70%),
+ radial-gradient(ellipse 36% 24% at 92% 72%, var(--accent-soft), transparent 68%);
+ background-attachment: fixed;
}
main {
+ position: relative;
+ z-index: 1;
width: var(--content);
max-width: 100%;
margin: 0 auto;
@@ -188,8 +196,7 @@ img {
}
.prose img:hover {
- transform: translateY(-2px);
- box-shadow: var(--shadow-lift);
+ transform: translateY(-1px);
}
hr {
@@ -211,16 +218,10 @@ pre {
border-radius: var(--radius);
overflow-x: auto;
background: rgb(var(--code-bg));
- border: 1px solid rgb(var(--line));
+ border: none;
margin: 0 0 1.2em;
font-size: 0.84em;
line-height: 1.55;
- transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
-}
-
-pre:hover {
- border-color: color-mix(in srgb, var(--accent) 35%, rgb(var(--line)));
- box-shadow: var(--shadow);
}
pre > code {
@@ -293,14 +294,12 @@ blockquote:has(> p:first-child) {
line-height: 1.45;
transition:
background var(--dur-fast) var(--ease-out),
- transform var(--dur-fast) var(--ease-out),
- box-shadow var(--dur-fast) var(--ease-out);
+ transform var(--dur-fast) var(--ease-out);
}
.tag:hover {
- background: rgba(31, 107, 90, 0.22);
+ background: color-mix(in srgb, var(--accent) 22%, transparent);
transform: translateY(-1px);
- box-shadow: 0 2px 8px rgba(31, 107, 90, 0.12);
color: var(--accent-dark);
}
@@ -352,30 +351,27 @@ blockquote:has(> p:first-child) {
.card {
display: block;
- padding: 0.95rem 1.05rem;
- border: 1px solid rgb(var(--line));
- border-radius: var(--radius);
- background: rgb(var(--surface-elevated));
+ padding: 0.85rem 0.35rem;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
text-decoration: none;
color: inherit;
- box-shadow: var(--shadow);
+ box-shadow: none;
transition:
- border-color var(--dur) var(--ease-out),
transform var(--dur) var(--ease-out),
- box-shadow var(--dur) var(--ease-out),
background var(--dur) var(--ease-out);
}
.card:hover {
- border-color: color-mix(in srgb, var(--accent) 55%, rgb(var(--line)));
- transform: translateY(-3px);
- box-shadow: var(--shadow-lift);
+ transform: none;
+ box-shadow: none;
color: inherit;
- background: color-mix(in srgb, rgb(var(--surface-elevated)) 92%, var(--accent-soft));
+ background: var(--accent-soft);
}
.card:active {
- transform: translateY(-1px);
+ transform: none;
transition-duration: var(--dur-fast);
}