summaryrefslogtreecommitdiff
path: root/themes/modern-dark/home.html
diff options
context:
space:
mode:
authorHimanshu Sardana <himanshusardana2005@gmail.com>2026-03-25 00:34:32 +0000
committerHimanshu Sardana <himanshusardana2005@gmail.com>2026-03-25 00:34:32 +0000
commit6eb342c0d30eebe50e127a54038b2df6dc64b4e5 (patch)
treed26a2e14213c3cf5c6d312c633eac2cd4dd430d6 /themes/modern-dark/home.html
parentc9828dfeb6379301691b0990dc7b426a145aae61 (diff)
feat: add new theme structure
Diffstat (limited to 'themes/modern-dark/home.html')
-rw-r--r--themes/modern-dark/home.html450
1 files changed, 450 insertions, 0 deletions
diff --git a/themes/modern-dark/home.html b/themes/modern-dark/home.html
new file mode 100644
index 0000000..2ff565a
--- /dev/null
+++ b/themes/modern-dark/home.html
@@ -0,0 +1,450 @@
+<!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=Cormorant:ital,wght@0,300;0,400;1,300;1,400&family=DM+Mono:wght@300;400&display=swap"
+ rel="stylesheet"
+ />
+ <style>
+ :root {
+ --bg: #0c0c0b;
+ --surface: #111110;
+ --border: #1e1e1c;
+ --border-2: #2a2a27;
+ --text: #e8e6e1;
+ --text-2: #8a8880;
+ --text-3: #3e3d3a;
+ --gold: #c9a96e;
+ --gold-dim: #7a6441;
+ --serif: "Cormorant", Georgia, serif;
+ --mono: "DM 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(--mono);
+ -webkit-font-smoothing: antialiased;
+ min-height: 100vh;
+ }
+
+ /* subtle grain overlay */
+ body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
+ pointer-events: none;
+ z-index: 9999;
+ opacity: 0.6;
+ }
+
+ /* ── Layout ── */
+ .page {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ }
+
+ /* ── Nav ── */
+ nav {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 2.4rem 0 0;
+ gap: 2rem;
+ }
+
+ nav a {
+ font-family: var(--mono);
+ font-size: 0.6rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--text-3);
+ text-decoration: none;
+ transition: color 180ms ease;
+ position: relative;
+ }
+
+ nav a::after {
+ content: "";
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 1px;
+ background: var(--gold);
+ transition: width 200ms var(--ease);
+ }
+
+ nav a:hover {
+ color: var(--gold);
+ }
+
+ nav a:hover::after {
+ width: 100%;
+ }
+
+ /* ── Hero ── */
+ .hero {
+ padding: 5.5rem 0 4.5rem;
+ border-bottom: 1px solid var(--border);
+ position: relative;
+ }
+
+ /* decorative vertical line */
+ .hero::before {
+ content: "";
+ position: absolute;
+ left: -2rem;
+ top: 5.5rem;
+ bottom: 4.5rem;
+ width: 1px;
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ var(--gold-dim),
+ transparent
+ );
+ opacity: 0.5;
+ }
+
+ .hero-name {
+ font-family: var(--serif);
+ font-size: clamp(3rem, 9vw, 5rem);
+ font-weight: 300;
+ line-height: 1;
+ letter-spacing: 0.01em;
+ margin: 0 0 1.4rem;
+ color: var(--text);
+ animation: fadeUp 0.9s var(--ease) both;
+ }
+
+ .hero-name em {
+ font-style: italic;
+ color: var(--gold);
+ font-weight: 300;
+ }
+
+ .hero-role {
+ font-family: var(--mono);
+ font-size: 0.6rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--text-3);
+ margin: 0 0 1.8rem;
+ animation: fadeUp 0.9s 0.1s var(--ease) both;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ }
+
+ .hero-role::before {
+ content: "";
+ display: inline-block;
+ width: 20px;
+ height: 1px;
+ background: var(--gold-dim);
+ }
+
+ .hero-bio {
+ font-size: 0.8rem;
+ line-height: 1.9;
+ color: var(--text-2);
+ margin: 0;
+ max-width: 380px;
+ animation: fadeUp 0.9s 0.18s var(--ease) both;
+ font-weight: 300;
+ letter-spacing: 0.02em;
+ }
+
+ /* ── Writing section ── */
+ .writing-header {
+ display: flex;
+ align-items: center;
+ gap: 1.2rem;
+ padding: 3rem 0 1.8rem;
+ }
+
+ .writing-label {
+ font-family: var(--mono);
+ font-size: 0.58rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--gold-dim);
+ 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-item {
+ display: flex;
+ align-items: baseline;
+ gap: 1.8rem;
+ padding: 1.2rem 0;
+ text-decoration: none;
+ color: inherit;
+ border-bottom: 1px solid var(--border);
+ transition: border-color 200ms ease;
+ animation: fadeUp 0.6s var(--ease) both;
+ position: relative;
+ }
+
+ .post-item::before {
+ content: "";
+ position: absolute;
+ left: -2rem;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background: var(--gold);
+ transform: scaleY(0);
+ transition: transform 240ms var(--ease);
+ transform-origin: top;
+ }
+
+ .post-item:hover::before {
+ transform: scaleY(1);
+ }
+
+ .post-item:hover .post-title {
+ color: var(--gold);
+ }
+
+ .post-item:hover .post-date {
+ color: var(--text-2);
+ }
+
+ .post-date {
+ font-family: var(--mono);
+ font-size: 0.57rem;
+ letter-spacing: 0.08em;
+ color: var(--text-3);
+ white-space: nowrap;
+ flex-shrink: 0;
+ padding-top: 0.15em;
+ min-width: 5.5rem;
+ transition: color 200ms ease;
+ }
+
+ .post-right {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .post-title {
+ font-family: var(--serif);
+ font-size: 1.1rem;
+ font-weight: 300;
+ color: var(--text);
+ line-height: 1.4;
+ display: block;
+ letter-spacing: 0.01em;
+ transition: color 200ms ease;
+ }
+
+ .post-tags {
+ display: flex;
+ gap: 0.3rem;
+ margin-top: 0.45rem;
+ flex-wrap: wrap;
+ }
+
+ .pill {
+ display: inline-block;
+ font-family: var(--mono);
+ font-size: 0.54rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ padding: 0.18rem 0.5rem;
+ background: transparent;
+ border: 1px solid var(--border-2);
+ border-radius: 2px;
+ color: var(--text-3);
+ }
+
+ /* ── Empty state ── */
+ .empty {
+ font-family: var(--mono);
+ font-size: 0.65rem;
+ color: var(--text-3);
+ letter-spacing: 0.1em;
+ padding: 3rem 0;
+ }
+
+ /* ── Footer ── */
+ footer {
+ padding: 2.5rem 0 3.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.8rem;
+ font-family: var(--mono);
+ font-size: 0.58rem;
+ letter-spacing: 0.08em;
+ color: var(--text-3);
+ }
+
+ footer a {
+ color: inherit;
+ text-decoration: none;
+ border-bottom: 1px solid var(--border-2);
+ padding-bottom: 1px;
+ transition:
+ color 150ms ease,
+ border-color 150ms ease;
+ }
+
+ footer a:hover {
+ color: var(--gold);
+ border-color: var(--gold-dim);
+ }
+
+ /* ── Animations ── */
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .post-item:nth-child(1) {
+ animation-delay: 0.22s;
+ }
+ .post-item:nth-child(2) {
+ animation-delay: 0.3s;
+ }
+ .post-item:nth-child(3) {
+ animation-delay: 0.38s;
+ }
+ .post-item:nth-child(4) {
+ animation-delay: 0.46s;
+ }
+ .post-item:nth-child(5) {
+ animation-delay: 0.54s;
+ }
+ .post-item:nth-child(6) {
+ animation-delay: 0.62s;
+ }
+
+ /* ── Mobile ── */
+ @media (max-width: 500px) {
+ .page {
+ padding: 0 1.4rem;
+ }
+ .hero {
+ padding: 3.5rem 0 3rem;
+ }
+ .hero::before {
+ left: -1.4rem;
+ }
+ .post-item {
+ flex-direction: column;
+ gap: 0.25rem;
+ }
+ .post-item::before {
+ left: -1.4rem;
+ }
+ .post-date {
+ min-width: unset;
+ }
+ footer {
+ flex-direction: column;
+ }
+ }
+
+ :focus-visible {
+ outline: 1px solid var(--gold);
+ outline-offset: 3px;
+ border-radius: 1px;
+ }
+ </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>
generated by cgit v1.3.1 (git 2.54.0) at 2026-05-22 11:58:13 +0000