From d539e73f9ae5f0e5efcd0153b4453d8a4882f27c Mon Sep 17 00:00:00 2001
From: Lazy Hippopotamus <lazy@hippo.com>
Date: Sat, 10 Jun 2023 14:58:25 -0400
Subject: [PATCH] fancies

---
 index.html        | 57 +++++++++++++++--------------------------
 main.css          | 65 ++++++++++++++++++++++++++++++++++++++++++++---
 main.js           | 45 +++++++++++++++++++++++++++++---
 src/template.html | 57 +++++++++++++++--------------------------
 4 files changed, 145 insertions(+), 79 deletions(-)
diff --git a/index.html b/index.html
index 5785c7d..372face 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,8 @@
         <title>Jhewit | Home</title>
         <link rel="stylesheet" href="main.css" />
     </head>
-    <body><!--
-        <div id="sider">
+    <body>
+        <!--<div id="sider">
             <h2>Sidebar</h2>
             <div id="sider-cats">
                 <input type="checkbox" id="i_1" class="hidden" />
@@ -27,12 +27,12 @@
         </div>-->
         <div id="outer">
             <div id="header">
-                <div id="head-marker" class="scrolly"></div>
+                <div id="head-marker" class=""></div>
                 <div id="headin">
-                    <h1>Jhewit</h1>
+                    <h1>Jhewit</h1><!--
                     <div id="links">
                         <div class="dropdown">
-                            Dropdown 1
+                            INFORMATION
                         </div>
                         <div>
                             <div class="dropdown-inner">
@@ -47,37 +47,22 @@
                                 </a>
                             </div>
                         </div>
-                        <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 id="carousel-outer">
+                        <div id="carousel-inner">
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #1</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
                         </div>
                     </div>
                 </div>
diff --git a/main.css b/main.css
index d2a18ff..f1b1000 100644
--- a/main.css
+++ b/main.css
@@ -40,6 +40,7 @@ h1 {
     background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
     background-attachment: fixed;
     background-size: cover;
+    position: relative;
     /*clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 30% 100%, 0% 90%);*/
 }
 
@@ -59,6 +60,12 @@ h1 {
     box-sizing: border-box;
 }
 
+body {
+    /*display: grid;
+    grid-template-columns: var(--sidebar-size) auto;
+    grid-template-columns: var(--sidebar-size) auto;*/
+}
+
 .dropdown {
     background-color: aliceblue;
     padding: 10px;
@@ -91,6 +98,7 @@ h1 {
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
 }
 
 h1 {
@@ -106,13 +114,14 @@ h1 {
     transition: background-color 0.3s, color 0.3s;
     top: 0px;
     left: 0px;
-    color: lightgreen;
-    /*margin-left: var(--sidebar-size);*/
-    width: calc(100vw); /*- var(--sidebar-size)*/
+    color: red;
+    /*margin-left: var(--sidebar-size);
+    width: calc(100vw - var(--sidebar-size));*/
+    width: 100vw;
 }
 
 #head-marker.scrolly-out + #headin > #links > * > *, #head-marker.scrolly-out + #headin > #links > * {
-    background-color: black;
+    /*background-color: black;*/
 }
 
 #outer {
@@ -177,4 +186,52 @@ a:hover {
     #headin {
         flex-direction: column;
     }
+}
+
+#carousel-inner > div {
+    width: max(15vw, 15vh);
+    height: max(15vw, 15vh);
+    background-size: cover;
+    background-position: center;
+    padding: max(2vw, 2vh);
+    box-sizing: border-box;
+    border-radius: 30px;
+    display: inline-block;
+    margin-left: 2%;
+    margin-right: 2%;
+}
+
+#carousel-outer {
+    --do-scroll: yes;
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: rgba(255, 125, 125, 0.8);
+}
+
+#carousel-outer:hover {
+    --do-scroll: no;
+}
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ #carousel-inner::-webkit-scrollbar {
+     display: none;
+ }
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ #carousel-inner {
+     -ms-overflow-style: none;
+     /* IE and Edge */
+     scrollbar-width: none;
+     /* Firefox */
+ }
+
+#carousel-inner {
+    white-space: nowrap;
+    overflow-x: scroll;
+}
+
+h1 {
+    margin: 0 !important;
+    padding: 0 !important;
 }
