Style improvements
This commit is contained in:
metacryst
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,2 +1,3 @@
|
||||
.DS_Store
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
_/build
|
||||
@@ -1,6 +0,0 @@
|
||||
import "./nav/header.js";
|
||||
import "./pages/[].js";
|
||||
|
||||
window.routes = {
|
||||
"/": "Home"
|
||||
};
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
@@ -15,13 +15,12 @@ class Header extends Shadow {
|
||||
|
||||
VStack(() => {
|
||||
input("", {width: "60vw", height: "35px"})
|
||||
.background(Colors.searchBackground)
|
||||
.background(darkMode ? "rgb(194, 200, 228)" : "rgb(255, 240, 220)")
|
||||
.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 () {
|
||||
@@ -42,68 +41,92 @@ class Header extends Shadow {
|
||||
img("_/all.svg", 20, 20)
|
||||
.backgroundColor(window.location.pathname === "/" ? Colors.base : Colors.oak)
|
||||
.padding("horizontal", 10)
|
||||
.paddingTop(1)
|
||||
.paddingTop(3)
|
||||
})
|
||||
.borderRadius(12, px)
|
||||
.borderRadius(8, px)
|
||||
.padding("vertical", 5)
|
||||
.backgroundColor(window.location.pathname === "/" ? Colors.oak : "none")
|
||||
.marginRight("20", "px")
|
||||
.onHover(function (hovering) {
|
||||
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
|
||||
this.style.cursor = "default"
|
||||
})
|
||||
a("Images", () => {
|
||||
img("_/picture.svg", 20, 20)
|
||||
.backgroundColor(Colors.oak)
|
||||
.padding("horizontal", 10)
|
||||
.paddingTop(1)
|
||||
|
||||
})
|
||||
.borderRadius(12, px)
|
||||
.borderRadius(8, px)
|
||||
.padding("vertical", 5)
|
||||
.backgroundColor(window.location.pathname === "/Images" ? Colors.oak : "none")
|
||||
.marginRight("20", "px")
|
||||
.color(Colors.ash)
|
||||
.onHover(function (hovering) {
|
||||
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
|
||||
this.style.cursor = "default"
|
||||
})
|
||||
a("Videos", () => {
|
||||
img("_/video.svg", 20, 20)
|
||||
.backgroundColor(Colors.oak)
|
||||
.padding("horizontal", 10)
|
||||
.paddingTop(1)
|
||||
|
||||
})
|
||||
.borderRadius(12, px)
|
||||
.borderRadius(8, px)
|
||||
.padding("vertical", 5)
|
||||
.backgroundColor(window.location.pathname === "/Videos" ? Colors.oak : "none")
|
||||
.marginRight("20", "px")
|
||||
.color(Colors.ash)
|
||||
.onHover(function (hovering) {
|
||||
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
|
||||
this.style.cursor = "default"
|
||||
})
|
||||
a("Products", () => {
|
||||
img("_/shopping.svg", 17, 17)
|
||||
.backgroundColor(Colors.oak)
|
||||
.padding("horizontal", 10)
|
||||
.paddingTop(3)
|
||||
})
|
||||
.borderRadius(12, px)
|
||||
.borderRadius(8, px)
|
||||
.padding("vertical", 5)
|
||||
.backgroundColor(window.location.pathname === "/Producrs" ? Colors.oak : "none")
|
||||
.marginRight("20", "px")
|
||||
.color(Colors.ash)
|
||||
.onHover(function (hovering) {
|
||||
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
|
||||
this.style.cursor = "default"
|
||||
})
|
||||
a("Jobs", () => {
|
||||
img("_/jobs.svg", 24, 24)
|
||||
.backgroundColor(Colors.oak)
|
||||
.padding("horizontal", 10)
|
||||
})
|
||||
.borderRadius(12, px)
|
||||
.borderRadius(8, px)
|
||||
.padding("vertical", 5)
|
||||
.backgroundColor(window.location.pathname === "/Jobs" ? Colors.oak : "none")
|
||||
.marginRight("20", "px")
|
||||
.color(Colors.ash)
|
||||
.onHover(function (hovering) {
|
||||
this.style.outline = hovering ? `1px solid ${Colors.ash}` : "none"
|
||||
this.style.cursor = "default"
|
||||
})
|
||||
a("Files", () => {
|
||||
img("_/doc.svg", 18, 18)
|
||||
.backgroundColor(Colors.oak)
|
||||
.padding("horizontal", 10)
|
||||
.paddingTop(3)
|
||||
})
|
||||
.borderRadius(12, px)
|
||||
.borderRadius(8, px)
|
||||
.padding("vertical", 5)
|
||||
.backgroundColor(window.location.pathname === "/Files" ? Colors.oak : "none")
|
||||
.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)
|
||||
.justifyContent("center")
|
||||
|
||||
})
|
||||
.flex(1)
|
||||
.marginTop(56, px)
|
||||
|
||||
HStack(() => {
|
||||
button(() => {
|
||||
|
||||
Reference in New Issue
Block a user