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-10-13 00:08:05 -05:00
parent ac93ac5c4e
commit a2f4206cf9
4 changed files with 86 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/_/code/shared.css
View File

@@ -1,6 +1,8 @@
:root {
--tan: #FFDFB4;
--main: #FFDFB4;
--accent: black;
--tan: #FFDFB4;
--purple: #251D44;
--green: #0B5538;
--red: #BC1C02;
@@ -12,7 +14,7 @@
@media (prefers-color-scheme: dark) {
:root {
--tan: #251D44;
--main: #251D44;
--accent: #AF7323;
}
}
@@ -41,7 +43,7 @@
body {
font-family: 'BonaNova', sans-serif;
font-size: 16px;
background-color: var(--tan);
background-color: var(--main);
color: var(--accent);
}

4
ui/public/index.html
View File

@@ -65,8 +65,8 @@
<div style="display: flex; flex-direction: column; max-width: 50vw; align-items: center">
<h1 style="font-family: Canterbury; font-size: 3.5rem; ">A Classical Christian Society</h1>
<div style="font-size: 1.4em; margin-top: 1em; max-width: 42vw; text-align: justify">
<p>Hyperia is a private club to promote the Christian and European traditions.</p>
<div style="font-size: 1.3em; margin-top: 1em; max-width: 42vw; text-align: justify">
<p>Hyperia is a private club. We exist to promote European and Christian tradition.</p>
<p>Inspired by the Classical Christian schooling movement that began in the 1990s, Hyperia is a similar space for adults.</p>
</div>

24
ui/site/components/AppWindow.js Normal file
View File

@@ -0,0 +1,24 @@
css(`
app-window {
width: 100vw;
height: 100vh;
background-color: var(--main);
position: fixed;
top: 0;
left: 0;
display: none;
}
`)
export default class AppWindow extends HTMLElement {
open(app) {
this.style.display = "block"
}
close() {
this.style.display = "none"
}
}
customElements.define("app-window", AppWindow)

58
ui/site/index.html
View File

@@ -22,7 +22,18 @@
}
#menu-bar {
color: var(--tan)
color: var(--tan);
transform: translateX(-50%);
transition: transform .3s;
}
#menu-bar.minimized {
color: var(--accent);
transform: translate(-50%, 55%);
border: 1px solid var(--accent);
padding-left: 2em; padding-right: 2em;
}
#divider.minimized {
display: none;
}
.app {
@@ -36,12 +47,21 @@
text-decoration: underline;
transform: translateY(-5%)
}
.app.touched {
text-decoration: underline;
transform: translateY(0%)
}
.app.selected {
text-decoration: underline;
transform: translateY(-10%)
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.js"
import "./components/AppWindow.js"
import ConnectionHandler from "./ws/ConnectionHandler.js"
window.ConnectionHandler = new ConnectionHandler()
@@ -64,16 +84,48 @@
<body>
<div id="loading-wrapper" style="display: none;">
<div id="painting"></div>
<app-window></app-window>
<profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
<img src="_/icons/logo.svg" style="width: 3.5em; position: fixed; left: 3em; top: 2em;"/>
<img src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
<div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em; transform: translateX(-50%)">
<div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;">
<p class="app">Forum</p>
<p class="app">Messages</p>
<p class="app">Market</p>
<p class="app">Security</p>
<p class="app">Jobs</p>
</div>
<img id="divider" src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
<script>
Array.from(document.querySelectorAll(".app")).forEach((el) => {
el.addEventListener("mousedown", (e) => {
el.classList.add("touched")
})
})
window.addEventListener("mouseup", (e) => {
let target = e.target
if(!target.matches("p.app")) {
return
}
$("p.app").forEach((el) => {
if(el.innerText !== target.innerText) {
el.classList.remove("selected")
}
})
target.classList.remove("touched")
if(target.classList.contains("selected")) {
target.classList.remove("selected")
$("#menu-bar").classList.remove("minimized")
$("#divider").classList.remove("minimized")
$("app-window").close()
} else {
target.classList.add("selected")
$("#menu-bar").classList.add("minimized")
$("#divider").classList.add("minimized")
$("app-window").open(target.innerText)
}
})
</script>
</div>
</body>
</html>