better styling

This commit is contained in:
metacryst
2026-03-16 23:55:56 -05:00
parent 8452841460
commit 5903bafee5
9 changed files with 52 additions and 75 deletions

View File

@@ -43,7 +43,7 @@ class Login extends Shadow {
.margin(1, em).padding(1, em)
.fontSize(0.9, rem)
.borderRadius(12, px)
.background("var(--accent)")
.background("var(--darkaccent)")
.color("var(--text)")
.border("1px solid var(--accent)")
})
@@ -72,7 +72,7 @@ class Login extends Shadow {
}
})
})
.background("var(--main)")
.background("rgb(69, 20, 13)")
.width(100, vw)
.height(100, pct)
.margin(0)

View File

@@ -43,7 +43,11 @@
--accent: #3D2622;
--darkaccent: #240609;
--text: #FADFB6;
--divider: #523636;
--darktext: #62473E;
--headertext: #a2907d;
--darkred: #6b2c1d;
--home-src: /_/icons/homelight.svg;
--home-selected-src: /_/icons/homelightselected.svg;

View File

@@ -1,37 +1,16 @@
import "../../components/TopBar.js"
class Announcements extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
.onTouch(function (start) {
if(start) {
this.style.scale = "0.8"
} else if(start === false) {
this.style.scale = ""
$("sidebar-").toggle()
}
})
p("Announcements")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
.fontSize("3xl")
.fontWeight("bold")
})
.verticalAlign("center")
.gap(0.5, em)
.marginTop(2, em)
TopBar()
})
.paddingVertical(1, em)
.boxSizing("border-box")
.backgroundColor("var(--main)")
.gap(0.5, em)
.boxSizing("border-box")
.width(100, pct)
.height(100, pct)
.horizontalAlign("center")
.minHeight(0)
}

View File

@@ -1,3 +1,4 @@
import "../../components/TopBar.js"
import "../../components/LoadingCircle.js"
import "./EventCard.js"
import server from "../../_/code/bridge/serverFunctions.js"
@@ -37,18 +38,7 @@ class Events extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Events")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
})
.verticalAlign("center")
.horizontalAlign("center")
.gap(0.5, em)
.marginTop(0.5, em)
TopBar()
SearchBar()
@@ -61,7 +51,7 @@ class Events extends Shadow {
}
} else {
h2("No Events")
.color("var(--text)")
.color("var(--divider)")
.fontWeight("bold")
.marginTop(7.5, em)
.marginBottom(0.5, em)

View File

@@ -39,18 +39,7 @@ class Jobs extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Jobs")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
})
.verticalAlign("center")
.horizontalAlign("center")
.gap(0.5, em)
.marginTop(0.5, em)
TopBar()
// JobForm()
@@ -65,7 +54,7 @@ class Jobs extends Shadow {
}
} else {
h2("No Jobs")
.color("var(--text)")
.color("var(--divider)")
.fontWeight("bold")
.marginTop(7.5, em)
.marginBottom(0.5, em)

View File

@@ -1,3 +1,4 @@
import "../../components/TopBar.js"
import "./PeopleCard.js"
css(`
@@ -24,18 +25,7 @@ class People extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("People")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
})
.verticalAlign("center")
.horizontalAlign("center")
.gap(0.5, em)
.marginTop(0.5, em)
TopBar()
VStack(() => {
if (this.people == "") {
@@ -56,6 +46,7 @@ class People extends Shadow {
.color("var(--darkbrown)")
}
})
.gap(0.8, em)
})
.position("relative")
.boxSizing("border-box")

View File

@@ -8,28 +8,23 @@ class PeopleCard extends Shadow {
HStack(() => {
HStack(() => { })
.boxSizing("border-box")
.height(3.5, em)
.width(3.5, em)
.padding(0.5, em)
.height(3, em)
.width(3, em)
.paddingHorizontal(0.5, em)
.border("1px solid var(--accent)")
.borderRadius(100, pct)
.background("black")
VStack(() => {
h3(this.person.first_name + " " + this.person.last_name)
.color("var(--text)")
.fontSize(1.2, em)
.fontWeight("bold")
p(this.person.first_name + " " + this.person.last_name)
.color("var(--headertext)")
.marginVertical(0, em)
p("Member since " + this.convertDate(this.person.created))
})
.verticalAlign("center")
.horizontalAlign("left")
.gap(0.5, em)
})
.width(100, pct)
.boxSizing("border-box")
.padding(0.75, em)
.paddingHorizontal(1.75, em)
.gap(1, em)
}

View File

@@ -61,7 +61,7 @@ class AppMenu extends Shadow {
.display("grid")
.gridTemplateColumns(`repeat(${apps.filter(a => a !== "Settings").length}, 1fr)`)
.placeItems("center")
.borderTop("0.5px solid #783131")
.borderTop("0.5px solid var(--divider)")
.height("auto")
.zIndex(1)
.paddingTop(0.5, em)

29
src/components/TopBar.js Normal file
View File

@@ -0,0 +1,29 @@
class TopBar extends Shadow {
render() {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
.onTouch(function (start) {
if(start) {
this.style.scale = "0.8"
} else if(start === false) {
this.style.scale = ""
$("sidebar-").toggle()
}
})
p(global.currentApp())
.color("var(--headertext)")
.textAlign("center")
.fontFamily("Arial")
.fontSize("3xl")
.fontWeight("bold")
})
.paddingLeft(1, em)
.paddingBottom(1.5, em)
.verticalAlign("center")
.gap(0.5, em)
.marginTop(3, em)
}
}
register(TopBar)