Adding events and better why sectino

ui/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    11.19.25 - Allowing for "auto" values in otherwise numeric styles, adding vmin and vmax units
     11.17.25.3 - Adding styles() and fixing dynamic function from earlier
     11.17.25.2 - Fixing onNavigate() and onAppear()
     11.17.25 - Added dynamic function to have units in style func parameters.
@@ -218,6 +219,8 @@ HTMLElement.prototype.rerender = function() {
 
 /* Styling */
 
+window.vmin = "vmin"
+window.vmax = "vmax"
 window.vh = "vh"
 window.vw = "vw"
 window.px = "px"
@@ -304,9 +307,13 @@ function extendHTMLElementWithStyleSetters() {
         switch (type) {
             case "unit-number":
                 HTMLElement.prototype[prop] = function(value, unit = "px") {
-                    if (typeof value !== "number" || isNaN(value)) {
+                    if ((typeof value !== "number" || isNaN(value)) && value !== "auto") {
                         throw new Error(`Invalid value for ${prop}: ${value}. Expected a number.`);
                     }
+                    if(value === "auto") {
+                        this.style[prop] = value
+                        return this
+                    }
                     this.style[prop] = value + unit;
                     return this;
                 };

ui/_/code/shared.css

@@ -8,7 +8,7 @@
     --green: #0857265c;
     --red: #BC1C02;
     --brown: #812A18;
-    --darkbrown: #60320c;
+    --darkbrown: #3f0808;
     --orange: #FE9201;
     --periwinkle: #655BAF;
 
@@ -98,6 +98,10 @@ input {
     border-radius: 0.3em;
 }
 
+input::placeholder {
+    color: var(--accent)
+}
+
 input:focus {
     outline: 1px solid var(--red);
 }

ui/public/components/JoinForm.js

@@ -1,9 +1,3 @@
-css(`
-    joinform- input::placeholder {
-        color: var(--accent)
-    }
-`)
-
 class JoinForm extends Shadow {
 
     inputStyles(el) {

ui/public/pages/Events.js

@@ -1,6 +1,48 @@
 class Events extends Shadow {
-    render() {
 
+    events = [
+        {
+            date: `January 2, 2025`,
+            title: `Hyperia Winter Ball`,
+            description: `Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`,
+            location: `Austin, TX`
+        }
+    ]
+
+    render() {
+        VStack(() => {
+
+            (window.isMobile() ? VStack : HStack)(() => {
+    
+                VStack(() => {
+                    p(`January 2, 2025`)
+    
+                    p(`Hyperia Winter Ball`)
+                    .fontSize(1.2, em)
+    
+                    p(`Austin, TX`)
+
+                })
+
+                p(`Join us in Austin, Texas for a dance. Live music and drinks will be included. <br>Admission for men is $50, women are free. Open to the public.`)
+                    .marginTop(1, em)
+
+                button("Buy Ticket")
+                    .color("var(--darkbrown")
+                    .border("1px solid #ab2f007d")
+                    .background('var(--green)')
+                    .marginLeft("auto")
+            })
+            .gap(3, em)
+            .color("var(--darkbrown)")
+            .background(`var(--accent)`)
+            .padding(1, em)
+            .borderRadius(12, px)
+            .border("2px solid #ab2f007d")
+        })
+        .marginLeft(window.isMobile() ? 0 : 15, vmax)
+        .marginRight(window.isMobile() ? 0 : 15, vmax)
+        .marginTop(15, vmax)
     }
 }
 

ui/public/pages/Join.js

@@ -1,6 +1,21 @@
 class Join extends Shadow {
     render() {
-        p("Membership is invitation-only. Look out for us in person, or come to an event!")
+
+        VStack(() => {
+            p("Membership is invitation-only. But sign up for our newsletter to hear about more events!")
+
+            HStack(() => {
+                input("Email", "40vmin")
+                    .attr({name: "email", type: "email"})
+
+                button("Sign Up")
+                    .width(15, vmin)
+            })
+            .gap(1, em)
+            .marginTop(1, em)
+        })
+        .alignItems("center")
+        .maxWidth(90, vw)
         .x(50, vw).y(50, vh)
         .center()
     }

ui/public/pages/SIgnIn.js

@@ -1,9 +1,3 @@
-css(`
-    signin- input::placeholder {
-        color: var(--accent)
-    }
-`)
-
 class SignIn extends Shadow {
 
     inputStyles(el) {

ui/public/pages/Why.js

@@ -1,7 +1,20 @@
 class Why extends Shadow {
     render() {
-        p("The West is Falling. Why Not?")
-        .x(50, vw).y(50, vh)
+        p(`I grew up going to Classical Christian schools all my life. It was great - because we got to learn all about our history, and everyone had a shared understanding of what it looks like to lead a moral life. 
+
+            <br><br>Only when I went out into the world did I realize that most Americans have no idea what this is like. They have never been a part of a shared culture, and the only value they know is multiculturalism.
+
+            <br><br>And the reality is that actually, that world, with no culture and no morals, is the default one today.
+
+            <br><br>That is the world the we are all expected to live in, as adults.
+
+            <br><br>Classical Christian schools are great, but what if I want to live a Classical Christian life?
+
+            <br><br>That is what Hyperia is for. It is a Classical Christian space for adults.
+
+            <br><br> -- Sam Russell, Founder
+        `)
+        .x(50, vw).y(55, vh)
         .center()
     }
 }

ui/site/components/AppWindow.js

@@ -35,11 +35,12 @@ class AppWindow extends Shadow {
         .display(this.app ? '' : 'none')
         .width(100, "vw")
         .height(100, "vh")
-        .backgroundImage("/_/images/fabric.png")
-        .backgroundSize("33vw auto")
-        .position("fixed")
+        .background("var(--main)")
         .top(0)
         .left(0)
+        // .backgroundImage("/_/images/fabric.png")
+        // .backgroundSize("33vw auto")
+        // .position("fixed")
     }
 
     open(app) {