Spaces:
Running
Running
| --- | |
| const { title = "Cache Atlas" } = Astro.props; | |
| const path = Astro.url.pathname; | |
| --- | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> | |
| <link rel="icon" href="/favicon.ico" /> | |
| <meta name="generator" content={Astro.generator} /> | |
| <title>{title}</title> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div class="header-inner"> | |
| <a class="brand" href="/">Cache Atlas</a> | |
| <nav> | |
| <a class:list={{ active: path === "/" }} href="/">Home</a> | |
| <a class:list={{ active: path.startsWith("/notes") }} href="/notes">Notes</a> | |
| <a href="https://github.com/rishabhsai/minicache-pytorch" target="_blank" rel="noreferrer">Code</a> | |
| <a href="https://huggingface.co/spaces/rishabhsai/cache-atlas" target="_blank" rel="noreferrer">Space</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <slot /> | |
| </body> | |
| </html> | |
| <style> | |
| :root { | |
| color-scheme: dark; | |
| font-family: "IBM Plex Mono", "SF Mono", Menlo, monospace; | |
| --bg: #000; | |
| --ink: #e7edf4; | |
| --muted: #9aa6b2; | |
| --line: rgba(231, 237, 244, 0.14); | |
| --card: rgba(11, 14, 18, 0.92); | |
| --accent: #79d2ff; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| width: 100%; | |
| min-height: 100%; | |
| background: var(--bg); | |
| color: var(--ink); | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| body { | |
| font-size: 16px; | |
| } | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| border-bottom: 1px solid var(--line); | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(14px); | |
| } | |
| .header-inner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| width: min(1040px, calc(100% - 32px)); | |
| margin: 0 auto; | |
| padding: 18px 0; | |
| } | |
| .brand { | |
| font-weight: 600; | |
| letter-spacing: 0; | |
| } | |
| nav { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| } | |
| nav a { | |
| color: var(--muted); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| } | |
| nav a.active, | |
| nav a:hover { | |
| color: var(--ink); | |
| } | |
| :global(main.page) { | |
| width: min(980px, calc(100% - 32px)); | |
| margin: 0 auto; | |
| padding: 48px 0 44px; | |
| } | |
| :global(main.article-shell) { | |
| width: min(900px, calc(100% - 32px)); | |
| margin: 0 auto; | |
| padding: 38px 0 42px; | |
| } | |
| :global(.eyebrow), | |
| :global(.label) { | |
| color: var(--muted); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| } | |
| :global(h1) { | |
| margin: 12px 0 20px; | |
| font-size: clamp(40px, 7vw, 82px); | |
| line-height: 0.96; | |
| font-weight: 600; | |
| } | |
| :global(.article-shell h1) { | |
| max-width: 860px; | |
| font-size: clamp(34px, 5vw, 62px); | |
| } | |
| :global(h2) { | |
| margin: 40px 0 14px; | |
| font-size: clamp(24px, 3vw, 38px); | |
| line-height: 1.02; | |
| } | |
| :global(p), | |
| :global(li) { | |
| color: var(--muted); | |
| line-height: 1.8; | |
| } | |
| :global(.lede) { | |
| max-width: 820px; | |
| font-size: 19px; | |
| color: var(--ink); | |
| } | |
| :global(blockquote) { | |
| margin: 22px 0; | |
| padding: 14px 18px; | |
| border-left: 2px solid var(--accent); | |
| background: rgba(11, 14, 18, 0.92); | |
| } | |
| :global(code) { | |
| font-family: inherit; | |
| } | |
| :global(pre) { | |
| overflow-x: auto; | |
| padding: 16px; | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| } | |
| :global(.note-card) { | |
| margin: 22px 0; | |
| padding: 18px; | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| } | |
| :global(.meta-grid) { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin: 20px 0 26px; | |
| } | |
| :global(.meta-cell) { | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| } | |
| :global(.meta-cell strong) { | |
| display: block; | |
| margin-bottom: 6px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| } | |
| :global(.source-list), | |
| :global(.bullet-list) { | |
| padding-left: 18px; | |
| } | |
| :global(.source-list a), | |
| :global(.inline-link) { | |
| color: var(--accent); | |
| } | |
| :global(.category-list) { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin: 14px 0 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| :global(.category-list li) { | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| } | |
| :global(.category-list strong) { | |
| display: block; | |
| margin-bottom: 4px; | |
| color: var(--ink); | |
| } | |
| :global(.article-nav) { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| margin-top: 34px; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--line); | |
| } | |
| :global(.article-nav a) { | |
| display: block; | |
| min-height: 86px; | |
| padding: 14px; | |
| border: 1px solid var(--line); | |
| background: var(--card); | |
| } | |
| :global(.article-nav span) { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| } | |
| :global(.article-nav strong) { | |
| color: var(--ink); | |
| line-height: 1.35; | |
| } | |
| :global(.video-figure) { | |
| margin: 24px 0; | |
| } | |
| :global(.video-figure video) { | |
| display: block; | |
| width: 100%; | |
| border: 1px solid var(--line); | |
| background: #050607; | |
| } | |
| :global(.video-figure figcaption) { | |
| margin-top: 10px; | |
| color: var(--muted); | |
| } | |
| @media (max-width: 860px) { | |
| :global(.meta-grid) { | |
| grid-template-columns: 1fr; | |
| } | |
| :global(.category-list), | |
| :global(.article-nav) { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |