diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js
index 2cfdcf3..618ec01 100644
--- a/ui/_/code/quill.js
+++ b/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) => {
- const directionName = `padding${side.charAt(0).toUpperCase()}${side.slice(1)}`;
- this.style[directionName] = (typeof val === 'number') ? `${val}${three}` : val;
- };
+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
+}
- if(one === "horizontal" || one === "vertical") { // is one a direction
- if (one === "horizontal") {
- setPadding("left", two);
- setPadding("right", two);
- } else if (one === "vertical") {
- setPadding("top", two);
- 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.marginVertical = function(value, unit = "px") {
+ if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+ throw new Error(`Invalid value: ${value}. Expected a number.`);
+ this.style.marginTop = value + unit
+ this.style.marginBottom = value + unit
+ return this
+}
- 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
- }
-
- 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.marginHorizontal = function(value, unit = "px") {
+ if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+ throw new Error(`Invalid value: ${value}. Expected a number.`);
+ this.style.marginRight = value + unit
+ this.style.marginLeft = value + unit
+ return this
+}
HTMLElement.prototype.fontSize = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js
index bdff080..5cbc89e 100644
--- a/ui/public/pages/Home.js
+++ b/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")
- .x(50, vw).y(50, vh)
+ p("H Y P E R I A ")
+ .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")
- .x(50, vw).yBottom(3, vh)
+ let text = "A Classical Christian Association"
+ 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":
diff --git a/ui/public/pages/SIgnIn.js b/ui/public/pages/SIgnIn.js
index b936589..ec93dad 100644
--- a/ui/public/pages/SIgnIn.js
+++ b/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)
diff --git a/ui/public/pages/Why.js b/ui/public/pages/Why.js
index f758bfb..f65b12a 100644
--- a/ui/public/pages/Why.js
+++ b/ui/public/pages/Why.js
@@ -12,8 +12,9 @@ class Why extends Shadow {
-- Sam Russell, Founder
`)
- .x(50, vw).y(55, vh)
- .center()
+ .marginTop(window.isMobile() ? 20 : 30, vh)
+ .marginHorizontal(window.isMobile() ? 10 : 20, vw)
+ .marginBottom(20, vh)
}
}
diff --git a/ui/site/apps/Jobs/Jobs.js b/ui/site/apps/Jobs/Jobs.js
index bc058da..12bd8de 100644
--- a/ui/site/apps/Jobs/Jobs.js
+++ b/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"
}
]