sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling

Browse Source
This commit is contained in:
metacryst
2025-11-24 01:29:20 -06:00
parent 6299e80268
commit fd08d13bee
5 changed files with 49 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
ui/_/code/quill.js
View File

@@ -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,34 +338,9 @@ extendHTMLElementWithStyleSetters();
HTMLElement.prototype.styles = function(cb) {
cb.call(this, this)
return this
}
HTMLElement.prototype.padding = function(one, two, three = "px") {
const setPadding = (side, val) => {
const directionName = `padding${side.charAt(0).toUpperCase()}${side.slice(1)}`;
this.style[directionName] = (typeof val === 'number') ? `${val}${three}` : val;
};
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.paddingVertical = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
@@ -380,30 +357,22 @@ HTMLElement.prototype.padding = function(one, two, three = "px") {
return this
}
HTMLElement.prototype.margin = function(direction, value, unit = "px") {
if (!value) {
this.style.margin = direction;
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
}
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);
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
}
return this;
};
HTMLElement.prototype.fontSize = function(value, unit = "px") {
if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);

18
ui/public/pages/Home.js
View File

@@ -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":

3
ui/public/pages/SIgnIn.js
View File

@@ -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)

5
ui/public/pages/Why.js
View File

@@ -12,8 +12,9 @@ class Why extends Shadow {
<br><br> -- 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)
}
}

7
ui/site/apps/Jobs/Jobs.js
View File

@@ -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"
}
]