From c44e97cdbd4017649f09b58db2be710373cb6fb7 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Mon, 19 Sep 2022 16:18:17 +0200
Subject: [PATCH] Add basic TOC code

---
 package-lock.json             | Bin 227425 -> 227425 bytes
 package.json                  |   2 +-
 src/main/css/main.css         |   1 +
 src/main/css/snippets/toc.css |   3 ++
 src/test/index.html           |  52 ++++++++++++++++++++++++++++++++--
 5 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/main/css/snippets/toc.css

diff --git a/package-lock.json b/package-lock.json
index 217aabf2ac738a393a8f8d72045992c84eec9f9f..caaf786ea1904c77ba7c7bab04f58fdcef7a6f00 100644
GIT binary patch
delta 32
mcmaF(f%oAD-U(*R=6c2xEvJL1#>=gj8Cx$iZN1FgR}KK>Sq-rO

delta 33
pcmaF(f%oAD-U(*R7J3E~EvHXEq{1ZJ__*~kW9wt4t&f@O$^rjp4%Pqw

diff --git a/package.json b/package.json
index b0f8421..ca3d134 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "2.7.2",
+    "version": "2.7.3",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 0926e4a..6c42610 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -3,4 +3,5 @@
 @import "snippets/colors.css";
 @import "snippets/common.css";
 @import "snippets/nav.css";
+@import "snippets/toc.css";
 @import "snippets/overrides.css";
diff --git a/src/main/css/snippets/toc.css b/src/main/css/snippets/toc.css
new file mode 100644
index 0000000..afa2214
--- /dev/null
+++ b/src/main/css/snippets/toc.css
@@ -0,0 +1,3 @@
+#toc {
+    position: fixed;
+}
diff --git a/src/test/index.html b/src/test/index.html
index d904238..c889748 100644
--- a/src/test/index.html
+++ b/src/test/index.html
@@ -37,9 +37,55 @@
         <div id="header"></div>
 
         <section class="container">
-            <p>These are the page contents.</p>
-
-            <p>These are some more contents.</p>
+            <div class="row">
+                <div class="column column-75">
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                    <p>These are the page contents.</p>
+                    <p>These are some more contents.</p>
+                </div>
+                <div class="column column-25">
+                    <div id="toc">
+                        <p>These are a TOC</p>
+                    </div>
+                </div>
+            </div>
         </section>
     </div>
     <div id="footer"></div>