diff options
Diffstat (limited to 'themes/terminal-gruvbox/home.html')
| -rw-r--r-- | themes/terminal-gruvbox/home.html | 309 |
1 files changed, 309 insertions, 0 deletions
diff --git a/themes/terminal-gruvbox/home.html b/themes/terminal-gruvbox/home.html new file mode 100644 index 0000000..e69d226 --- /dev/null +++ b/themes/terminal-gruvbox/home.html @@ -0,0 +1,309 @@ +<!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=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Fira+Code:wght@300;400;500;600;700&display=swap" + rel="stylesheet" + /> + <style> + :root { + --gb-bg-hard: #1d2021; + --gb-bg: #282828; + --gb-bg-1: #3c3836; + --gb-bg-2: #504945; + --gb-bg-3: #665c54; + --gb-fg: #ebdbb2; + --gb-fg-1: #d5c4a1; + --gb-fg-2: #bdae93; + --gb-fg-3: #a89984; + --gb-green: #b8bb26; + --gb-yellow: #fabd2f; + --gb-blue: #83a598; + --gb-orange: #fe8019; + --border: var(--gb-bg-2); + --text: var(--gb-fg); + --text-dim: var(--gb-fg-2); + --mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; + --radius: 2px; + --max-w: 740px; + } + + *, + *::before, + *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + html { + scroll-behavior: smooth; + } + + body { + margin: 0; + padding: 3rem 2rem 6rem; + background-color: var(--gb-bg-hard); + background-image: repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 0, 0, 0.08) 2px, + rgba(0, 0, 0, 0.08) 4px + ); + color: var(--gb-fg); + font-family: var(--mono); + line-height: 1.6; + font-size: 15px; + -webkit-font-smoothing: antialiased; + } + + body > * { + max-width: var(--max-w); + margin-left: auto; + margin-right: auto; + } + + a { + color: var(--gb-blue); + text-decoration: none; + border-bottom: 1px solid var(--gb-bg-2); + } + + a:hover { + color: var(--gb-green); + } + + nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0 2.5rem; + border-bottom: 1px solid var(--gb-bg-2); + margin-bottom: 3rem; + } + + nav .logo { + font-family: var(--mono); + font-weight: 600; + font-size: 1rem; + color: var(--gb-fg); + border: none; + } + + nav .logo span { + color: var(--gb-green); + } + + nav ul { + display: flex; + gap: 1.5rem; + margin: 0; + padding: 0; + list-style: none; + } + + nav ul li::before { + display: none; + } + + nav a { + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--gb-fg-3); + border: none; + } + + nav a:hover { + color: var(--gb-yellow); + } + + .hero { + padding: 2.5rem 0 3.5rem; + } + + .hero h1 { + font-family: var(--mono); + font-size: clamp(2rem, 5vw, 2.8rem); + font-weight: 600; + margin-bottom: 1rem; + color: var(--gb-fg); + } + + .author-block { + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-bottom: 1.5rem; + } + + .author-name { + font-family: var(--mono); + font-size: 0.9rem; + color: var(--gb-fg); + } + + .author-meta { + font-size: 0.7rem; + letter-spacing: 0.06em; + color: var(--gb-fg-3); + } + + .author-bio { + font-size: 0.9rem; + color: var(--gb-fg-1); + line-height: 1.6; + max-width: 50ch; + } + + .section-title { + font-family: var(--mono); + font-size: 0.6rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--gb-fg-3); + padding-bottom: 0.8rem; + border-bottom: 1px solid var(--gb-bg-2); + 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 var(--gb-bg-2); + transition: background 120ms ease; + } + + .post-item:last-child { + border-bottom: none; + } + + .post-item:hover { + background: var(--gb-bg); + } + + .post-item:hover .post-title { + color: var(--gb-green); + } + + .post-title { + font-family: var(--mono); + font-size: 0.95rem; + font-weight: 500; + color: var(--gb-fg); + line-height: 1.4; + margin-bottom: 0.25rem; + transition: color 120ms ease; + border: none; + } + + .post-meta { + font-size: 0.7rem; + letter-spacing: 0.04em; + color: var(--gb-fg-3); + } + + .post-tags { + display: flex; + gap: 0.3rem; + margin-top: 0.4rem; + } + + .tag { + font-size: 0.6rem; + letter-spacing: 0.06em; + padding: 0.1rem 0.4rem; + border: 1px solid var(--gb-bg-2); + border-radius: 2px; + color: var(--gb-fg-3); + } + + footer { + margin-top: 4rem; + padding-top: 1.5rem; + border-top: 1px solid var(--gb-bg-2); + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.04em; + color: var(--gb-fg-3); + display: flex; + justify-content: space-between; + align-items: center; + } + + @media (max-width: 700px) { + body { + padding: 2rem 1rem 4rem; + font-size: 14px; + } + nav { + flex-wrap: wrap; + gap: 0.8rem; + } + footer { + flex-direction: column; + text-align: center; + } + } + </style> + </head> + <body> + <nav> + <a href="/" class="logo">Kite<span>$</span></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-meta">{{ .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 |