From cc75eee3160d200410dd84e5361dc11af7f01baa Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Fri, 12 Jun 2026 11:22:51 +0800
Subject: [PATCH] Prepare 7.9.0 App Store build metadata
---
docs/styles.css | 139 +++++++++++++++++++++++++++------------------
1 files changed, 83 insertions(+), 56 deletions(-)
diff --git a/docs/styles.css b/docs/styles.css
index 22be05f..e352258 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -13,6 +13,9 @@
--shadow: 0 20px 50px rgba(30, 45, 90, 0.12);
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif;
--hero-bg: #ffffff;
+ --section-blue: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
+ --section-lilac: linear-gradient(135deg, #fbfcff 0%, #ffffff 44%, #f8f5ff 100%);
+ --section-mint: linear-gradient(135deg, #ffffff 0%, #f7fbff 52%, #f3fbf7 100%);
}
* {
@@ -29,8 +32,12 @@
color: var(--text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
- background: var(--bg);
+ background: linear-gradient(180deg, #fbfcff 0%, #f4f7ff 38%, #f5fbf8 72%, #fbfcff 100%);
min-height: 100vh;
+}
+
+.page-home {
+ background: #ffffff;
}
a {
@@ -58,7 +65,7 @@
top: 0;
z-index: 50;
height: var(--header-h);
- background: rgba(244, 246, 251, 0.82);
+ background: rgba(250, 252, 255, 0.86);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(16px) saturate(1.25);
}
@@ -148,7 +155,7 @@
}
.page-home .site-header {
- background: rgba(255, 255, 255, 0.88);
+ background: #ffffff;
}
/* Hero — copy left, original design visual right (compact, no forced full-screen) */
@@ -174,9 +181,13 @@
margin: 0;
font-size: clamp(2rem, 4.8vw, 3.15rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.1;
color: #000;
+}
+
+.hero__headline span {
+ display: block;
}
.hero__lead {
@@ -206,17 +217,17 @@
border: 0;
}
-/* Second screen — 5 view modes */
+/* Second screen — 4 view modes */
.views {
padding: 56px 0 64px;
- background: #ffffff;
+ background: var(--section-blue);
}
.views__split {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: 28px 48px;
- align-items: center;
+ align-items: start;
}
.views__gallery {
@@ -229,6 +240,7 @@
.views__shot {
margin: 0;
+ aspect-ratio: 720 / 450;
border-radius: 12px;
overflow: hidden;
line-height: 0;
@@ -240,14 +252,16 @@
.views__shot img {
display: block;
width: 100%;
- height: auto;
+ height: 100%;
+ object-fit: cover;
+ object-position: center bottom;
}
.views__headline {
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 2.7rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.12;
color: #000;
}
@@ -271,6 +285,13 @@
margin: 0 0 16px;
font-size: 0.94rem;
color: #86868b;
+}
+
+.views__details {
+ display: grid;
+ grid-template-columns: minmax(190px, 1fr) max-content;
+ gap: 20px 34px;
+ align-items: end;
}
.views__modes {
@@ -300,22 +321,11 @@
background: var(--accent);
}
-.views__modes-row {
- display: flex;
- align-items: center;
- gap: 14px 20px;
- width: 100%;
-}
-
-.views__modes-row__label {
- flex-shrink: 0;
-}
-
.views__shortcut {
display: inline-flex;
flex-direction: column;
gap: 6px;
- margin-left: auto;
+ margin-top: 0;
flex-shrink: 0;
padding: 12px 18px;
border-radius: 14px;
@@ -337,7 +347,7 @@
/* Third screen — tag management */
.tags {
padding: 56px 0 64px;
- background: #ffffff;
+ background: var(--section-lilac);
}
.tags__split {
@@ -351,7 +361,7 @@
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 2.7rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.12;
color: #000;
}
@@ -391,6 +401,7 @@
.tags__art {
margin: 0;
+ aspect-ratio: 880 / 552;
line-height: 0;
justify-self: end;
max-width: 540px;
@@ -405,13 +416,15 @@
.tags__art img {
display: block;
width: 100%;
- height: auto;
+ height: 100%;
+ object-fit: cover;
+ object-position: center bottom;
}
/* Fourth screen — app memos */
.memo {
padding: 56px 0 64px;
- background: #ffffff;
+ background: var(--section-mint);
}
.memo__split {
@@ -423,6 +436,7 @@
.memo__art {
margin: 0;
+ aspect-ratio: 880 / 552;
line-height: 0;
justify-self: start;
max-width: 540px;
@@ -437,14 +451,16 @@
.memo__art img {
display: block;
width: 100%;
- height: auto;
+ height: 100%;
+ object-fit: cover;
+ object-position: center bottom;
}
.memo__headline {
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 2.7rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.12;
color: #000;
}
@@ -460,7 +476,7 @@
/* Fifth screen — global Quick Search */
.search {
padding: 56px 0 64px;
- background: #ffffff;
+ background: var(--section-lilac);
}
.search__split {
@@ -474,7 +490,7 @@
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 2.7rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.12;
color: #000;
}
@@ -522,25 +538,26 @@
margin: 0;
line-height: 0;
justify-self: end;
- max-width: 460px;
+ max-width: 500px;
width: 100%;
- border-radius: 12px;
- overflow: hidden;
- background: #f5f5f7;
- box-shadow: 0 10px 28px rgba(30, 45, 90, 0.1);
- border: 1px solid rgba(0, 0, 0, 0.06);
+ border-radius: 0;
+ overflow: visible;
+ background: transparent;
+ box-shadow: none;
+ border: 0;
}
.search__art img {
display: block;
width: 100%;
height: auto;
+ filter: drop-shadow(0 14px 28px rgba(30, 45, 90, 0.12));
}
/* Sixth screen — backup & restore */
.backup {
padding: 56px 0 64px;
- background: #ffffff;
+ background: var(--section-blue);
}
.backup__split {
@@ -573,7 +590,7 @@
margin: 0;
font-size: clamp(1.85rem, 3.8vw, 2.7rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.12;
color: #000;
}
@@ -594,7 +611,7 @@
/* Seventh screen — offline & privacy */
.privacy {
padding: 56px 0 64px;
- background: #ffffff;
+ background: var(--section-mint);
}
.privacy__split {
@@ -608,7 +625,7 @@
margin: 0;
font-size: clamp(2rem, 4.2vw, 3rem);
font-weight: 800;
- letter-spacing: -0.04em;
+ letter-spacing: 0;
line-height: 1.08;
color: #000;
}
@@ -669,14 +686,6 @@
max-width: 28em;
}
-.privacy__protocol {
- margin: 36px 0 0;
- font-size: 0.72rem;
- letter-spacing: 0.14em;
- text-transform: uppercase;
- color: #aeaeb2;
-}
-
.privacy__art {
margin: 0;
line-height: 0;
@@ -713,19 +722,19 @@
.card h2 {
margin: 0 0 14px;
font-size: 1.3rem;
- letter-spacing: -0.02em;
+ letter-spacing: 0;
}
/* Features + CTA — full-width white band */
.features {
padding: 56px 0 72px;
- background: #ffffff;
+ background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}
.features__headline {
margin: 0 0 24px;
font-size: 1.3rem;
- letter-spacing: -0.02em;
+ letter-spacing: 0;
}
.features__cta {
@@ -740,13 +749,13 @@
.feature-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+ grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.feature {
padding: 15px 17px;
- border-radius: 12px;
+ border-radius: 8px;
background: #f8f9fd;
border: 1px solid var(--border);
}
@@ -828,9 +837,18 @@
}
@media (max-width: 860px) {
+ .site-header {
+ height: auto;
+ }
+
.site-header__bar {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
+ height: auto;
+ min-height: var(--header-h);
+ gap: 8px 14px;
+ padding-top: 8px;
+ padding-bottom: 10px;
}
.site-nav {
@@ -869,12 +887,13 @@
max-width: 36em;
}
- .views__modes-row {
- flex-wrap: wrap;
+ .views__details {
+ grid-template-columns: 1fr;
+ gap: 24px;
}
.views__shortcut {
- margin-left: 0;
+ justify-self: start;
}
.tags__split {
@@ -925,6 +944,10 @@
.privacy__art {
justify-self: center;
}
+
+ .feature-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
}
@media (max-width: 560px) {
@@ -935,4 +958,8 @@
.hero {
padding: 32px 0 48px;
}
-}
\ No newline at end of file
+
+ .feature-grid {
+ grid-template-columns: 1fr;
+ }
+}
--
Gitblit v1.9.3