diff options
Diffstat (limited to 'home.html')
| -rw-r--r-- | home.html | 364 |
1 files changed, 293 insertions, 71 deletions
@@ -4,8 +4,141 @@ <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{{ .SiteTitle }}</title> - <link rel="stylesheet" href="/style.css" /> + <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; @@ -22,119 +155,208 @@ } .post-item { - display: grid; - gap: 0 1.8rem; + display: flex; align-items: baseline; - padding: 0.85rem 0; + gap: 1.5rem; + padding: 1rem 0; text-decoration: none; color: inherit; - transition: opacity var(--transition); - } - - .post-item:first-child { - border-top: 1px solid var(--border-soft); + border-bottom: 1px solid var(--border); + transition: opacity 140ms ease; + animation: fadeUp 0.5s var(--ease) both; } .post-item:hover { - opacity: 0.6; - text-decoration: none; - } - - .post-item:hover .post-title { - text-decoration-color: var(--text); + opacity: 0.55; } .post-date { font-family: var(--mono); - font-size: 0.68rem; - letter-spacing: 0.06em; - color: var(--text-muted); + font-size: 0.63rem; + letter-spacing: 0.05em; + color: var(--text-3); white-space: nowrap; - padding-top: 0.08em; + 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: 0.97rem; + font-size: 1.05rem; font-weight: 400; color: var(--text); - line-height: 1.5; - text-decoration-line: underline; - text-decoration-color: transparent; - text-underline-offset: 3px; - text-decoration-thickness: 1px; - transition: text-decoration-color var(--transition); + line-height: 1.45; + display: block; } .post-tags { display: flex; - gap: 0.35rem; - margin-top: 0.3rem; + 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.75rem; - color: var(--text-muted); + font-size: 0.72rem; + color: var(--text-3); letter-spacing: 0.06em; - padding: 2rem 0; + 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 { - grid-template-columns: 1fr; + 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> - <nav> - <a class="logo" href="/">{{ .SiteTitle }}</a> - <ul> - <li><a href="/about">About</a></li> - <li><a href="/feed.xml">RSS</a></li> - </ul> - </nav> + <div class="page"> + <nav> + <a href="/about">About</a> + <a href="/feed.xml">RSS</a> + </nav> - <div class="site-header"> - <h1>{{ .AuthorName }}</h1> - <p class="role">{{ .AuthorRole }}</p> - <p class="intro">{{ .AuthorBio }}</p> - </div> + <header class="hero"> + <h1 class="hero-name">{{ .AuthorName }}</h1> + <p class="hero-role">{{ .AuthorRole }}</p> + <p class="hero-bio">{{ .AuthorBio }}</p> + </header> - <main> - <p class="section-label">Writing</p> + <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-date">{{ .Date }}</span> - <span> - <span class="post-title">{{ .Title }}</span> - {{ if .Tags }} - <span class="post-tags"> - {{ range .Tags }} - <span class="pill">{{ . }}</span> + {{ 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> - {{ end }} - </span> - </a> - </li> + <span class="post-date">{{ .Date }}</span> + </a> + </li> + {{ end }} + </ul> + {{ else }} + <p class="empty">No posts yet.</p> {{ end }} - </ul> - {{ else }} - <p class="empty">No posts yet.</p> - {{ end }} - </main> + </main> - <footer> - <span>© {{ .Year }} {{ .AuthorName }}</span> - <span>Built with <a href="#">kite</a></span> - </footer> + <footer> + <span>© {{ .Year }} {{ .AuthorName }}</span> + <span>Built with <a href="#">kite</a></span> + </footer> + </div> </body> </html> |