From 2bc5c00830e0f812b80e900ad31325782fed05ff Mon Sep 17 00:00:00 2001 From: metacryst Date: Wed, 19 Nov 2025 15:57:27 -0600 Subject: [PATCH] Adding events and better why sectino --- ui/_/code/quill.js | 9 ++++++- ui/_/code/shared.css | 6 ++++- ui/public/components/JoinForm.js | 6 ----- ui/public/pages/Events.js | 44 +++++++++++++++++++++++++++++++- ui/public/pages/Join.js | 17 +++++++++++- ui/public/pages/SIgnIn.js | 6 ----- ui/public/pages/Why.js | 17 ++++++++++-- ui/site/components/AppWindow.js | 7 ++--- 8 files changed, 91 insertions(+), 21 deletions(-) diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js index 6232ebd..675699b 100644 --- a/ui/_/code/quill.js +++ b/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; }; diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css index ee8d878..0e55dcb 100644 --- a/ui/_/code/shared.css +++ b/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); } diff --git a/ui/public/components/JoinForm.js b/ui/public/components/JoinForm.js index 7e30516..37da21f 100644 --- a/ui/public/components/JoinForm.js +++ b/ui/public/components/JoinForm.js @@ -1,9 +1,3 @@ -css(` - joinform- input::placeholder { - color: var(--accent) - } -`) - class JoinForm extends Shadow { inputStyles(el) { diff --git a/ui/public/pages/Events.js b/ui/public/pages/Events.js index 97d2f58..d5cfe0a 100644 --- a/ui/public/pages/Events.js +++ b/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.
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.
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) } } diff --git a/ui/public/pages/Join.js b/ui/public/pages/Join.js index 41abbc1..a3f8c65 100644 --- a/ui/public/pages/Join.js +++ b/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() } diff --git a/ui/public/pages/SIgnIn.js b/ui/public/pages/SIgnIn.js index b7eaf13..cf93d85 100644 --- a/ui/public/pages/SIgnIn.js +++ b/ui/public/pages/SIgnIn.js @@ -1,9 +1,3 @@ -css(` - signin- input::placeholder { - color: var(--accent) - } -`) - class SignIn extends Shadow { inputStyles(el) { diff --git a/ui/public/pages/Why.js b/ui/public/pages/Why.js index 9540886..cd6aaef 100644 --- a/ui/public/pages/Why.js +++ b/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. + +

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. + +

And the reality is that actually, that world, with no culture and no morals, is the default one today. + +

That is the world the we are all expected to live in, as adults. + +

Classical Christian schools are great, but what if I want to live a Classical Christian life? + +

That is what Hyperia is for. It is a Classical Christian space for adults. + +

-- Sam Russell, Founder + `) + .x(50, vw).y(55, vh) .center() } } diff --git a/ui/site/components/AppWindow.js b/ui/site/components/AppWindow.js index ca8f6a7..3e49c83 100644 --- a/ui/site/components/AppWindow.js +++ b/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) {