整理静态资源结构
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f5f8ff;
|
||||
--panel: #ffffff;
|
||||
--text: #17233d;
|
||||
--muted: #63708a;
|
||||
--line: #e5ebf5;
|
||||
--blue: #246bfe;
|
||||
--blue-dark: #1554d1;
|
||||
--green: #19b982;
|
||||
--shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100svh;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
|
||||
linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 620px;
|
||||
margin-bottom: 22px;
|
||||
font-size: clamp(2.8rem, 6vw, 5.55rem);
|
||||
line-height: 1.03;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.9rem, 3vw, 3rem);
|
||||
line-height: 1.08;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -1,76 +1,7 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f5f8ff;
|
||||
--panel: #ffffff;
|
||||
--panel-soft: #f7faff;
|
||||
--text: #17233d;
|
||||
--muted: #63708a;
|
||||
--line: #e5ebf5;
|
||||
--blue: #246bfe;
|
||||
--blue-dark: #1554d1;
|
||||
--green: #19b982;
|
||||
--orange: #ff8a3d;
|
||||
--purple: #7864f6;
|
||||
--shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100svh;
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
|
||||
linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: min(1180px, calc(100% - 40px));
|
||||
min-height: 72px;
|
||||
margin: 0 auto;
|
||||
transition:
|
||||
background 180ms ease,
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.site-header.is-scrolled {
|
||||
width: 100%;
|
||||
padding: 0 max(20px, calc((100% - 1180px) / 2));
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-bottom: 1px solid rgba(229, 235, 245, 0.9);
|
||||
box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.brand,
|
||||
.nav-links,
|
||||
.hero-actions,
|
||||
.status-row,
|
||||
.record {
|
||||
.status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -100,31 +31,18 @@ a {
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
.nav-links a,
|
||||
.record a {
|
||||
transition: color 160ms ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a:focus-visible {
|
||||
.nav-links a:focus-visible,
|
||||
.record a:hover,
|
||||
.record a:focus-visible {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.hero,
|
||||
.services-section,
|
||||
.record {
|
||||
width: min(1180px, calc(100% - 40px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
|
||||
gap: clamp(34px, 6vw, 84px);
|
||||
align-items: center;
|
||||
min-height: calc(100svh - 72px);
|
||||
padding: 54px 0 74px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
color: var(--blue);
|
||||
@@ -134,20 +52,6 @@ a {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 620px;
|
||||
margin-bottom: 22px;
|
||||
font-size: clamp(2.8rem, 6vw, 5.55rem);
|
||||
line-height: 1.03;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
max-width: 580px;
|
||||
margin-bottom: 30px;
|
||||
@@ -227,9 +131,7 @@ h1 {
|
||||
position: relative;
|
||||
min-height: 460px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
|
||||
#fff;
|
||||
background: var(--panel);
|
||||
border: 1px solid rgba(222, 232, 248, 0.9);
|
||||
border-radius: 28px;
|
||||
box-shadow: var(--shadow);
|
||||
@@ -245,7 +147,6 @@ h1 {
|
||||
}
|
||||
|
||||
.hero-visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 460px;
|
||||
@@ -301,18 +202,6 @@ h1 {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 10px 0 86px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.section-note {
|
||||
max-width: 420px;
|
||||
margin-bottom: 0;
|
||||
@@ -321,19 +210,6 @@ h1 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: clamp(1.9rem, 3vw, 3rem);
|
||||
line-height: 1.08;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.services {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -357,7 +233,6 @@ h2 {
|
||||
linear-gradient(180deg, rgba(8, 21, 44, 0.02) 12%, rgba(8, 21, 44, 0.42) 54%, rgba(8, 21, 44, 0.9) 100%),
|
||||
linear-gradient(135deg, rgba(36, 107, 254, 0.24), transparent 54%);
|
||||
content: "";
|
||||
transition: opacity 180ms ease;
|
||||
}
|
||||
|
||||
.service-card:hover,
|
||||
@@ -374,7 +249,6 @@ h2 {
|
||||
}
|
||||
|
||||
.service-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 280px;
|
||||
@@ -426,72 +300,18 @@ h2 {
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.record {
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 24px 0 34px;
|
||||
color: #7a8598;
|
||||
font-size: 0.88rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.record a {
|
||||
transition: color 160ms ease;
|
||||
}
|
||||
|
||||
.record a:hover,
|
||||
.record a:focus-visible {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
min-height: 390px;
|
||||
}
|
||||
|
||||
.hero-visual,
|
||||
.hero-visual img {
|
||||
min-height: 390px;
|
||||
}
|
||||
|
||||
.services {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-note {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.site-header,
|
||||
.hero,
|
||||
.services-section,
|
||||
.record {
|
||||
width: min(100% - 28px, 1180px);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.55rem, 13vw, 4rem);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -526,28 +346,8 @@ h2 {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.services {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.service-card img {
|
||||
min-height: 230px;
|
||||
}
|
||||
|
||||
.record {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: min(1180px, calc(100% - 40px));
|
||||
min-height: 72px;
|
||||
margin: 0 auto;
|
||||
transition:
|
||||
background 180ms ease,
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.site-header.is-scrolled {
|
||||
width: 100%;
|
||||
padding: 0 max(20px, calc((100% - 1180px) / 2));
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border-bottom: 1px solid rgba(229, 235, 245, 0.9);
|
||||
box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero,
|
||||
.services-section,
|
||||
.record {
|
||||
width: min(1180px, calc(100% - 40px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
|
||||
gap: clamp(34px, 6vw, 84px);
|
||||
align-items: center;
|
||||
min-height: calc(100svh - 72px);
|
||||
padding: 54px 0 74px;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 10px 0 86px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.services {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 24px 0 34px;
|
||||
color: #7a8598;
|
||||
font-size: 0.88rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.services {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.site-header,
|
||||
.hero,
|
||||
.services-section,
|
||||
.record {
|
||||
width: min(100% - 28px, 1180px);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.55rem, 13vw, 4rem);
|
||||
}
|
||||
|
||||
.services {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.record {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 359 KiB After Width: | Height: | Size: 359 KiB |
|
Before Width: | Height: | Size: 358 KiB After Width: | Height: | Size: 358 KiB |
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 182 KiB After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB |
+9
-7
@@ -6,7 +6,9 @@
|
||||
<meta name="description" content="sumi.work 服务入口，提供 FRP、Git、Syncthing 与 Gemini 等常用服务导航。" />
|
||||
<meta name="theme-color" content="#f5f8ff" />
|
||||
<title>sumi.work - 服务入口</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="assets/css/base.css" />
|
||||
<link rel="stylesheet" href="assets/css/layout.css" />
|
||||
<link rel="stylesheet" href="assets/css/components.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header" data-header>
|
||||
@@ -44,7 +46,7 @@
|
||||
</div>
|
||||
|
||||
<aside class="hero-visual" aria-label="服务概览">
|
||||
<img src="assets/workspace-hero.jpg" alt="整洁的现代桌面工作区，包含笔记本电脑和办公设备" />
|
||||
<img src="assets/images/workspace-hero.jpg" alt="整洁的现代桌面工作区，包含笔记本电脑和办公设备" />
|
||||
<div class="visual-overlay">
|
||||
<div class="overlay-heading">
|
||||
<span>Service Gateway</span>
|
||||
@@ -71,7 +73,7 @@
|
||||
|
||||
<div class="services">
|
||||
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
|
||||
<img src="assets/service-frp.jpg" alt="" loading="lazy" />
|
||||
<img src="assets/images/service-frp.jpg" alt="" loading="lazy" />
|
||||
<span class="service-content">
|
||||
<span class="service-icon">FRP</span>
|
||||
<span class="service-title">FRP 面板</span>
|
||||
@@ -80,7 +82,7 @@
|
||||
</a>
|
||||
|
||||
<a class="service-card accent-green" href="/git/" aria-label="进入 Git 服务">
|
||||
<img src="assets/service-git.jpg" alt="" loading="lazy" />
|
||||
<img src="assets/images/service-git.jpg" alt="" loading="lazy" />
|
||||
<span class="service-content">
|
||||
<span class="service-icon">Git</span>
|
||||
<span class="service-title">Git 服务</span>
|
||||
@@ -89,7 +91,7 @@
|
||||
</a>
|
||||
|
||||
<a class="service-card accent-orange" href="/sync/" aria-label="进入 Syncthing">
|
||||
<img src="assets/workspace-hero.jpg" alt="" loading="lazy" />
|
||||
<img src="assets/images/workspace-hero.jpg" alt="" loading="lazy" />
|
||||
<span class="service-content">
|
||||
<span class="service-icon">Sync</span>
|
||||
<span class="service-title">Syncthing</span>
|
||||
@@ -104,7 +106,7 @@
|
||||
rel="noreferrer"
|
||||
aria-label="打开 Gemini"
|
||||
>
|
||||
<img src="assets/service-gemini.jpg" alt="" loading="lazy" />
|
||||
<img src="assets/images/service-gemini.jpg" alt="" loading="lazy" />
|
||||
<span class="service-content">
|
||||
<span class="service-icon">AI</span>
|
||||
<span class="service-title">Gemini</span>
|
||||
@@ -120,6 +122,6 @@
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">粤ICP备2026053646号</a>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user