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

castle

Browse Source
This commit is contained in:
metacryst
2025-09-20 12:58:28 -05:00
parent ffb4d1ef52
commit 04f4155a19
20 changed files with 4422 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
ui/public/index.html
View File

@@ -4,60 +4,29 @@
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<link rel="stylesheet" href="index.css">
<style>
:root {
--green: #0B5538;
--tan: #FFDFB4;
--red: #BC1C02;
--brown: #c6a476
body {
font-size: 16px;
}
#items {
position: absolute;
top: 47vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
.main-image {
content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%)
}
#title {
font-size: 22vh;
}
a {
cursor: default;
text-decoration: underline;
text-underline-offset: 5px;
transition: background .02s, color .2s;
user-select: none;
color: black;
display: inline-block; /* makes background and padding behave */
padding: 0.2em 0.5em; /* adds breathing room */
}
a:hover {
text-decoration: none;
background: var(--green);
color: var(--tan);
}
a:active {
background: var(--red); /* background color works now */
color: white; /* optional: change text color for contrast */
}
@media (max-width: 600px) {
#title {
font-size: 30vw
}
}
.main-image {
max-width: 90vw; bottom: -7vh;
}}
@media (prefers-color-scheme: dark) {
.main-image {
content:url("_/images/castle-dark2.svg");
height: 120vmin; bottom: -17vmin; left: 31vw;
}}
@media (prefers-color-scheme: dark) and (max-width: 600px) {
.main-image {
max-width: 195vw; height: 80vh; bottom: -17vmin; left: 0vw;
}}
</style>
<script src="_/code/util.js"></script>
<script type="module">
@@ -67,18 +36,42 @@
</script>
</head>
<body>
<div id="items">
<span id="title" style="font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span>
<img src="_/icons/logo.svg" style="width: 17vh; z-index: 1">
<img src="_/icons/left_plant.svg" style="position: absolute; left: 25%; top: 23vh; width: 70%; transform: translateX(-50%)">
<img src="_/icons/right_plant.svg" style="position: absolute; left: 75%; top: 23vh; width: 70%; transform: translateX(-50%)">
<div style="height: 2vh"></div>
<span style="font-family: Canterbury; color: black; font-size: 4.5vh;">A <br>Classical <br> Christian <br> Society</span>
<div style="height: 2vh"></div>
<div style="color: black; font-size: 2vh; z-index: 1; cursor: default;">
<a href="signin">SIGN IN</a>
<a href="join">JOIN</a>
</div>
<span id="title" class="link" onclick='window.location.href="/"'>hyperia
</span>
<img class="main-image">
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<style>
.link, a {
transition: background-color 0.3s ease, scale 0.3s;
padding: 5px 10px; /* optional padding for visual clarity */
border-radius: 4px; /* optional */
}
.link.touched, a.touched {
background-color: orange;
color: black;
scale: 1.3;
}
</style>
<script>
document.querySelectorAll('.link, a').forEach(link => {
link.addEventListener('touchstart', () => {
link.classList.add('touched');
});
link.addEventListener('touchend', () => {
link.classList.remove('touched');
});
// Optional: also handle touchcancel in case the user moves their finger away
link.addEventListener('touchcancel', () => {
link.classList.remove('touched');
});
});
</script>
</body>
</html>