toc to the side

azuline · Jun 25, 2024 · f6b15f2 · f6b15f2
1 parent 7f5a1c9
commit f6b15f2
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 12 deletions.
diff --git a/flake.nix b/flake.nix
@@ -12,6 +12,7 @@
         pkgs = import nixpkgs { inherit system; };
         tex = pkgs.texlive.combine {
           inherit (pkgs.texlive) scheme-small
+            latexmk
             amsmath
             dirtree
             ellipsis

diff --git a/scripts/build.py b/scripts/build.py
@@ -111,7 +111,7 @@ def compile_favicons():
 
 
 def compile_index(posts: PostIndex, commit: str):
-    with Path("src/index.jinja").open("r") as fp:
+    with Path("src/index.html.jinja").open("r") as fp:
         tpl = je.from_string(fp.read())
 
     # Write the main index.html
@@ -129,7 +129,7 @@ def compile_index(posts: PostIndex, commit: str):
 
 def compile_posts(posts: PostIndex, commit: str):
     Path("dist/posts").mkdir()
-    with Path("src/posts/template.jinja").open("r") as fp:
+    with Path("src/posts/post.html.jinja").open("r") as fp:
         tpl = je.from_string(fp.read())
     for f in Path("src/posts/tex").iterdir():
         if not f.suffix == ".tex":

diff --git a/src/assets/css/global.css b/src/assets/css/global.css
@@ -151,7 +151,7 @@ html {
   --color-bg-base: #f6f5f4;
   --color-bg-nested: #f5f3ef;
   --color-fg-primary: #000000;
-  --color-fg-secondary: #605b53;
+  --color-fg-secondary: #464138;
   --color-border-primary: #c5b194;
   --color-border-secondary: #ece8e2;
 

diff --git a/src/assets/css/post.css b/src/assets/css/post.css
@@ -3,6 +3,14 @@
   content: ".";
 }
 
+.pandoc a[href^="#"] {
+  color: var(--color-fg-primary);
+}
+
+.column {
+  max-width: 36rem;
+}
+
 .pandoc #TOC {
   padding: 1rem;
   margin-bottom: 1.5rem;
@@ -24,6 +32,32 @@
   color: var(--color-fg-primary);
 }
 
+@media screen and (min-width: 1200px) {
+  .column {
+    max-width: 62rem;
+  }
+
+  .pandoc {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 4rem;
+  }
+  .pandoc #TOC {
+    flex: 0 0 20rem;
+    height: fit-content;
+    position: sticky;
+    top: 2rem;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+  }
+  .pandoc #TOC a {
+    color: var(--color-fg-secondary);
+  }
+  .pandoc #POST {
+    flex: 0 0 38rem;
+  }
+}
+
 .pandoc h1,
 .pandoc h2,
 .pandoc h3,
@@ -80,7 +114,3 @@
   font-size: var(--font-size-xs);
   color: var(--color-fg-secondary);
 }
-
-.pandoc a[href^="#"] {
-  color: var(--color-fg-primary);
-}
diff --git a/src/head.jinja → src/head.html.jinja b/src/head.jinja → src/head.html.jinja
diff --git a/src/index.jinja → src/index.html.jinja b/src/index.jinja → src/index.html.jinja
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    {% include "head.jinja" %}
+    {% include "head.html.jinja" %}
     <title>sunset glow</title>
     <link rel="stylesheet" type="text/css" href="/assets/css/index.css?v={{ commit }}" />
   </head>

diff --git a/src/posts/template.jinja → src/posts/post.html.jinja b/src/posts/template.jinja → src/posts/post.html.jinja
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    {% include "head.jinja" %}
+    {% include "head.html.jinja" %}
     <title>
       {% if meta.fascicle %}
         {{ meta.fascicle.index }}. {{ meta.fascicle.title }} |
@@ -11,8 +11,8 @@
     <link rel="stylesheet" type="text/css" href="/assets/css/post.css?v={{ commit }}" />
   </head>
   <body>
-    <div class="w-content mx-auto p-8">
-      <div class="max-w-36">
+    <div class="w-content mx-auto py-8 px-6">
+      <div class="column">
         <div class="text-sm label mono"><a class="decoration-none fg-primary" href="/">sunset glow</a></div>
         <div class="py-16" />
         <div class="flex flex-col gap-4">

diff --git a/src/posts/tex/common.sty b/src/posts/tex/common.sty
@@ -3,7 +3,7 @@
 
 \RequirePackage{enumitem}
 \RequirePackage{hyperref}
-\RequirePackage{lstlisting}
+\RequirePackage{listings}
 
 \newcommand{\ti}{\textit}
 \newcommand{\tb}{\textbf}