Skip to content

Commit 50ae6be

Browse files
jinwandalaohu66jinwandalaohu66
committed
Refine website deployment landing page
1 parent 58d9c7c commit 50ae6be

2 files changed

Lines changed: 26 additions & 22 deletions

File tree

‎docs/assets/site.css‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -105,19 +105,19 @@ body::before {
105105
::selection { background: var(--ink); color: var(--bg); }
106106

107107
/* Website deployment */
108-
.website-hero { position: relative; min-height: min(760px, calc(100svh - 62px)); overflow: hidden; display: flex; align-items: center; background: #0d0d0d; color: #fff; }
109-
.website-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .34); pointer-events: none; }
110-
.website-hero-media { position: absolute; inset: 0; background: #0d0d0d url("/assets/website-deploy-screen.png") no-repeat calc(50% + 350px) 48%; background-size: auto 92%; opacity: .92; }
111-
.website-hero-content { position: relative; z-index: 1; padding-block: 96px 112px; }
112-
.website-hero-content > * { max-width: 660px; }
113-
.website-display { margin: 14px 0 22px; max-width: 760px; font-size: clamp(48px, 6.8vw, 92px); line-height: .98; letter-spacing: 0; font-weight: 620; text-wrap: balance; }
114-
.website-lede { margin: 0; max-width: 650px; color: rgba(255,255,255,.78); font-size: clamp(18px, 2vw, 23px); line-height: 1.55; }
115-
.website-hero .button-row { margin-top: 34px; }
116-
.website-hero-primary { background: #fff !important; color: #111 !important; border-color: #fff !important; }
117-
.website-hero-secondary { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(0,0,0,.28); }
118-
.website-proof { display: none; background: #0d0d0d; }
119-
.website-proof-inner { padding-block: 24px 42px; }
120-
.website-proof img { width: 100%; max-height: 760px; object-fit: contain; object-position: center; }
108+
.website-hero { position: relative; display: flex; align-items: center; min-height: min(700px, calc(100svh - 62px)); border-bottom: 1px solid var(--line); background: var(--bg); color: var(--text); }
109+
.website-hero-content { padding-block: 88px 72px; }
110+
.website-hero-content > * { max-width: 760px; }
111+
.website-hero .kicker { color: var(--faint); }
112+
.website-display { margin: 14px 0 22px; max-width: 820px; color: var(--ink); font-size: clamp(48px, 6.2vw, 80px); line-height: 1.02; letter-spacing: 0; font-weight: 620; text-wrap: balance; }
113+
.website-lede { margin: 0; max-width: 690px; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.58; }
114+
.website-hero .button-row { margin-top: 32px; }
115+
.website-hero-route { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); max-width: 940px; margin-top: 64px; overflow-x: auto; border-block: 1px solid var(--line-strong); scrollbar-width: none; }
116+
.website-hero-route::-webkit-scrollbar { display: none; }
117+
.website-hero-route > div { position: relative; min-width: 150px; padding: 18px 42px 18px 0; }
118+
.website-hero-route > div:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: 18px; color: var(--faint); transform: translateY(-50%); }
119+
.website-hero-route span { display: block; margin-bottom: 7px; color: var(--faint); font-family: var(--mono); font-size: 11px; }
120+
.website-hero-route strong { color: var(--ink); font-size: 14px; font-weight: 590; white-space: nowrap; }
121121
.website-workflow { scroll-margin-top: 72px; }
122122
.website-steps { border-top: 1px solid var(--line-strong); }
123123
.website-step { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 22px; padding: 34px 0; border-bottom: 1px solid var(--line); }
@@ -139,21 +139,27 @@ body::before {
139139
.website-cta .section-copy { margin-top: 18px; }
140140

141141
@media (max-width: 820px) {
142-
.website-hero { min-height: min(720px, calc(100svh - 62px)); align-items: flex-end; }
143-
.website-hero-media { background-position: 72% 24%; background-size: auto 78%; opacity: .48; }
144-
.website-hero::after { background: rgba(0,0,0,.48); }
145-
.website-hero-content { padding-block: 180px 64px; }
146-
.website-display { font-size: clamp(42px, 12vw, 64px); }
142+
.website-hero { min-height: auto; }
143+
.website-hero-content { padding-block: 72px 58px; }
144+
.website-display { font-size: clamp(42px, 11vw, 62px); }
145+
.website-hero-route { margin-top: 52px; }
147146
.website-case-grid, .website-detail-grid { grid-template-columns: 1fr; }
148147
.website-detail-grid { gap: 42px; }
149148
.website-case-grid article:nth-child(odd), .website-case-grid article:nth-child(even) { border-right: 0; padding: 28px 0 30px; min-height: 210px; }
150149
.website-case-grid h3 { margin-top: 34px; }
151150
}
152151

153152
@media (max-width: 520px) {
154-
.website-hero-content { padding-block: 158px 54px; }
153+
.website-hero-content { padding-block: 54px 46px; }
154+
.website-display { font-size: 40px; }
155155
.website-hero .button-row { align-items: stretch; }
156156
.website-hero .button { width: 100%; }
157+
.website-hero-route { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin-top: 42px; overflow: visible; }
158+
.website-hero-route > div { min-width: 0; padding: 16px 0; }
159+
.website-hero-route > div:nth-child(odd) { padding-right: 18px; }
160+
.website-hero-route > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
161+
.website-hero-route > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
162+
.website-hero-route > div:not(:last-child)::after { display: none; }
157163
.website-step { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 28px 0; }
158164
}
159165

‎docs/website/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@
2222
<header class="site-header"><nav class="nav" aria-label="PythonIDE" data-label-en="PythonIDE navigation"><a class="brand" href="/" aria-label="PythonIDE 首页" data-label-en="PythonIDE home"><img class="brand-mark" src="/assets/brand-mark.svg" alt=""><span>PythonIDE</span></a><div class="nav-links" data-nav-links data-open="false"><a class="nav-link" href="/" data-en="Overview">概览</a><a class="nav-link" href="/website/" aria-current="page" data-en="Websites">网站</a><a class="nav-link" href="/support/" data-en="Support">支持</a><a class="nav-link" href="/about/" data-en="About">关于</a><a class="nav-link nav-external" href="https://github.com/Python-IDE/PythonIDE-iOS" target="_blank" rel="noreferrer">GitHub</a><a class="button primary nav-download" href="https://apps.apple.com/app/id6753987304" data-download data-en="Download App">下载 App</a></div><div class="nav-actions"><button class="icon-button" type="button" data-theme-toggle aria-label="切换深色模式"></button><div class="language-toggle" aria-label="语言 / Language"><button type="button" data-lang="zh" aria-pressed="true">中</button><button type="button" data-lang="en" aria-pressed="false">EN</button></div><button class="menu-button" type="button" data-menu-toggle aria-label="打开导航菜单" data-label-en="Open navigation menu" aria-expanded="false"></button></div></nav></header>
2323

2424
<main class="main" id="main">
25-
<section class="website-hero" aria-labelledby="website-title"><div class="website-hero-media" aria-hidden="true"></div><div class="shell website-hero-content"><p class="kicker enter" data-en="PythonIDE Website Deployment">PythonIDE 部署网站</p><h1 class="website-display enter" id="website-title" style="--delay:70ms" data-en="Build a website. Publish it from your phone.">在手机上创建网站，<br>然后真正上线。</h1><p class="website-lede enter" style="--delay:120ms" data-en="Write or generate HTML, check it in local preview, then publish it to a permanent URL without configuring Git, servers, or deployment tools.">手写或使用 AI 生成 HTML，本地预览确认效果，然后发布到一个可持续更新的公网网址。无需配置 Git、服务器或部署工具。</p><div class="button-row enter" style="--delay:170ms"><a class="button primary website-hero-primary" href="https://apps.apple.com/app/id6753987304" data-download><span data-en="Get PythonIDE">获取 PythonIDE</span><span aria-hidden="true">→</span></a><a class="button website-hero-secondary" href="#how-it-works"><span data-en="See how it works">查看部署步骤</span><span aria-hidden="true">↓</span></a></div></div></section>
26-
27-
<section class="website-proof" aria-label="PythonIDE deployment preview" data-label-en="PythonIDE deployment preview"><div class="shell website-proof-inner"><img src="/assets/website-deploy-screen.png" alt="PythonIDE 代码、预览和部署界面" data-alt-en="PythonIDE code, preview, and deployment interface" loading="eager"></div></section>
25+
<section class="website-hero" aria-labelledby="website-title"><div class="shell website-hero-content"><p class="kicker enter" data-en="PythonIDE Website Deployment">PythonIDE 部署网站</p><h1 class="website-display enter" id="website-title" style="--delay:70ms" data-en="Build a website. Publish it from your phone.">在手机上创建网站，<br>然后真正上线。</h1><p class="website-lede enter" style="--delay:120ms" data-en="Write or generate HTML, check it in local preview, then publish it to a permanent URL without configuring Git, servers, or deployment tools.">手写或使用 AI 生成 HTML，本地预览确认效果，然后发布到一个可持续更新的公网网址。无需配置 Git、服务器或部署工具。</p><div class="button-row enter" style="--delay:170ms"><a class="button primary" href="https://apps.apple.com/app/id6753987304" data-download><span data-en="Get PythonIDE">获取 PythonIDE</span><span aria-hidden="true">→</span></a><a class="button" href="#how-it-works"><span data-en="See how it works">查看部署步骤</span><span aria-hidden="true">↓</span></a></div><div class="website-hero-route enter" style="--delay:220ms" aria-label="创建、预览、部署并分享" data-label-en="Create, preview, publish, and share"><div><span>01</span><strong data-en="Create HTML">创建 HTML</strong></div><div><span>02</span><strong data-en="Preview locally">本地预览</strong></div><div><span>03</span><strong data-en="Publish">一键部署</strong></div><div><span>04</span><strong data-en="Share the URL">分享网址</strong></div></div></div></section>
2826

2927
<section class="section website-workflow" id="how-it-works" aria-labelledby="workflow-title"><div class="shell"><div class="section-head"><p class="section-label" data-en="Three steps">三个步骤</p><h2 class="section-title" id="workflow-title" data-en="From an HTML file to a live website.">从一个 HTML 文件，到真正的网站。</h2><p class="section-copy" data-en="PythonIDE finds the files used by the current webpage and packages them automatically. You do not select folders or upload ZIP files yourself.">PythonIDE 会从当前网页所在目录自动收集 HTML、CSS、JavaScript、图片、字体和媒体文件。你不需要选择文件夹，也不需要自己制作压缩包。</p></div><div class="website-steps">
3028
<article class="website-step"><span class="website-step-number">01</span><div><h3 data-en="Create an HTML file">创建 HTML 文件</h3><p data-en="Tap + in PythonIDE and create an HTML file, or import an existing website project. AI can help generate and edit the page.">在 PythonIDE 点按加号新建 HTML，也可以导入已有网页项目。你还可以让 AI 生成页面并继续修改源码。</p></div></article>

0 commit comments

Comments
 (0)