86 lines
2.8 KiB
HTML
86 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Hyperia</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="_/icons/logo.svg">
|
|
<link rel="stylesheet" href="index.css">
|
|
<style>
|
|
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.main-image {
|
|
content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%)
|
|
}
|
|
@media (max-width: 600px) {
|
|
.main-image {
|
|
max-width: 90vw; bottom: -7vh;
|
|
}}
|
|
@media (prefers-color-scheme: dark) {
|
|
.main-image {
|
|
content:url("_/images/castle-dark3.svg");
|
|
height: 1000px; bottom: -34vmin; left: 26vw;
|
|
}}
|
|
@media (prefers-color-scheme: dark) and (max-width: 600px) {
|
|
.main-image {
|
|
max-width: 195vw; height: 80vh; left: 0vw;
|
|
}}
|
|
</style>
|
|
<script src="_/code/util.js"></script>
|
|
<script type="module">
|
|
import PageFooter from "./components/Footer.js"
|
|
import NavBar from "./components/NavBar.js"
|
|
import SideBar from "./components/SideBar.js"
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<div style="display: flex; flex-direction: column; top: 110vh; left: 50vw; transform: translateX(-50%); align-items: left; position: absolute;">
|
|
<h1 style="font-family: Canterbury; font-size: 4rem; margin-left: auto">A Classical Christian Society</h1>
|
|
<p>Hyperia is a society for people who want to uphold European tradition and Christian values.</p>
|
|
<p>Inspired by the Classical Christian schooling movement that began in the 1990s, Hyperia aims to create a similar space for adults.</p>
|
|
<div style="height: 20vh"></div>
|
|
</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> |