diff options
Diffstat (limited to 'themes/tufte/layout.html')
| -rw-r--r-- | themes/tufte/layout.html | 275 |
1 files changed, 275 insertions, 0 deletions
diff --git a/themes/tufte/layout.html b/themes/tufte/layout.html new file mode 100644 index 0000000..d5bb93f --- /dev/null +++ b/themes/tufte/layout.html @@ -0,0 +1,275 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="description" content="{{ .Title }}" /> + <title>{{ .Title }}</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" + /> + <link + href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-okaidia.css" + rel="stylesheet" + /> + <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script> + <script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js"></script> + <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; + } + + h1, h2, h3 { + text-align: left; + font-weight: 700; + line-height: 1.25; + scroll-margin-top: 1rem; + } + + h1 { + font-size: 2.4rem; + margin-bottom: 1rem; + } + + h2 { + font-size: 1.6rem; + margin-top: 3rem; + } + + h3 { + font-size: 1.3rem; + margin-top: 2rem; + } + + p { + margin: 1.3rem 0; + } + + a { + color: #0066cc; + text-decoration: underline; + } + + a:hover { + color: #004499; + } + + ul, ol { + margin: 1.2rem 0 1.2rem 1.6rem; + } + + li { + margin: 0.4rem 0; + } + + hr { + border: none; + border-top: 1px solid #ddd; + margin: 3rem auto; + } + + table { + border-collapse: collapse; + margin: 1.5rem 0; + font-size: 0.95rem; + } + + th, td { + padding: 0.5rem 0.8rem; + border-bottom: 1px solid #ddd; + } + + th { + text-align: left; + font-weight: 700; + } + + code { + font-family: "SF Mono", Menlo, Monaco, monospace; + font-size: 0.85rem; + background: #f5f5f5; + padding: 0.15rem 0.3rem; + border-radius: 2px; + } + + pre { + background: #f5f5f5; + padding: 1rem 1.2rem; + overflow-x: auto; + border-radius: 4px; + margin: 1.5rem 0; + } + + pre code { + background: none; + padding: 0; + font-size: 0.85rem; + } + + blockquote { + margin: 2rem 0; + padding: 0 0 0 1.5rem; + border-left: 2px solid #ddd; + font-style: italic; + color: #555; + } + + img { + max-width: 100%; + height: auto; + margin: 2rem auto; + } + + .toc-wrap { + margin: 2rem 0; + padding: 1rem; + background: #f8f8f0; + border-radius: 4px; + } + + .toc-title { + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #555; + margin: 0 0 0.5rem; + display: block; + } + + .toc ul { + margin: 0; + padding-left: 1rem; + } + + .toc a { + color: #333; + text-decoration: none; + font-size: 0.95rem; + } + + .toc a:hover { + color: #0066cc; + } + + 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; + } + + 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; + } + h1 { + font-size: 2rem; + } + h2 { + font-size: 1.4rem; + } + 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> + <header class="article-header"> + <h1>{{ .Title }}</h1> + </header> + + {{ if .TOC }} + <div class="toc-wrap"> + <details open> + <summary class="toc-title">Contents</summary> + <ul> + {{ range .TOC }} + <li> + <a href="#{{ .ID }}">{{ .Text }}</a> + </li> + {{ end }} + </ul> + </details> + </div> + {{ end }} + + <article class="prose">{{ .Content }}</article> + </main> + + <footer> + <span>© {{ .Year }} Kite</span> + </footer> + </body> +</html>
\ No newline at end of file |