From 3fd42d469b9e5f2aba8eb75f8e05e18cd6190089 Mon Sep 17 00:00:00 2001
From: Lazy Hippopotamus <lazy@hippo.com>
Date: Tue, 6 Jun 2023 15:12:24 -0400
Subject: [PATCH] sidebar

---
 index.html | 171 +++++++++++++++++++++++++++++------------------------
 main.css   |  79 ++++++++++++++++++++++++-
 2 files changed, 171 insertions(+), 79 deletions(-)
diff --git a/index.html b/index.html
index c9d6264..78e20a9 100644
--- a/index.html
+++ b/index.html
@@ -8,88 +8,107 @@
         <link rel="stylesheet" href="main.css" />
     </head>
     <body>
-        <div id="header">
-            <div id="head-marker" class="scrolly"></div>
-            <div id="headin">
-                <h1>Jhewit</h1>
-                <div id="links">
-                    <div class="dropdown">
-                        Dropdown 1
-                    </div>
-                    <div>
-                        <div class="dropdown-inner">
-                            <a>
-                                LINK
-                            </a>
-                            <a>
-                                LINK
-                            </a>
-                            <a>
-                                LINK
-                            </a>
+        <div id="sider">
+            <h2>Sidebar</h2>
+            <div id="sider-cats">
+                <input type="checkbox" id="i_1" class="hidden" />
+                <label for="i_1">Category 1</label>
+                <div>
+                    <a href="#">This is a link</a><br>
+                    <a href="#">Another link</a>
+                </div><br>
+                <input type="checkbox" id="i_2" class="hidden" />
+                <label for="i_2">Category 2</label>
+                <div>
+                    <a href="#">Third link, new category</a><br>
+                    <a href="#">Links.</a>
+                </div>
+            </div>
+        </div>
+        <div id="outer">
+            <div id="header">
+                <div id="head-marker" class="scrolly"></div>
+                <div id="headin">
+                    <h1>Jhewit</h1>
+                    <div id="links">
+                        <div class="dropdown">
+                            Dropdown 1
                         </div>
-                    </div>
-                    <div class="dropdown">
-                        Dropdown 2
-                    </div>
-                    <div>
-                        <div class="dropdown-inner">
-                            <a>
-                                LINK
-                            </a>
-                            <a>
-                                LINK
-                            </a>
-                            <a>
-                                LINK
-                            </a>
+                        <div>
+                            <div class="dropdown-inner">
+                                <a href="#">
+                                    LINK
+                                </a>
+                                <a href="#">
+                                    LINK
+                                </a>
+                                <a href="#">
+                                    LINK
+                                </a>
+                            </div>
                         </div>
-                    </div>
-                    <div class="dropdown">
-                        Dropdown 3
-                    </div>
-                    <div>
-                        <div class="dropdown-inner">
-                            <a>
-                                LINK
-                            </a>
-                            <a>
-                                LINK
-                            </a>
-                            <a>
-                                LINK
-                            </a>
+                        <div class="dropdown">
+                            Dropdown 2
+                        </div>
+                        <div>
+                            <div class="dropdown-inner">
+                                <a href="#">
+                                    LINK
+                                </a>
+                                <a href="#">
+                                    LINK
+                                </a>
+                                <a href="#">
+                                    LINK
+                                </a>
+                            </div>
+                        </div>
+                        <div class="dropdown">
+                            Dropdown 3
+                        </div>
+                        <div>
+                            <div class="dropdown-inner">
+                                <a href="#">
+                                    LINK
+                                </a>
+                                <a href="#">
+                                    LINK
+                                </a>
+                                <a href="#">
+                                    LINK
+                                </a>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div id="content">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias? Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
-            nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
-            Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus.
+            <div id="content">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias? Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quis deleniti, numquam, voluptatibus eos perspiciatis a
+                nulla temporibus laborum saepe perferendis esse cumque consectetur molestias rerum amet. Impedit, minima quisquam!
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque quis eveniet ipsa perferendis possimus molestias?
+                Perferendis suscipit, at error, reiciendis quis, velit dicta assumenda earum labore magni architecto officiis delectus.
+            </div>
         </div>
         <script src="main.js"></script>
     </body>
diff --git a/main.css b/main.css
index efd6450..1f63b3a 100644
--- a/main.css
+++ b/main.css
@@ -1,3 +1,7 @@
+:root {
+    --sidebar-size: clamp(300px, 20%, 400px);
+}
+
 @font-face {
     font-family: "Cantarell var";
     font-weight: 100 900;
@@ -64,10 +68,9 @@ h1 {
 }
 
 #headin {
-    padding-top: 5%;
-    padding-bottom: 5%;
+    padding-top: 2%;
+    padding-bottom: 2%;
     transition: background-color 0.3s, color 0.3s;
-    width: 100%;
 }
 
 #head-marker.scrolly-out + #headin {
@@ -76,8 +79,78 @@ h1 {
     left: 0px;
     background-color: darkred;
     color: lightgreen;
+    margin-left: var(--sidebar-size);
+    width: calc(100vw - var(--sidebar-size));
 }
 
 #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
     background-color: black;
+}
+
+body {
+    display: grid;
+    grid-template-columns: var(--sidebar-size) auto;
+}
+
+#outer {
+    position: relative;
+    height: 100vh;
+    overflow-y: scroll;
+}
+
+#sider {
+    box-sizing: border-box;
+    padding: 20px;
+    background-color: pink;
+}
+
+.hidden {
+    display: none;
+}
+
+#sider-cats {
+    border-left: 2px solid white;
+    padding-left: 10px;
+}
+
+#sider-cats > div {
+    display: none;
+    border-left: 2px solid red;
+    padding-left: 10px;
+}
+
+#sider-cats > input:checked + label {
+    border-right: 2px solid red;
+    border-bottom: 2px solid red;
+}
+
+#sider-cats > label {
+    color: green;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    display: inline-block;
+}
+
+#sider-cats > label:hover {
+    color: darkgreen;
+    cursor: pointer;
+}
+
+#sider-cats > input:checked + label + div {
+    display: block;
+}
+
+#sider > h2 {
+    border-right: 2px solid white;
+    border-bottom: 2px solid white;
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+    color: green;
+}
+
+a:hover {
+    color: darkgreen;
 }
\ No newline at end of file
