diff options
Diffstat (limited to 'home.html')
| -rw-r--r-- | home.html | 362 |
1 files changed, 0 insertions, 362 deletions
diff --git a/home.html b/home.html deleted file mode 100644 index 0e963fe..0000000 --- a/home.html +++ /dev/null @@ -1,362 +0,0 @@ -<!doctype html> -<html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>{{ .SiteTitle }}</title> - <link rel="preconnect" href="https://fonts.googleapis.com" /> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> - <link - href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500&family=Geist+Mono:wght@400;500&display=swap" - rel="stylesheet" - /> - <style> - :root { - --bg: #f9f8f6; - --surface: #ffffff; - --border: #e4e3df; - --text: #111110; - --text-2: #5c5b57; - --text-3: #a8a7a2; - --warm: #b85c38; - --serif: "Instrument Serif", Georgia, serif; - --sans: "Geist", system-ui, sans-serif; - --mono: "Geist Mono", ui-monospace, monospace; - --ease: cubic-bezier(0.16, 1, 0.3, 1); - } - - *, - *::before, - *::after { - box-sizing: border-box; - } - - html { - scroll-behavior: smooth; - } - - body { - margin: 0; - background: var(--bg); - color: var(--text); - font-family: var(--sans); - -webkit-font-smoothing: antialiased; - min-height: 100vh; - } - - /* ── Layout ── */ - .page { - max-width: 640px; - margin: 0 auto; - padding: 0 2rem; - } - - /* ── Nav ── */ - nav { - display: flex; - justify-content: flex-end; - align-items: center; - padding: 2rem 0 0; - gap: 2rem; - } - - nav a { - font-family: var(--mono); - font-size: 0.68rem; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-3); - text-decoration: none; - transition: color 120ms ease; - } - - nav a:hover { - color: var(--text); - } - - /* ── Hero ── */ - .hero { - padding: 5rem 0 4rem; - border-bottom: 1px solid var(--border); - } - - .hero-name { - font-family: var(--serif); - font-size: clamp(2.8rem, 8vw, 4.5rem); - font-weight: 400; - line-height: 1.05; - letter-spacing: -0.01em; - margin: 0 0 1.2rem; - color: var(--text); - animation: fadeUp 0.7s var(--ease) both; - } - - .hero-name em { - font-style: italic; - color: var(--text-2); - } - - .hero-role { - font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-3); - margin: 0 0 1.4rem; - animation: fadeUp 0.7s 0.08s var(--ease) both; - } - - .hero-bio { - font-size: 0.975rem; - line-height: 1.8; - color: var(--text-2); - margin: 0; - max-width: 420px; - animation: fadeUp 0.7s 0.15s var(--ease) both; - } - - /* ── Writing section ── */ - .writing-header { - display: flex; - align-items: center; - gap: 1rem; - padding: 2.8rem 0 1.6rem; - } - - .writing-label { - font-family: var(--mono); - font-size: 0.64rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--text-3); - white-space: nowrap; - } - - .writing-rule { - flex: 1; - height: 1px; - background: var(--border); - } - - /* ── Post list ── */ - .post-list { - margin: 0; - padding: 0; - list-style: none; - } - - .post-list li { - padding: 0; - margin: 0; - } - - .post-list li::before { - display: none; - } - - .post-item { - display: flex; - align-items: baseline; - gap: 1.5rem; - padding: 1rem 0; - text-decoration: none; - color: inherit; - border-bottom: 1px solid var(--border); - transition: opacity 140ms ease; - animation: fadeUp 0.5s var(--ease) both; - } - - .post-item:hover { - opacity: 0.55; - } - - .post-date { - font-family: var(--mono); - font-size: 0.63rem; - letter-spacing: 0.05em; - color: var(--text-3); - white-space: nowrap; - flex-shrink: 0; - padding-top: 0.1em; - min-width: 5.5rem; - } - - .post-right { - flex: 1; - min-width: 0; - } - - .post-title { - font-family: var(--serif); - font-size: 1.05rem; - font-weight: 400; - color: var(--text); - line-height: 1.45; - display: block; - } - - .post-tags { - display: flex; - gap: 0.3rem; - margin-top: 0.4rem; - flex-wrap: wrap; - } - - .pill { - display: inline-block; - font-family: var(--mono); - font-size: 0.58rem; - letter-spacing: 0.06em; - text-transform: uppercase; - padding: 0.15rem 0.45rem; - background: transparent; - border: 1px solid var(--border); - border-radius: 100px; - color: var(--text-3); - } - - /* ── Empty state ── */ - .empty { - font-family: var(--mono); - font-size: 0.72rem; - color: var(--text-3); - letter-spacing: 0.06em; - padding: 2.5rem 0; - } - - /* ── Footer ── */ - footer { - padding: 2.5rem 0 3rem; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 0.8rem; - font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.05em; - color: var(--text-3); - } - - footer a { - color: inherit; - text-decoration: underline; - text-underline-offset: 3px; - text-decoration-color: var(--border); - transition: color 120ms ease; - } - - footer a:hover { - color: var(--text); - } - - /* ── Animations ── */ - @keyframes fadeUp { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - /* stagger post items */ - .post-item:nth-child(1) { - animation-delay: 0.2s; - } - .post-item:nth-child(2) { - animation-delay: 0.27s; - } - .post-item:nth-child(3) { - animation-delay: 0.34s; - } - .post-item:nth-child(4) { - animation-delay: 0.41s; - } - .post-item:nth-child(5) { - animation-delay: 0.48s; - } - .post-item:nth-child(6) { - animation-delay: 0.55s; - } - - /* ── Mobile ── */ - @media (max-width: 500px) { - .page { - padding: 0 1.4rem; - } - .hero { - padding: 3.5rem 0 3rem; - } - .post-item { - flex-direction: column; - gap: 0.2rem; - } - .post-date { - min-width: unset; - } - footer { - flex-direction: column; - } - } - - :focus-visible { - outline: 2px solid var(--text); - outline-offset: 3px; - border-radius: 2px; - } - </style> - </head> - <body> - <div class="page"> - <nav> - <a href="/about">About</a> - <a href="/feed.xml">RSS</a> - </nav> - - <header class="hero"> - <h1 class="hero-name">{{ .AuthorName }}</h1> - <p class="hero-role">{{ .AuthorRole }}</p> - <p class="hero-bio">{{ .AuthorBio }}</p> - </header> - - <main> - <div class="writing-header"> - <span class="writing-label">Writing</span> - <span class="writing-rule"></span> - </div> - - {{ if .Posts }} - <ul class="post-list"> - {{ range .Posts }} - <li> - <a class="post-item" href="/{{ .Slug }}/"> - <span class="post-right"> - <span class="post-title">{{ .Title }}</span> - {{ if .Tags }} - <span class="post-tags"> - {{ range .Tags }} - <span class="pill">{{ . }}</span> - {{ end }} - </span> - {{ end }} - </span> - <span class="post-date">{{ .Date }}</span> - </a> - </li> - {{ end }} - </ul> - {{ else }} - <p class="empty">No posts yet.</p> - {{ end }} - </main> - - <footer> - <span>© {{ .Year }} {{ .AuthorName }}</span> - <span>Built with <a href="#">kite</a></span> - </footer> - </div> - </body> -</html> |