Styling

ui/_/code/quill.js

@@ -1,7 +1,7 @@
 /*
     Sam Russell
     Captured Sun
-    11.23.25 - Added onSubmit() event for form submission
+    11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
     11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
     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
@@ -279,11 +279,13 @@ function extendHTMLElementWithStyleSetters() {
             case "bottom":
             case "right":
 
+            case "padding":
             case "paddingLeft":
             case "paddingTop":
             case "paddingBottom":
             case "paddingRight":
 
+            case "margin":
             case "marginLeft":
             case "marginTop":
             case "marginBottom":
@@ -336,73 +338,40 @@ extendHTMLElementWithStyleSetters();
 
 HTMLElement.prototype.styles = function(cb) {
     cb.call(this, this)
+    return this
 }
 
-HTMLElement.prototype.padding = function(one, two, three = "px") {
+HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    this.style.paddingTop = value + unit
+    this.style.paddingBottom = value + unit
+    return this
+}
 
-    const setPadding = (side, val) => {
+HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
-        const directionName = `padding${side.charAt(0).toUpperCase()}${side.slice(1)}`;
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-        this.style[directionName] = (typeof val === 'number') ? `${val}${three}` : val;
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
-    };
+    this.style.paddingRight = value + unit
+    this.style.paddingLeft = value + unit
+    return this
+}
 
-    if(one === "horizontal" || one === "vertical") { // is one a direction
+HTMLElement.prototype.marginVertical = function(value, unit = "px") {
-        if (one === "horizontal") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            setPadding("left", two);
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
-            setPadding("right", two);
+    this.style.marginTop = value + unit
-        } else if (one === "vertical") {
+    this.style.marginBottom = value + unit
-            setPadding("top", two);
+    return this
-            setPadding("bottom", two);
+}
-        }
-    } else { // is two a value
-        if(typeof one !== 'number' || isNaN(one)) {
-            this.style.padding = one
-        } else {
-            this.style.padding = one + two
-        }
-    }
-    
-    return this;
-};
 
-    HTMLElement.prototype.paddingVertical = function(value, unit = "px") {
+HTMLElement.prototype.marginHorizontal = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingTop = value + unit
+    this.style.marginRight = value + unit
-        this.style.paddingBottom = value + unit
+    this.style.marginLeft = value + unit
-        return this
+    return this
-    }
+}
-
-    HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") {
-        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
-            throw new Error(`Invalid value: ${value}. Expected a number.`);
-        this.style.paddingRight = value + unit
-        this.style.paddingLeft = value + unit
-        return this
-    }
-
-HTMLElement.prototype.margin = function(direction, value, unit = "px") {
-    if (!value) {
-        this.style.margin = direction;
-        return this;
-    }
-
-    const setMargin = (side, val) => {
-        const directionName = `margin${side.charAt(0).toUpperCase()}${side.slice(1)}`;
-        this.style[directionName] = (typeof val === 'number') ? `${val}${unit}` : val;
-    };
-
-    if (direction === "horizontal") {
-        setMargin("left", value);
-        setMargin("right", value);
-    } else if (direction === "vertical") {
-        setMargin("top", value);
-        setMargin("bottom", value);
-    } else {
-        setMargin(direction, value);
-    }
-
-    return this;
-};
 
 HTMLElement.prototype.fontSize = function(value, unit = "px") {
     if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))

ui/public/pages/Home.js

@@ -26,20 +26,24 @@ class Home extends Shadow {
                 case "/":
                     img("/_/images/knight.png", "29vmax")
                         .position("absolute")
-                        .left(50, vw).top(50, vh)
+                        .left(50, vw).top(isMobile() ? 50 : 53, vh)
                         .center()
             
-                    p("H   Y   P   E   R   I   A")
+                    p("H   Y   P   E   R   I   A  ")
-                        .x(50, vw).y(50, vh)
+                        .x(50, vw).y(isMobile() ? 50 : 53, vh)
+                        .textAlign("center")
                         .center()
                         .color("var(--gold)")
-                        .fontSize(5, vw)
+                        .fontSize(isMobile() ? 6 : 5, vw)
+                        .maxWidth(isMobile() ? 0.8 : 100, em)
             
-                    p("A CLASSICAL CHRISTIAN ASSOCIATION")
+                    let text = "A Classical Christian Association"
-                        .x(50, vw).yBottom(3, vh)
+                    p(isMobile() ? text : text.toUpperCase())
+                        .x(50, vw).yBottom(isMobile() ? 1 : 3, vh)
                         .center()
                         .letterSpacing(0.3, em)
-                        .width(100, vw)
+                        .width(isMobile() ? 80 : 100, vw)
+                        .fontSize(isMobile() ? 0.8 : 1, em)
                         .textAlign("center")
                     break;
                 case "/why":

ui/public/pages/SIgnIn.js

@@ -17,11 +17,14 @@ class SignIn extends Shadow {
             form(() => {
                 input("Email")
                     .attr({name: "email", type: "email"})
+                    .margin(1, em)
                     .styles(this.inputStyles)
                 input("Password")
                     .attr({name: "password", type: "password"})
+                    .margin(1, em)
                     .styles(this.inputStyles)
                 button("Submit")
+                    .margin(1, em)
             })
             .attr({action: "/login", method: "POST"})
             .x(50, vw).y(50, vh)

ui/public/pages/Why.js

@@ -12,8 +12,9 @@ class Why extends Shadow {
 
             <br><br> -- Sam Russell, Founder
         `)
-        .x(50, vw).y(55, vh)
+        .marginTop(window.isMobile() ? 20 : 30, vh)
-        .center()
+        .marginHorizontal(window.isMobile() ? 10 : 20, vw)
+        .marginBottom(20, vh)
     }
 }
 

ui/site/apps/Jobs/Jobs.js

@@ -33,13 +33,6 @@ class Jobs extends Shadow {
             company: "Hyperia",
             city: "Austin",
             state: "TX"
-        },
-        {
-            title: "San Marcos Chapter Lead",
-            salary: "1% of Local Revenue",
-            company: "Hyperia",
-            city: "San Marcos",
-            state: "TX"
         }
     ]