Terra Cotta Home Page, Quill Updates

ui/_/code/shared.css

@@ -3,6 +3,7 @@
     --accent: var(--darkbrown);
 
     --tan: #FFDFB4;
+    --gold: #F2B36F;
     --purple: #251D44;
     --green: #0B5538;
     --red: #BC1C02;
@@ -17,7 +18,7 @@
 @media (prefers-color-scheme: dark) {
 :root {
     --main: #251D44;
-    --accent: #AF7323;
+    --accent: var(--gold);
     --accent2: var(--periwinkle);
 }
 }
@@ -30,21 +31,21 @@
 }
 
 @font-face {
-    font-family: 'BonaNova';
+    font-family: 'Bona Nova';
     src: url('/_/fonts/BonaNova/BonaNova-Regular.woff') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'BonaNova';
+    font-family: 'Bona Nova';
     src: url('/_/fonts/BonaNova/BonaNova-Bold.woff') format('truetype');
     font-weight: bold;
     font-style: normal;
 }
 
 body {
-    font-family: 'BonaNova', sans-serif;
+    font-family: 'Bona Nova', sans-serif;
     font-size: 16px;
     background-color: var(--main);
     color: var(--accent);

ui/public/components/Home.js

@@ -0,0 +1,25 @@
+import "./NavBar.js"
+
+class Home extends Shadow {
+    render() {
+        img("_/images/knight.png", "29vw")
+            .position("absolute")
+            .left(50, vw).top(50, vh)
+            .center()
+
+        p("H   Y   P   E   R   I   A")
+            .x(50, vw).y(50, vh)
+            .center()
+            .color("var(--gold)")
+            .fontSize(5, vw)
+
+        NavBar()
+
+        p("A CLASSICAL CHRISTIAN ASSOCIATION")
+            .x(50, vw).y(94, vh)
+            .center()
+            .letterSpacing(0.3, em)
+    }
+}
+
+register(Home)

ui/public/components/NavBar.js

@@ -1,150 +1,44 @@
-css(`
+class NavBar extends Shadow {
-    nav-bar {
+    render() {
-        position: fixed;
+        HStack(() => {
-        top: 0px;
+            p("WHY?")
-        left: 0px;
+            p("EVENTS")
-        width: 100vw;
+            p("JOIN")
-        z-index: 1;
+            p("SIGN IN")
-        height: 100px;
+        })
-    }
+        .x(50, vw).y(4, em)
-    
+        .center()
-    .title-div {
+        .fontSize(0.85, em)
-        position: absolute;
+        .justifyContent("center")
-        left: 2em;
+        .gap(3, em)
-        top: 2em;
+        .paddingRight(2, em)
-        display: flex;
+        .onNavigate(() => {
-        align-items: center;
+            console.log("hi")
-    }
+        })
-    
+        .onAppear(() => {
-    .links-div {
+            Array.from(this.$("p")).forEach((el) => {
-        position: absolute;
+                el.addEventListener("mousedown", (e) => {
-        right: 3em; 
+                    el.classList.add("touched")
-        top: 2.75em; 
+                })
-        display: flex;
+            })
-    }
+            window.addEventListener("mouseup", (e) => {
-    
+                let target = e.target
-    .logo-p {
+                if(!target.matches("app-menu p")) {
-        font-size: 2em; 
+                    return
-        margin: 0 0 0 15px;
+                }
-        letter-spacing: 1px;
-        text-align: center;
-    }
-    
-    .nav-hamburger {
-        margin-right: 8vw;
-        display: none;
-        max-height:40px;
-    }
-    
-    .nav-link {
-        font-size: 1em; 
-        margin: 0 0 0 15px;
-        letter-spacing: 1px;
-     }
-    
-    @media only screen and (max-width: 820px) {
-        nav-bar a {
-            text-decoration: none;
-            color: var(--green);
-        }
-        
-        .title-div {
-            position: static
-        }
-        
-        .logo {
-            width: 10vw;
-        }
-        
-        .logo-p {
-            font-size: 8vw; 
-            margin: 0 0 0 1vw;
-        }
-        
-        .nav-hamburger {
-            display: block;
-        }
-        
-        .links-div {
-            display:none;
-        }
-        
-        .outer-nav {
-            position: fixed;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 20vw;
-            background: var(--tan);
-            display: flex;
-            z-index: 1;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 3vw;
-            max-height:80px;
-        }
-    }
-`)
 
-export default class NavBar extends HTMLElement {
+                target.classList.remove("touched")
-    connectedCallback() {
-        this.innerHTML += /* html */ `
-            <div class="outer-nav">
-                <div style="display: flex; align-items: center;">
-                    <a draggable="false" href="/" id="homeLink" style="display: flex; align-items: center; text-decoration: none; color: var(--green);">
-                        <div class="title-div">
-                            <img class="logo" width="40" height="40" src="_/icons/logo.svg"/>
-                            <p class="logo-p">Hyperia</p>
-                        </div>
-                    </a>
-                   
-                </div>
-                
-    
-            <div class="links-div">
-                <a draggable="false" href="/about" class="nav-link">About</a>
-                <a draggable="false" href="/join" class="nav-link">Join</a>
-                <a draggable="false" href="/login" class="nav-link">Login</a>
-            </div>
-                
-                <!-- Right side: hamburger -->
-                <img class="nav-hamburger" src="_/icons/hamburger.svg">
-            </div>
-        </div>
-        `;
 
-        // Track which anchor was pressed down
+                if(target.classList.contains("selected")) {
-        let activeLink = null;
+                    this.selected = ""
-
+                    window.navigateTo("/")
-        // Get all anchor tags inside this element
+                } else {
-        const anchors = this.querySelectorAll('a');
+                    this.selected = target.innerText
-
+                    window.navigateTo("/app/" + target.innerText.toLowerCase())
-        anchors.forEach(anchor => {
+                }
-            anchor.addEventListener('mousedown', (e) => {
+            })
-                activeLink = anchor;
+        })
-            });
-        });
-
-        // Listen globally for mouseup, to detect release anywhere
-        document.addEventListener('mouseup', (e) => {
-            if (activeLink) {
-                // Navigate to the href of the activeLink
-                window.location.href = activeLink.href;
-                activeLink = null;
-            }
-        });
-
-        const hamburger = this.querySelectorAll("img")[1]
-        const sidebar = document.querySelector("side-bar");
-
-        hamburger.addEventListener("click", () => {
-            if (sidebar.style.right === "0vw") {
-                sidebar.style.right = "-100vw";
-            } else {
-                sidebar.style.right = "0vw";
-            }
-        });
     }
 }
 