\ No newline at end of file
diff --git a/main.js b/main.js
index bb325af..3279922 100644
--- a/main.js
+++ b/main.js
@@ -39,8 +39,9 @@ const scrollchecks = () => {
         }
     });
     var perc = clamp(0, document.getElementById("outer").scrollTop / (window.innerHeight / 2), 1);
-    document.querySelector("#headin > h1").style.fontSize = 2 + 4 * (1 - perc) + "em";
-    document.querySelector("#links").style.opacity = perc;
+    document.querySelector("#headin > h1").style.fontSize = 0 + 6 * (1 - perc) + "em";
+    //document.querySelector("#links").style.opacity = perc;
+    //document.querySelector("#carousel").style.opacity = perc;
 };
 window.addEventListener("scroll", scrollchecks);
 window.addEventListener("scrollend", scrollchecks);
@@ -48,4 +49,42 @@ window.addEventListener("wheel", scrollchecks);
 window.addEventListener("resize", scrollchecks);
 window.addEventListener("load", scrollchecks);
 window.addEventListener("touchmove", scrollchecks);
-setInterval(scrollchecks, 250); // Computers are fast and scrolling in JavaScript is dumb. Shoot me.
\ No newline at end of file
+setInterval(scrollchecks, 250); // Computers are fast and scrolling in JavaScript is dumb. Shoot me.
+
+function main() {
+    requestAnimationFrame(main);
+    var el = document.getElementById("carousel-inner");
+    if (getComputedStyle(el).getPropertyValue("--do-scroll") == "yes") {
+        el.scrollBy({
+            left: 10,
+            top: 0,
+            behavior: "smooth"
+        });
+    }
+    if (el.scrollLeft > el.scrollWidth - window.innerWidth - (el.children[0].getBoundingClientRect().width * 3)) {
+        var hammer = el.children[0];
+        el.removeChild(hammer);
+        let smol = el.scrollWidth;
+        el.appendChild(hammer);
+        hammer = el.lastChild;
+        el.scrollBy({
+            left: smol - el.scrollWidth,
+            top: 0,
+            behavior: "auto"
+        });
+    }
+    if (el.scrollLeft < el.children[0].getBoundingClientRect().width * 3) {
+        var hammer = el.lastChild;
+        el.removeChild(hammer);
+        let smol = el.scrollWidth;
+        el.insertBefore(hammer, el.firstChild);
+        hammer = el.firstChild;
+        el.scrollBy({
+            left: el.scrollWidth - smol,
+            top: 0,
+            behavior: "auto"
+        });
+    }
+}
+
+main();
\ No newline at end of file
diff --git a/src/template.html b/src/template.html
index b292d79..1f846ba 100644
--- a/src/template.html
+++ b/src/template.html
@@ -7,8 +7,8 @@
         <title>Jhewit | Home</title>
         <link rel="stylesheet" href="main.css" />
     </head>
-    <body><!--
-        <div id="sider">
+    <body>
+        <!--<div id="sider">
             <h2>Sidebar</h2>
             <div id="sider-cats">
                 <input type="checkbox" id="i_1" class="hidden" />
@@ -27,12 +27,12 @@
         </div>-->
         <div id="outer">
             <div id="header">
-                <div id="head-marker" class="scrolly"></div>
+                <div id="head-marker" class=""></div>
                 <div id="headin">
-                    <h1>Jhewit</h1>
+                    <h1>Jhewit</h1><!--
                     <div id="links">
                         <div class="dropdown">
-                            Dropdown 1
+                            INFORMATION
                         </div>
                         <div>
                             <div class="dropdown-inner">
@@ -47,37 +47,22 @@
                                 </a>
                             </div>
                         </div>
-                        <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 id="carousel-outer">
+                        <div id="carousel-inner">
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #1</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
+                            <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
                         </div>
                     </div>
                 </div>
