diff options
| author | Himanshu Sardana <himanshusardana2005@gmail.com> | 2026-03-26 21:50:46 +0000 |
|---|---|---|
| committer | Himanshu Sardana <himanshusardana2005@gmail.com> | 2026-03-26 21:50:46 +0000 |
| commit | c36783b52c29782a3acbaa602f6bd76496d62266 (patch) | |
| tree | ad6000a3f2ba27049b647d9078aa3fdab0e23486 /themes/tufte/home.html | |
| parent | a2d1b515905e4702b97062f5e2932db90095dbab (diff) | |
feat: add tufte theme
Diffstat (limited to 'themes/tufte/home.html')
| -rw-r--r-- | themes/tufte/home.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/themes/tufte/home.html b/themes/tufte/home.html new file mode 100644 index 0000000..f7092f4 --- /dev/null +++ b/themes/tufte/home.html @@ -0,0 +1,242 @@ +<!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=Libre+Baskerville:wght@400;700&display=swap" + rel="stylesheet" + /> + <style> + body { + margin: 0; + padding: 3rem 2rem; + background: #fffff8; + color: #111; + font-family: Georgia, "Libre Baskerville", serif; + line-height: 1.75; + font-size: 19px; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + body > * { + max-width: 720px; + margin-left: auto; + margin-right: auto; + } + + a { + color: #0066cc; + text-decoration: underline; + } + + a:hover { + color: #004499; + } + + nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0 2rem; + border-bottom: 1px solid #ddd; + margin-bottom: 2rem; + } + + nav .logo { + font-family: Georgia, serif; + font-weight: 700; + font-size: 1.2rem; + color: #111; + text-decoration: none; + } + + nav ul { + display: flex; + gap: 1.5rem; + margin: 0; + padding: 0; + list-style: none; + } + + nav a { + color: #555; + text-decoration: none; + font-size: 0.9rem; + } + + nav a:hover { + color: #0066cc; + } + + .hero { + padding: 2rem 0 3rem; + } + + .hero h1 { + font-size: 2.8rem; + font-weight: 700; + margin-bottom: 0.75rem; + line-height: 1.2; + } + + .author-block { + margin-bottom: 1.5rem; + } + + .author-name { + font-weight: 700; + color: #111; + } + + .author-role { + font-size: 0.9rem; + color: #555; + } + + .author-bio { + color: #333; + line-height: 1.7; + } + + .section-title { + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #777; + padding-bottom: 0.75rem; + border-bottom: 1px solid #ddd; + margin-bottom: 1.5rem; + } + + .post-list { + list-style: none; + padding: 0; + margin: 0; + } + + .post-item { + display: block; + text-decoration: none; + padding: 1rem 0; + border-bottom: 1px solid #eee; + } + + .post-item:last-child { + border-bottom: none; + } + + .post-item:hover .post-title { + color: #0066cc; + } + + .post-title { + font-size: 1.15rem; + font-weight: 700; + color: #111; + line-height: 1.4; + margin-bottom: 0.25rem; + transition: color 150ms ease; + } + + .post-meta { + font-size: 0.85rem; + color: #666; + } + + .post-tags { + display: flex; + gap: 0.5rem; + margin-top: 0.5rem; + } + + .tag { + font-size: 0.75rem; + color: #555; + padding: 0.1rem 0.4rem; + border: 1px solid #ddd; + border-radius: 2px; + } + + footer { + margin-top: 4rem; + padding-top: 1.5rem; + border-top: 1px solid #ddd; + font-size: 0.85rem; + color: #555; + display: flex; + justify-content: space-between; + align-items: center; + } + + @media (max-width: 700px) { + body { + padding: 1.5rem 1rem; + font-size: 17px; + } + .hero h1 { + font-size: 2.2rem; + } + nav { + flex-wrap: wrap; + gap: 0.8rem; + } + footer { + flex-direction: column; + text-align: center; + gap: 0.5rem; + } + } + </style> + </head> + <body> + <nav> + <a href="/" class="logo">Kite</a> + <ul> + <li><a href="/">Home</a></li> + </ul> + </nav> + + <main> + <section class="hero"> + <h1>{{ .SiteTitle }}</h1> + <div class="author-block"> + <span class="author-name">{{ .AuthorName }}</span> + <span class="author-role">{{ .AuthorRole }}</span> + </div> + <p class="author-bio">{{ .AuthorBio }}</p> + </section> + + <section class="posts"> + <h2 class="section-title">Latest Posts</h2> + <ul class="post-list"> + {{ range .Posts }} + <li> + <a href="/{{ .Slug }}/" class="post-item"> + <span class="post-title">{{ .Title }}</span> + <div class="post-meta"> + <time>{{ .Date }}</time> + </div> + {{ if .Tags }} + <div class="post-tags"> + {{ range .Tags }} + <span class="tag">{{ . }}</span> + {{ end }} + </div> + {{ end }} + </a> + </li> + {{ end }} + </ul> + </section> + </main> + + <footer> + <span>© {{ .Year }} {{ .AuthorName }}</span> + </footer> + </body> +</html>
\ No newline at end of file |