summaryrefslogtreecommitdiff
path: root/themes/modern-dark/layout.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/layout.html
parentc9828dfeb6379301691b0990dc7b426a145aae61 (diff)
feat: add new theme structure
Diffstat (limited to 'themes/modern-dark/layout.html')
-rw-r--r--themes/modern-dark/layout.html523
1 files changed, 523 insertions, 0 deletions
diff --git a/themes/modern-dark/layout.html b/themes/modern-dark/layout.html
new file mode 100644
index 0000000..c3f351c
--- /dev/null
+++ b/themes/modern-dark/layout.html
@@ -0,0 +1,523 @@
+<!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=Cormorant:ital,wght@0,300;0,400;1,300;1,400&family=DM+Mono:wght@300;400&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>
+ :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;
+ }
+
+ /* 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;
+ }
+
+ /* ── Article layout ── */
+ .article {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 5rem 2rem 6rem;
+ animation: fadeUp 0.8s var(--ease) both;
+ }
+
+ @keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(14px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* ── Article heading ── */
+ .article > h1 {
+ font-family: var(--serif);
+ font-size: clamp(2.2rem, 7vw, 3.4rem);
+ font-weight: 300;
+ line-height: 1.1;
+ letter-spacing: 0.01em;
+ color: var(--text);
+ margin: 0 0 3.5rem;
+ padding-bottom: 2.5rem;
+ border-bottom: 1px solid var(--border);
+ position: relative;
+ }
+
+ .article > h1::after {
+ content: "";
+ position: absolute;
+ bottom: -1px;
+ left: 0;
+ width: 40px;
+ height: 1px;
+ background: var(--gold);
+ }
+
+ /* ── Body prose ── */
+ .article p {
+ font-family: var(--serif);
+ font-size: 1.05rem;
+ font-weight: 300;
+ line-height: 1.85;
+ color: var(--text-2);
+ margin: 0 0 1.6rem;
+ letter-spacing: 0.01em;
+ }
+
+ .article h2 {
+ font-family: var(--serif);
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: var(--text);
+ letter-spacing: 0.01em;
+ margin: 3rem 0 1rem;
+ padding-bottom: 0.6rem;
+ border-bottom: 1px solid var(--border);
+ scroll-margin-top: 2rem;
+ }
+
+ .article h3 {
+ font-family: var(--mono);
+ font-size: 0.68rem;
+ font-weight: 400;
+ color: var(--gold);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ margin: 2.5rem 0 0.8rem;
+ scroll-margin-top: 2rem;
+ }
+
+ .article h4 {
+ font-family: var(--mono);
+ font-size: 0.62rem;
+ color: var(--text-2);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ margin: 1.8rem 0 0.6rem;
+ scroll-margin-top: 2rem;
+ }
+
+ .article a {
+ color: var(--gold);
+ text-decoration: none;
+ border-bottom: 1px solid var(--gold-dim);
+ padding-bottom: 1px;
+ transition:
+ border-color 150ms ease,
+ opacity 150ms ease;
+ }
+
+ .article a:hover {
+ opacity: 0.75;
+ border-color: var(--gold);
+ }
+
+ .article strong {
+ color: var(--text);
+ font-weight: 400;
+ }
+
+ .article em {
+ font-style: italic;
+ color: var(--text);
+ }
+
+ .article blockquote {
+ margin: 2rem 0;
+ padding: 1.2rem 0 1.2rem 1.6rem;
+ border-left: 1px solid var(--gold-dim);
+ color: var(--text-2);
+ font-family: var(--serif);
+ font-style: italic;
+ font-size: 1.05rem;
+ }
+
+ .article blockquote p {
+ margin: 0;
+ }
+
+ .article code {
+ font-family: var(--mono);
+ font-size: 0.78rem;
+ color: var(--gold);
+ background: var(--surface);
+ border: 1px solid var(--border-2);
+ padding: 0.1em 0.38em;
+ border-radius: 2px;
+ }
+
+ .article pre {
+ background: var(--surface) !important;
+ border: 1px solid var(--border) !important;
+ border-radius: 3px;
+ padding: 1.4rem 1.6rem !important;
+ overflow-x: auto;
+ margin: 1.6rem 0 2rem;
+ }
+
+ .article pre code {
+ background: none;
+ border: none;
+ padding: 0;
+ color: inherit;
+ font-size: 0.78rem;
+ letter-spacing: 0.02em;
+ }
+
+ .article hr {
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 3rem 0;
+ position: relative;
+ }
+
+ .article hr::after {
+ content: "◆";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 0.4rem;
+ color: var(--gold-dim);
+ background: var(--bg);
+ padding: 0 0.6rem;
+ }
+
+ .article ul,
+ .article ol {
+ padding-left: 1.6rem;
+ margin: 0 0 1.6rem;
+ }
+
+ .article li {
+ font-family: var(--serif);
+ font-size: 1.05rem;
+ font-weight: 300;
+ line-height: 1.8;
+ color: var(--text-2);
+ padding-left: 0.3rem;
+ margin-bottom: 0.3rem;
+ }
+
+ .article li::marker {
+ color: var(--gold-dim);
+ font-size: 0.7em;
+ }
+
+ /* ── TOC ── */
+ .toc {
+ position: static !important;
+ width: auto !important;
+ right: auto !important;
+ top: auto !important;
+ background: var(--surface) !important;
+ border: 1px solid var(--border) !important;
+ border-left: 2px solid var(--gold-dim) !important;
+ padding: 1.2rem 1.6rem !important;
+ margin: 0 0 3.5rem !important;
+ border-radius: 2px;
+ }
+
+ .toc-title {
+ margin: 0 0 0.9rem !important;
+ font-size: 0.55rem !important;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--gold-dim) !important;
+ line-height: 1 !important;
+ display: block;
+ font-family: var(--mono);
+ }
+
+ .toc ul {
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ .toc li {
+ display: block;
+ padding-left: 0 !important;
+ margin: 0.22rem 0 !important;
+ list-style: none;
+ }
+
+ .toc li::before {
+ display: none !important;
+ }
+
+ .toc a {
+ font-family: var(--mono);
+ font-size: 0.68rem;
+ letter-spacing: 0.04em;
+ color: var(--text-3) !important;
+ text-decoration: none !important;
+ border: none !important;
+ padding: 0 !important;
+ transition: color 150ms ease;
+ }
+
+ .toc a:hover {
+ color: var(--text-2) !important;
+ }
+
+ .toc a.active {
+ color: var(--gold) !important;
+ font-weight: 400;
+ }
+
+ .toc-toggle {
+ display: flex;
+ align-items: center;
+ gap: 0.6rem;
+ cursor: pointer;
+ background: none;
+ border: none;
+ padding: 0;
+ font-family: var(--mono);
+ font-size: 0.58rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--text-3);
+ margin-bottom: 0.9rem;
+ width: 100%;
+ text-align: left;
+ transition: color 150ms ease;
+ }
+
+ .toc-toggle:hover {
+ color: var(--text-2);
+ }
+
+ .toc-toggle svg {
+ transition: transform 160ms ease;
+ flex-shrink: 0;
+ }
+
+ .toc-toggle[aria-expanded="false"] svg {
+ transform: rotate(-90deg);
+ }
+
+ .toc-body {
+ overflow: hidden;
+ transition:
+ max-height 260ms ease,
+ opacity 220ms ease;
+ max-height: 800px;
+ opacity: 1;
+ }
+
+ .toc-body.collapsed {
+ max-height: 0;
+ opacity: 0;
+ }
+
+ @media (max-width: 699px) {
+ .toc-title {
+ display: none;
+ }
+ .toc-toggle {
+ display: flex;
+ }
+ }
+
+ @media (min-width: 700px) {
+ .toc-toggle {
+ display: none;
+ }
+ .toc-title {
+ display: block;
+ }
+ .toc-body {
+ max-height: none !important;
+ opacity: 1 !important;
+ }
+ }
+
+ @media (min-width: 1100px) {
+ .toc {
+ position: fixed !important;
+ top: 5.5rem !important;
+ left: max(2rem, calc((100vw - 600px) / 2 - 220px)) !important;
+ width: 190px !important;
+ background: transparent !important;
+ border: none !important;
+ border-left: 1px solid var(--border) !important;
+ padding: 0 0 0 1.2rem !important;
+ margin: 0 !important;
+ }
+
+ .toc-toggle {
+ display: none;
+ }
+ .toc-title {
+ display: block;
+ }
+ .toc-body {
+ max-height: none !important;
+ opacity: 1 !important;
+ }
+
+ .toc-level-2 {
+ margin-left: 0.7rem !important;
+ }
+ .toc-level-3 {
+ margin-left: 1.3rem !important;
+ }
+ .toc-level-4 {
+ margin-left: 1.9rem !important;
+ }
+ }
+
+ /* ── Mobile ── */
+ @media (max-width: 500px) {
+ .article {
+ padding: 3rem 1.4rem 4rem;
+ }
+ }
+
+ :focus-visible {
+ outline: 1px solid var(--gold);
+ outline-offset: 3px;
+ border-radius: 1px;
+ }
+ </style>
+ </head>
+ <body>
+ <main class="article">
+ <nav class="toc" aria-label="Table of contents">
+ <button
+ class="toc-toggle"
+ aria-expanded="false"
+ aria-controls="toc-body"
+ >
+ <svg
+ width="10"
+ height="10"
+ viewBox="0 0 10 10"
+ fill="none"
+ aria-hidden="true"
+ >
+ <path
+ d="M2 3.5L5 6.5L8 3.5"
+ stroke="currentColor"
+ stroke-width="1.4"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ Contents
+ </button>
+
+ <span class="toc-title">Contents</span>
+
+ <div class="toc-body collapsed" id="toc-body">
+ <ul>
+ {{ range .TOC }}
+ <li class="toc-level-{{ .Level }}">
+ <a href="#{{ .ID }}">{{ .Text }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </div>
+ </nav>
+
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </main>
+
+ <script>
+ const toggle = document.querySelector(".toc-toggle");
+ const body = document.getElementById("toc-body");
+
+ if (toggle && body) {
+ toggle.addEventListener("click", () => {
+ const expanded = toggle.getAttribute("aria-expanded") === "true";
+ toggle.setAttribute("aria-expanded", String(!expanded));
+ body.classList.toggle("collapsed", expanded);
+ });
+ }
+
+ const tocLinks = document.querySelectorAll(".toc a");
+
+ if (tocLinks.length > 0) {
+ const headingIDs = Array.from(tocLinks).map((a) =>
+ decodeURIComponent(a.getAttribute("href").slice(1)),
+ );
+ const headings = headingIDs
+ .map((id) => document.getElementById(id))
+ .filter(Boolean);
+
+ let current = null;
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) current = entry.target.id;
+ });
+ tocLinks.forEach((a) => {
+ const id = decodeURIComponent(a.getAttribute("href").slice(1));
+ a.classList.toggle("active", id === current);
+ });
+ },
+ { rootMargin: "0px 0px -70% 0px", threshold: 0 },
+ );
+
+ headings.forEach((h) => observer.observe(h));
+ }
+ </script>
+ </body>
+</html>
generated by cgit v1.3.1 (git 2.54.0) at 2026-05-22 11:56:36 +0000