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

Style improvements

Browse Source
This commit is contained in:
metacryst
2025-06-23 15:28:04 -05:00
parent 760563167c
commit fd30ad1773
5 changed files with 41 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,2 +1,3 @@
.DS_Store .DS_Store
package-lock.json package-lock.json
_/build

6
_/build/imports.js
View File

@@ -1,6 +0,0 @@
import "./nav/header.js";
import "./pages/[].js";
window.routes = {
"/": "Home"
};

149
_/build/nav/header.js
View File

@@ -1,149 +0,0 @@
class Header extends Shadow {
render() {
HStack(() => {
HStack(() => {
img(darkMode ? "_/lightLogo.svg" : "_/logo.svg", 100, 100)
.marginLeft(2, "vw")
// p("Hyperia")
// .marginLeft(10, "px")
// .fontWeight(800)
// .fontSize("2xl")
})
.alignItems("center")
.flex(1)
VStack(() => {
input("", {width: "60vw", height: "35px"})
.background(Colors.searchBackground)
.borderRadius(6, px)
.border(`1px solid ${Colors.searchBorder}`)
.paddingLeft(1, "em")
.color(darkMode ? Colors.accent : Colors.oak)
.fontSize("l")
.marginTop(47, px)
.outline("none")
.transition("border .2s")
.onFocus(function () {
this.style.border = `1px solid ${darkMode ? "rgb(225 19 0)" : "white"}`
})
.onBlur(function () {
this.style.border = `1px solid ${Colors.searchBorder}`
})
.onKeyDown(function (e) {
console.log(e.key)
if(e.key === "Enter") {
navigateTo("/search/" + this.value)
}
})
HStack(() => {
a("/", () => {
img("_/all.svg", 20, 20)
.backgroundColor(window.location.pathname === "/" ? Colors.base : Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/" ? Colors.oak : "none")
.marginRight("20", "px")
a("Images", () => {
img("_/picture.svg", 20, 20)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Images" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Videos", () => {
img("_/video.svg", 20, 20)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Videos" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Products", () => {
img("_/shopping.svg", 17, 17)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(3)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Producrs" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Jobs", () => {
img("_/jobs.svg", 24, 24)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Jobs" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Files", () => {
img("_/doc.svg", 18, 18)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(3)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Files" ? Colors.oak : "none")
.marginRight("30", "px")
.color(Colors.ash)
})
.marginTop(20, px)
.justifyContent("center")
})
.flex(1)
HStack(() => {
button(() => {
img("_/silo2.svg", 48, 32)
.backgroundColor(Colors.base)
})
.addStyle(buttonStyle)
.height(40, "px")
.padding("horizontal", 18)
.paddingTop(2)
})
.flex(1)
.justifyContent("center")
})
.alignItems("center")
.gap("10px")
.width(100, 'vw')
.height(1.4, "in")
}
}
function buttonStyle(el) {
el.borderRadius(7, px)
.border(`1px solid ${Colors.searchBorder}`)
.backgroundColor(Colors.oak)
.color(darkMode ? Colors.ash : Colors.base)
.fontSize("15", "px")
.transition("scale .3s")
.onHover((hovering) => {
el.style.transition
if(hovering) {
el
.scale("1.05")
.backgroundColor(Colors.darkerBlue)
} else {
el
.scale("")
.backgroundColor(Colors.blue)
}
})
return el
}
registerShadow(Header);

19
_/build/pages/[].js
View File

@@ -1,19 +0,0 @@
css(`
home- {
margin: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background-color: ${Colors.base};
font-family: system-ui;
}
`)
class Home extends Page {
render() {
Header()
}
}
registerPage(Home);

55
ui/nav/header.js
View File

@@ -15,13 +15,12 @@ class Header extends Shadow {
VStack(() => { VStack(() => {
input("", {width: "60vw", height: "35px"}) input("", {width: "60vw", height: "35px"})
.background(Colors.searchBackground) .background(darkMode ? "rgb(194, 200, 228)" : "rgb(255, 240, 220)")
.borderRadius(6, px) .borderRadius(6, px)
.border(`1px solid ${Colors.searchBorder}`) .border(`1px solid ${Colors.searchBorder}`)
.paddingLeft(1, "em") .paddingLeft(1, "em")
.color(darkMode ? Colors.accent : Colors.oak) .color(darkMode ? Colors.accent : Colors.oak)
.fontSize("l") .fontSize("l")
.marginTop(47, px)
.outline("none") .outline("none")
.transition("border .2s") .transition("border .2s")
.onFocus(function () { .onFocus(function () {
@@ -42,68 +41,92 @@ class Header extends Shadow {
img("_/all.svg", 20, 20) img("_/all.svg", 20, 20)
.backgroundColor(window.location.pathname === "/" ? Colors.base : Colors.oak) .backgroundColor(window.location.pathname === "/" ? Colors.base : Colors.oak)
.padding("horizontal", 10) .padding("horizontal", 10)
.paddingTop(1) .paddingTop(3)
}) })
.borderRadius(12, px) .borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/" ? Colors.oak : "none") .backgroundColor(window.location.pathname === "/" ? Colors.oak : "none")
.marginRight("20", "px") .marginRight("20", "px")
.onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Images", () => { a("Images", () => {
img("_/picture.svg", 20, 20) img("_/picture.svg", 20, 20)
.backgroundColor(Colors.oak) .backgroundColor(Colors.oak)
.padding("horizontal", 10) .padding("horizontal", 10)
.paddingTop(1) .paddingTop(1)
}) })
.borderRadius(12, px) .borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Images" ? Colors.oak : "none") .backgroundColor(window.location.pathname === "/Images" ? Colors.oak : "none")
.marginRight("20", "px") .marginRight("20", "px")
.color(Colors.ash) .onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Videos", () => { a("Videos", () => {
img("_/video.svg", 20, 20) img("_/video.svg", 20, 20)
.backgroundColor(Colors.oak) .backgroundColor(Colors.oak)
.padding("horizontal", 10) .padding("horizontal", 10)
.paddingTop(1) .paddingTop(1)
}) })
.borderRadius(12, px) .borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Videos" ? Colors.oak : "none") .backgroundColor(window.location.pathname === "/Videos" ? Colors.oak : "none")
.marginRight("20", "px") .marginRight("20", "px")
.color(Colors.ash) .onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Products", () => { a("Products", () => {
img("_/shopping.svg", 17, 17) img("_/shopping.svg", 17, 17)
.backgroundColor(Colors.oak) .backgroundColor(Colors.oak)
.padding("horizontal", 10) .padding("horizontal", 10)
.paddingTop(3) .paddingTop(3)
}) })
.borderRadius(12, px) .borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Producrs" ? Colors.oak : "none") .backgroundColor(window.location.pathname === "/Producrs" ? Colors.oak : "none")
.marginRight("20", "px") .marginRight("20", "px")
.color(Colors.ash) .onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Jobs", () => { a("Jobs", () => {
img("_/jobs.svg", 24, 24) img("_/jobs.svg", 24, 24)
.backgroundColor(Colors.oak) .backgroundColor(Colors.oak)
.padding("horizontal", 10) .padding("horizontal", 10)
}) })
.borderRadius(12, px) .borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Jobs" ? Colors.oak : "none") .backgroundColor(window.location.pathname === "/Jobs" ? Colors.oak : "none")
.marginRight("20", "px") .marginRight("20", "px")
.color(Colors.ash) .onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
a("Files", () => { a("Files", () => {
img("_/doc.svg", 18, 18) img("_/doc.svg", 18, 18)
.backgroundColor(Colors.oak) .backgroundColor(Colors.oak)
.padding("horizontal", 10) .padding("horizontal", 10)
.paddingTop(3) .paddingTop(3)
}) })
.borderRadius(12, px) .borderRadius(8, px)
.padding("vertical", 5)
.backgroundColor(window.location.pathname === "/Files" ? Colors.oak : "none") .backgroundColor(window.location.pathname === "/Files" ? Colors.oak : "none")
.marginRight("30", "px") .marginRight("30", "px")
.color(Colors.ash) .onHover(function (hovering) {
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
this.style.cursor = "default"
})
}) })
.marginTop(20, px) .marginTop(20, px)
.justifyContent("center") .justifyContent("center")
}) })
.flex(1) .flex(1)
.marginTop(56, px)
HStack(() => { HStack(() => {
button(() => { button(() => {