-customElements.define("nav-bar", NavBar)
+register(NavBar)

ui/public/index.html

@@ -9,32 +9,12 @@
 
       body {
         font-size: 16px;
+        background-image: url("_/images/fabric.png");
+        background-size: 33vw auto; /* width height of each tile */
       }
-
-      .main-image {
-        content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%);
-        user-select: none;
-      }
-      @media (max-width: 600px) {
-      .main-image {
-        max-width: 90vw; bottom: -7vh;
-      }}
-      @media (prefers-color-scheme: dark) {
-      .main-image {
-        content:url("_/images/castle-dark3.svg"); 
-        height: 1000px; bottom: -34vmin; left: 26vw;
-      }}
-      @media (prefers-color-scheme: dark) and (max-width: 600px) {
-      .main-image {
-        max-width: 195vw; height: 80vh; left: 0vw;
-      }}
     </style>
     <script src="_/code/quill.js"></script>
-    <script type="module">
+    <script type="module" src="index.js"></script>
-        import PageFooter from "./components/Footer.js"
-        import NavBar from "./components/NavBar.js"
-        import SideBar from "./components/SideBar.js"
-    </script>
     <script>
       window.addEventListener('load', () => {
           if (window.location.search) {
@@ -45,75 +25,5 @@
     </script>
   </head>
   <body>
-    <span id="title" class="link" onclick='window.location.href="/"' style="user-select: none;">hyperia
-    </span>
-    <img class="main-image">
-    <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
-      <!-- <a href="about">about</a>
-      <span>|</span>
-      <a href="services">services</a>
-      <span>|</span>
-      <a href="events">events</a>
-      <span>|</span> -->
-      <a href="join">join</a>
-      <span>|</span>
-      <a href="signin">sign in</a>
-    </div>
-
-  <div style="position: absolute; top: 110vh; left: 52vw; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;">
-
-    <!-- INTRO SECTION -->
-    <div style="display: flex; flex-direction: column; max-width: 50vw; align-items: center">
-      <h1 style="font-family: Canterbury; font-size: 3.5rem; ">A Classical Christian Society</h1>
-
-      <div style="font-size: 1.3em; margin-top: 1em; max-width: 42vw; text-align: justify">
-      <p>Hyperia is a private club, focused on promoting the Classical Christian movement in America.</p>
-      <p>Inspired by Classical Christian schools, Hyperia is a similar space for adults.</p>
-      </div>
-
-      <div style="height: 3vh;"></div>
-    </div>
-
-    <!-- GOALS SECTION -->
-    <div style="display: flex; flex-direction: column; align-items: flex-start; width: 55vw; margin-top: 2vh;">
-
-
-      <div style="height: 10vh;"></div>
-    </div>
-
-  </div>
-
-
-
-
-    <style>
-      .link, a {
-        transition: background-color 0.3s ease, scale 0.3s;
-        padding: 5px 10px; /* optional padding for visual clarity */
-        border-radius: 4px; /* optional */
-      }
-
-      .link.touched, a.touched {
-        background-color: orange;
-        color: black;
-        scale: 1.3;
-      }
-    </style>
-    <script>
-      document.querySelectorAll('.link, a').forEach(link => {
-        link.addEventListener('touchstart', () => {
-          link.classList.add('touched');
-        });
-
-        link.addEventListener('touchend', () => {
-          link.classList.remove('touched');
-        });
-
-        // Optional: also handle touchcancel in case the user moves their finger away
-        link.addEventListener('touchcancel', () => {
-          link.classList.remove('touched');
-        });
-      });
-    </script>
   </body>
 </html>

ui/public/index.js

@@ -0,0 +1,2 @@
+import "./components/Home.js"
+Home()