feat: 发布简洁版 GitHub Pages 网站

2026-08-11 18:14:09 +08:00
parent e36c083751
commit c9e3d30b33
31 changed files with 965 additions and 2730 deletions
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="noindex">
+  <meta name="theme-color" content="#f7f8fb">
+  <title>页面不存在 · PeopleLib</title>
+  <link rel="icon" href="/assets/icon.png">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body class="error-page">
+  <main>
+    <section class="error-content">
+      <img src="/assets/icon.png" alt="" width="72" height="72">
+      <p class="error-code">404</p>
+      <h1>这个页面不存在</h1>
+      <p>地址可能已经改变，返回首页继续了解 PeopleLib。</p>
+      <a class="button button-primary" href="/">返回首页</a>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1 @@
+reader.mesalogo.com
@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="PeopleLib 是一款集多源文献检索、本地书库、内置阅读器和 AI 助手于一体的桌面应用。">
+  <meta name="theme-color" content="#f7f8fb">
+  <meta property="og:title" content="PeopleLib · 文献检索与本地阅读">
+  <meta property="og:description" content="多源文献检索、本地书库、内置阅读器、笔记与 AI 助手。">
+  <meta property="og:type" content="website">
+  <meta property="og:image" content="https://reader.mesalogo.com/assets/og-cover.jpg">
+  <meta property="og:url" content="https://reader.mesalogo.com/">
+  <title>PeopleLib · 文献检索与本地阅读</title>
+  <link rel="canonical" href="https://reader.mesalogo.com/">
+  <link rel="icon" href="assets/icon.png">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header class="site-header">
+    <a class="brand" href="#top" aria-label="PeopleLib 首页">
+      <img src="assets/icon.png" alt="" width="40" height="40">
+      <span>PeopleLib</span>
+    </a>
+    <nav aria-label="主导航">
+      <a href="#features">功能</a>
+      <a href="#preview">预览</a>
+      <a href="https://github.com/lofyer/peoplelib" target="_blank" rel="noreferrer">GitHub</a>
+    </nav>
+    <a class="header-download" href="https://github.com/lofyer/peoplelib/releases/latest">下载</a>
+  </header>
+
+  <main id="top">
+    <section class="hero">
+      <div class="hero-copy">
+        <h1>查文献、管书库、做笔记</h1>
+        <p class="lead">PeopleLib 是一款桌面阅读工具，把开放文献检索、本地书库、PDF 与电子书阅读、批注和 AI 助手放在一个应用里。</p>
+        <div class="hero-actions">
+          <a class="button button-primary" href="https://github.com/lofyer/peoplelib/releases/latest">下载 PeopleLib</a>
+          <a class="button button-secondary" href="https://github.com/lofyer/peoplelib">GitHub</a>
+        </div>
+        <p class="platforms">支持 Windows x64、macOS Apple 芯片和 Linux</p>
+      </div>
+      <div class="hero-art" aria-hidden="true">
+        <img class="app-icon" src="assets/icon.png" alt="" width="180" height="180">
+      </div>
+    </section>
+
+    <section class="product-shot" aria-label="PeopleLib 应用预览">
+      <div class="window-bar">
+        <span></span><span></span><span></span>
+        <strong>PeopleLib</strong>
+      </div>
+      <img src="screenshots/PeopleLib_bAecy2Izab.png" alt="PeopleLib 本地书库界面">
+    </section>
+
+    <section class="section" id="features">
+      <div class="section-heading">
+        <h2>主要功能</h2>
+        <p>从搜索、下载到阅读和记录，常用操作不用切换软件。</p>
+      </div>
+      <div class="feature-grid">
+        <article>
+          <h3>多源检索</h3>
+          <p>统一检索 16 个文献与图书数据源，可指定单个来源，也可聚合搜索。</p>
+        </article>
+        <article>
+          <h3>本地书库</h3>
+          <p>管理下载和导入的文件，用书架、标签和阅读状态整理资料。</p>
+        </article>
+        <article>
+          <h3>内置阅读器</h3>
+          <p>阅读 PDF、EPUB、MOBI、AZW、TXT 与 Markdown，支持进度、书签、选文和批注。</p>
+        </article>
+        <article>
+          <h3>AI 助手</h3>
+          <p>使用自己的 API Key，可针对选文、当前页、全文或框选区域提问。</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="section preview" id="preview">
+      <div class="preview-copy">
+        <h2>阅读器</h2>
+        <p>目录、书签、批注、笔记和 AI 助手都在阅读窗口中，PDF 与电子书无需调用外部程序。</p>
+        <ul>
+          <li>PDF 页面批注与画布笔记</li>
+          <li>可重排电子书与阅读进度</li>
+          <li>文本、页面和图像上下文提问</li>
+        </ul>
+      </div>
+      <div class="preview-image">
+        <img src="screenshots/PeopleLib_2N6zVpCFBA.png" alt="PeopleLib 阅读器与 AI 助手界面" loading="lazy">
+      </div>
+    </section>
+
+    <section class="section notes" id="notes">
+      <div class="section-heading">
+        <h2>笔记与批注</h2>
+        <p>支持富文本读书笔记、画布笔记和 PDF 页面批注，内容与书籍关联并保存在本地。</p>
+      </div>
+      <div class="note-gallery">
+        <figure>
+          <img src="assets/shot-reader.jpg" width="1600" height="1050" alt="PeopleLib 阅读器中的 PDF 批注与笔记面板" loading="lazy">
+          <figcaption>阅读器内查看批注、书签与笔记</figcaption>
+        </figure>
+        <figure>
+          <img src="assets/shot-annotations.jpg" width="1600" height="1058" alt="PeopleLib PDF 页面批注工具，可自由绘制、高亮和添加文字" loading="lazy">
+          <figcaption>在 PDF 页面上绘制、高亮与添加文字</figcaption>
+        </figure>
+      </div>
+      <div class="note-types">
+        <article>
+          <span>读书笔记</span>
+          <h3>整理摘录与文字</h3>
+          <p>选中的段落可以直接摘录进笔记，富文本内容适合继续归纳、整理和导出。</p>
+        </article>
+        <article>
+          <span>画布笔记</span>
+          <h3>在页面上自由圈画</h3>
+          <p>把 PDF 页面作为底版，使用画笔、高亮、形状和文字记录阅读时的想法。</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="section formats" id="formats">
+      <div class="section-heading">
+        <h2>支持格式</h2>
+        <p>部分格式可以入库管理，但需要调用系统关联程序阅读。</p>
+      </div>
+      <div class="format-table-wrap">
+        <table>
+          <caption>PeopleLib 格式支持对照</caption>
+          <thead>
+            <tr>
+              <th scope="col">格式</th>
+              <th scope="col">入库与管理</th>
+              <th scope="col">内置阅读</th>
+              <th scope="col">说明</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">PDF</th>
+              <td><span class="support-yes">支持</span></td>
+              <td><span class="support-yes">支持</span></td>
+              <td>页面批注、书签、选文与笔记，可调渲染画质</td>
+            </tr>
+            <tr>
+              <th scope="row">EPUB</th>
+              <td><span class="support-yes">支持</span></td>
+              <td><span class="support-yes">支持</span></td>
+              <td>目录、重排、书签、选文与笔记</td>
+            </tr>
+            <tr>
+              <th scope="row">MOBI / AZW / AZW3</th>
+              <td><span class="support-yes">支持</span></td>
+              <td><span class="support-yes">支持</span></td>
+              <td>解析无 DRM 的 MOBI、KF7 与 KF8 内容</td>
+            </tr>
+            <tr>
+              <th scope="row">TXT / Markdown</th>
+              <td><span class="support-yes">支持</span></td>
+              <td><span class="support-yes">支持</span></td>
+              <td>自动识别编码，Markdown 支持常用排版结构</td>
+            </tr>
+            <tr>
+              <th scope="row">DJVU / FB2 / CBZ / CBR</th>
+              <td><span class="support-yes">支持</span></td>
+              <td><span class="support-no">系统打开</span></td>
+              <td>可入库整理，阅读时调用系统关联应用</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p class="format-hint">DRM 保护或损坏的文件不会尝试绕过保护，应用会提示改用系统关联程序打开。</p>
+    </section>
+
+    <section class="privacy">
+      <div>
+        <h2>数据保存在本机</h2>
+      </div>
+      <p>书库、笔记、批注与阅读进度都写入本地文件。应用没有账号和同步服务，AI 内容只在确认后发送。</p>
+    </section>
+
+    <section class="cta">
+      <img src="assets/icon.png" alt="" width="88" height="88">
+      <h2>下载 PeopleLib</h2>
+      <p>安装包由 GitHub Releases 发布。</p>
+      <a class="button button-primary" href="https://github.com/lofyer/peoplelib/releases/latest">查看最新版本</a>
+    </section>
+  </main>
+
+  <footer>
+    <a class="brand footer-brand" href="#top">
+      <img src="assets/icon.png" alt="" width="32" height="32">
+      <span>PeopleLib</span>
+    </a>
+    <p>开放获取文献与图书的桌面客户端</p>
+    <p>MIT 开源许可</p>
+  </footer>
+</body>
+</html>
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://reader.mesalogo.com/sitemap.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://reader.mesalogo.com/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>
@@ -0,0 +1,691 @@
+:root {
+  color-scheme: light;
+  --ink: #17233a;
+  --muted: #637089;
+  --line: #dfe5ef;
+  --surface: #ffffff;
+  --soft: #f3f6fb;
+  --blue: #3467eb;
+  --blue-dark: #2854c7;
+  --gold: #e6b95e;
+  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background: #f7f8fb;
+  line-height: 1.6;
+}
+
+.error-page {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+}
+
+.error-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.error-content img {
+  margin-bottom: 28px;
+  border-radius: 18px;
+  box-shadow: 0 18px 40px rgba(36, 54, 91, 0.18);
+}
+
+.error-content h1 {
+  font-size: clamp(42px, 7vw, 72px);
+}
+
+.error-code {
+  margin: 0 0 10px;
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.error-content > p:not(.error-code) {
+  margin: 18px 0 30px;
+  color: var(--muted);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+.site-header {
+  position: sticky;
+  z-index: 20;
+  top: 0;
+  display: flex;
+  align-items: center;
+  width: min(1180px, calc(100% - 40px));
+  height: 76px;
+  margin: 0 auto;
+  border-bottom: 1px solid rgba(223, 229, 239, 0.85);
+  background: #f7f8fb;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: 750;
+  letter-spacing: -0.02em;
+}
+
+.brand img {
+  border-radius: 11px;
+  box-shadow: 0 6px 18px rgba(31, 44, 74, 0.12);
+}
+
+nav {
+  display: flex;
+  gap: 34px;
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+nav a,
+footer a {
+  transition: color 160ms ease;
+}
+
+nav a:hover,
+footer a:hover {
+  color: var(--blue);
+}
+
+.header-download {
+  margin-left: 34px;
+  padding: 8px 18px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--surface);
+  font-size: 14px;
+  font-weight: 650;
+  transition: border-color 160ms ease, transform 160ms ease;
+}
+
+.header-download:hover {
+  border-color: #b9c6dc;
+  transform: translateY(-1px);
+}
+
+main,
+footer {
+  width: min(1180px, calc(100% - 40px));
+  margin: 0 auto;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
+  align-items: center;
+  min-height: 560px;
+  padding: 64px 7% 72px;
+}
+
+h1,
+h2,
+h3,
+p {
+  overflow-wrap: break-word;
+}
+
+h1 {
+  max-width: 700px;
+  margin: 0;
+  font-size: clamp(44px, 5.4vw, 68px);
+  line-height: 1.12;
+  letter-spacing: -0.045em;
+}
+
+.lead {
+  max-width: 650px;
+  margin: 28px 0 0;
+  color: var(--muted);
+  font-size: clamp(17px, 2vw, 20px);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 36px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px;
+  padding: 0 24px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  font-size: 15px;
+  font-weight: 700;
+  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+}
+
+.button-primary {
+  color: #fff;
+  background: var(--blue);
+  box-shadow: 0 6px 14px rgba(52, 103, 235, 0.18);
+}
+
+.button-primary:hover {
+  background: var(--blue-dark);
+  box-shadow: 0 8px 18px rgba(52, 103, 235, 0.22);
+}
+
+.button-secondary {
+  border-color: var(--line);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.button-secondary:hover {
+  border-color: #b9c6dc;
+  background: #fff;
+}
+
+.platforms {
+  margin: 18px 0 0;
+  color: #8490a4;
+  font-size: 13px;
+}
+
+.hero-art {
+  display: grid;
+  place-items: center;
+  min-height: 300px;
+}
+
+.app-icon {
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-radius: 22%;
+  box-shadow: 0 18px 35px rgba(36, 54, 91, 0.18);
+}
+
+.product-shot {
+  overflow: hidden;
+  border: 1px solid #d6dce8;
+  border-radius: 10px;
+  background: var(--surface);
+  box-shadow: 0 18px 45px rgba(42, 53, 78, 0.1);
+}
+
+.window-bar {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 42px;
+  padding: 0 15px;
+  border-bottom: 1px solid #e6eaf1;
+  background: #fbfcfe;
+}
+
+.window-bar span {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #d6dce8;
+}
+
+.window-bar strong {
+  margin: 0 auto 0 -33px;
+  color: #8b95a7;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.section {
+  padding: 120px 0;
+}
+
+.section-heading {
+  max-width: 720px;
+  margin: 0 0 46px;
+}
+
+h2 {
+  margin: 0;
+  font-size: clamp(32px, 3.8vw, 46px);
+  line-height: 1.18;
+  letter-spacing: -0.045em;
+}
+
+.section-heading > p:last-child,
+.preview-copy > p {
+  margin: 18px 0 0;
+  color: var(--muted);
+  font-size: 17px;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+}
+
+.feature-grid article {
+  min-height: 220px;
+  padding: 28px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  transition: border-color 180ms ease;
+}
+
+.feature-grid article:hover {
+  border-color: #c5d0e3;
+}
+
+h3 {
+  margin: 0;
+  font-size: 21px;
+  letter-spacing: -0.025em;
+}
+
+.feature-grid p {
+  margin: 18px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.preview {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
+  align-items: center;
+  gap: 7%;
+}
+
+.preview-copy ul {
+  display: grid;
+  gap: 12px;
+  margin: 30px 0 0;
+  padding: 0;
+  color: var(--ink);
+  list-style: none;
+}
+
+.preview-copy li {
+  position: relative;
+  padding-left: 25px;
+}
+
+.preview-copy li::before {
+  position: absolute;
+  top: 0.72em;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gold);
+  content: "";
+  transform: translateY(-50%);
+}
+
+.preview-image {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: 0 16px 40px rgba(42, 53, 78, 0.1);
+}
+
+.note-gallery {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.note-gallery figure {
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+  box-shadow: 0 12px 32px rgba(42, 53, 78, 0.08);
+}
+
+.note-gallery img {
+  width: 100%;
+  aspect-ratio: 1.51;
+  object-fit: cover;
+}
+
+.note-gallery figcaption {
+  padding: 15px 18px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.note-types {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  margin-top: 18px;
+}
+
+.note-types article {
+  padding: 28px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+.note-types span {
+  display: block;
+  margin-bottom: 18px;
+  color: var(--blue);
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: 0.1em;
+}
+
+.note-types p {
+  margin: 10px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.format-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface);
+}
+
+table {
+  width: 100%;
+  min-width: 720px;
+  border-collapse: collapse;
+}
+
+caption {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+th,
+td {
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: middle;
+}
+
+thead th {
+  color: var(--muted);
+  background: var(--soft);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+tbody th {
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+tbody td {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+tbody tr:last-child th,
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.support-yes,
+.support-no {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.support-yes {
+  color: #28724a;
+  background: #e7f5ec;
+}
+
+.support-no {
+  color: #6e7789;
+  background: #edf0f5;
+}
+
+.format-hint {
+  margin: 18px 4px 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.privacy {
+  display: grid;
+  grid-template-columns: 1fr 0.75fr;
+  align-items: end;
+  gap: 9%;
+  padding: 76px;
+  border-radius: 8px;
+  color: #f8faff;
+  background: #18233a;
+}
+
+.privacy > p {
+  margin: 0;
+  color: #b9c3d5;
+  font-size: 17px;
+}
+
+.cta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 150px 20px;
+  text-align: center;
+}
+
+.cta img {
+  margin-bottom: 28px;
+  border-radius: 18px;
+  box-shadow: 0 12px 28px rgba(36, 54, 91, 0.14);
+}
+
+.cta p {
+  margin: 16px 0 30px;
+  color: var(--muted);
+}
+
+footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 28px 0 40px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.footer-brand {
+  font-size: 15px;
+}
+
+footer p {
+  margin: 0;
+}
+
+footer p:last-child {
+  justify-self: end;
+}
+
+@media (max-width: 900px) {
+  .hero {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    padding: 90px 4% 70px;
+    text-align: center;
+  }
+
+  .hero-copy {
+    z-index: 2;
+  }
+
+  .lead {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .hero-actions {
+    justify-content: center;
+  }
+
+  .hero-art {
+    min-height: 300px;
+  }
+
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .preview {
+    grid-template-columns: 1fr;
+    gap: 48px;
+  }
+
+  .note-gallery {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-copy {
+    max-width: 650px;
+  }
+
+  .privacy {
+    grid-template-columns: 1fr;
+    align-items: start;
+    gap: 30px;
+  }
+}
+
+@media (max-width: 640px) {
+  .site-header,
+  main,
+  footer {
+    width: min(100% - 28px, 1180px);
+  }
+
+  .site-header {
+    height: 66px;
+  }
+
+  nav {
+    display: none;
+  }
+
+  .header-download {
+    margin-left: auto;
+  }
+
+  .hero {
+    padding: 72px 0 55px;
+  }
+
+  h1 {
+    font-size: clamp(43px, 14vw, 62px);
+  }
+
+  .hero-art {
+    min-height: 250px;
+  }
+
+  .app-icon {
+    width: 140px;
+    height: 140px;
+  }
+
+  .product-shot {
+    border-radius: 12px;
+  }
+
+  .section {
+    padding: 100px 0;
+  }
+
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .note-types {
+    grid-template-columns: 1fr;
+  }
+
+  .feature-grid article {
+    min-height: auto;
+  }
+
+  .privacy {
+    padding: 42px 28px;
+  }
+
+  .cta {
+    padding: 110px 10px;
+  }
+
+  footer {
+    grid-template-columns: 1fr auto;
+    gap: 10px;
+  }
+
+  footer > p:nth-child(2) {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+  }
+}