| docs/assets/hero-visual.jpg | patch | view | raw | blame | history | |
| docs/index-en.html | ●●●●● patch | view | raw | blame | history | |
| docs/index.html | ●●●●● patch | view | raw | blame | history | |
| docs/styles.css | ●●●●● patch | view | raw | blame | history |
docs/assets/hero-visual.jpg
@@ -5,7 +5,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TagLauncher — Tag-based Mac app launcher</title> <meta name="description" content="TagLauncher organizes Mac apps with tags: scrollable grid, multi-tag apps, searchable notes, JSON layout backup—beyond Launchpad folders and pages."> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-shot-grid.jpg"> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-visual.jpg"> <link rel="stylesheet" href="styles.css"> <link rel="alternate" hreflang="en" href="index-en.html"> <link rel="alternate" hreflang="zh-Hans" href="index.html"> @@ -33,33 +33,19 @@ <section class="hero" aria-label="TagLauncher hero"> <div class="layout hero__split"> <div class="hero__copy"> <h1 class="hero__headline">Possibly the best Mac app launcher—anywhere</h1> <p class="hero__lead">Don't mourn Launchpad on macOS 26 Tahoe. It was never great—and it still isn't.</p> <h1 class="hero__headline">Possibly the best Mac app launcher—in the world</h1> <p class="hero__lead">Don't mourn Launchpad on macOS 26 Tahoe. It was never truly good—it was only barely usable.</p> </div> <div class="hero__visual"> <div class="hero__stack"> <div class="hero-stack-layer hero-stack-layer--far" aria-hidden="true"> <div class="hero-stack-layer__chrome"><span></span><span></span><span></span></div> <div class="hero-stack-layer__body"></div> </div> <div class="hero-stack-layer hero-stack-layer--near" aria-hidden="true"> <div class="hero-stack-layer__chrome"><span></span><span></span><span></span></div> <div class="hero-stack-layer__body"></div> </div> <figure class="hero-window"> <div class="hero-window__chrome"> <span></span><span></span><span></span> </div> <div class="hero-window__screen"> <img src="assets/hero-shot-grid.jpg" alt="TagLauncher App Grid" width="1600" height="1040" fetchpriority="high" decoding="async"> </div> <div class="hero-window__reflection" aria-hidden="true"> <img src="assets/hero-shot-grid.jpg" alt="" width="1600" height="1040"> </div> <figure class="hero__visual"> <img src="assets/hero-visual.jpg" alt="TagLauncher App Grid with colorful tags" width="553" height="619" fetchpriority="high" decoding="async"> </figure> </div> </div> </div> </section>
@@ -4,8 +4,8 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TagLauncher — 标签化 Mac 应用启动器</title> <meta name="description" content="TagLauncher：用标签管理 Mac 应用，可滚动网格、多标签归类、应用备忘、布局备份。比 Launchpad 更适合应用很多的用户。"> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-shot-grid.jpg"> <meta name="description" content="在全球，这可能是Mac最好用的应用启动台。不用怀念 macOS 26 Tahoe 上消失的 Launchpad，TagLauncher 用标签管理 Mac 应用。"> <meta property="og:image" content="https://shanghai3168.github.io/taglauncher/assets/hero-visual.jpg"> <link rel="stylesheet" href="styles.css"> <link rel="alternate" hreflang="en" href="index-en.html"> <link rel="alternate" hreflang="zh-Hans" href="index.html"> @@ -34,32 +34,18 @@ <div class="layout hero__split"> <div class="hero__copy"> <h1 class="hero__headline">在全球，这可能是Mac最好用的应用启动台</h1> <p class="hero__lead">不用怀念 macOS 26 Tahoe 上消失的 Launchpad（启动台），因为它一直都不好用，从来就没好用过</p> <p class="hero__lead">不用怀念 macOS 26 Tahoe 上消失的 Launchpad（启动台），因为他从来都没真的好用过，他从来就勉强可以用</p> </div> <div class="hero__visual"> <div class="hero__stack"> <div class="hero-stack-layer hero-stack-layer--far" aria-hidden="true"> <div class="hero-stack-layer__chrome"><span></span><span></span><span></span></div> <div class="hero-stack-layer__body"></div> </div> <div class="hero-stack-layer hero-stack-layer--near" aria-hidden="true"> <div class="hero-stack-layer__chrome"><span></span><span></span><span></span></div> <div class="hero-stack-layer__body"></div> </div> <figure class="hero-window"> <div class="hero-window__chrome"> <span></span><span></span><span></span> </div> <div class="hero-window__screen"> <img src="assets/hero-shot-grid.jpg" alt="TagLauncher 应用网格界面" width="1600" height="1040" fetchpriority="high" decoding="async"> </div> <div class="hero-window__reflection" aria-hidden="true"> <img src="assets/hero-shot-grid.jpg" alt="" width="1600" height="1040"> </div> <figure class="hero__visual"> <img src="assets/hero-visual.jpg" alt="TagLauncher 应用网格界面：彩色标签分类与可滚动应用图标" width="553" height="619" fetchpriority="high" decoding="async"> </figure> </div> </div> </div> </section>
@@ -163,141 +163,45 @@ .hero__split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 28px 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 48px; align-items: center; min-height: calc(100svh - var(--header-h) - 112px); min-height: calc(100vh - var(--header-h) - 112px); min-height: calc(100svh - var(--header-h) - 96px); min-height: calc(100vh - var(--header-h) - 96px); } .hero__copy { padding: 12px 0; padding: 8px 0; } .hero__headline { margin: 0; font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: #111114; font-size: clamp(2rem, 4.8vw, 3.15rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: #000; } .hero__lead { margin: 22px 0 0; font-size: clamp(0.98rem, 1.6vw, 1.12rem); line-height: 1.65; color: var(--muted); max-width: 26em; margin: 28px 0 0; font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.7; color: #1d1d1f; max-width: 22em; } .hero__visual { position: relative; min-height: 340px; } /* One real screenshot in front; back layers are chrome-only depth cues */ .hero__stack { position: relative; width: 100%; max-width: 520px; margin-left: auto; padding: 36px 0 48px; } .hero-stack-layer { position: absolute; left: 0; right: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 16px 40px rgba(30, 45, 90, 0.1); pointer-events: none; } .hero-stack-layer__chrome, .hero-window__chrome { display: flex; gap: 7px; padding: 9px 11px 7px; background: linear-gradient(180deg, #f3f5f9 0%, #e8ecf3 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .hero-stack-layer__chrome span, .hero-window__chrome span { width: 10px; height: 10px; border-radius: 50%; } .hero-stack-layer__chrome span:nth-child(1), .hero-window__chrome span:nth-child(1) { background: #ff6b6b; } .hero-stack-layer__chrome span:nth-child(2), .hero-window__chrome span:nth-child(2) { background: #ffd166; } .hero-stack-layer__chrome span:nth-child(3), .hero-window__chrome span:nth-child(3) { background: #6ee7a8; } .hero-stack-layer__body { height: 220px; background: linear-gradient(180deg, #fafbfd 0%, #eef1f7 100%); } .hero-stack-layer--far { top: 0; transform: translate(28px, -22px) scale(0.96); opacity: 0.45; z-index: 1; } .hero-stack-layer--near { top: 12px; transform: translate(14px, -10px) scale(0.98); opacity: 0.68; z-index: 2; } .hero-window { position: relative; margin: 24px 0 0; z-index: 3; transform: rotateY(-6deg) rotateX(3deg); transform-style: preserve-3d; } .hero-window__screen { border-radius: 0 0 12px 12px; overflow: hidden; margin: 0; line-height: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: none; box-shadow: 0 28px 64px rgba(30, 45, 90, 0.16), 0 10px 24px rgba(30, 45, 90, 0.08); } .hero-window__screen img { .hero__visual img { display: block; width: 100%; max-width: 560px; height: auto; } .hero-window__reflection { margin-top: 10px; transform: scaleY(-1); opacity: 0.18; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 70%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 70%); border-radius: 12px; overflow: hidden; } .hero-window__reflection img { display: block; width: 100%; height: auto; margin-left: auto; } /* Main content */ @@ -467,9 +371,9 @@ gap: 32px; } .hero__stack { max-width: 100%; .hero__visual img { margin-left: 0; max-width: 100%; } } @@ -480,9 +384,5 @@ .hero { padding: 32px 0 48px; } .hero-stack-layer__body { height: 160px; } }
