better castle

This commit is contained in:
metacryst
2025-09-22 13:05:06 -05:00
parent 04f4155a19
commit a58632d983
10 changed files with 3293 additions and 114 deletions

3094
ui/_/images/castle-dark3.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.6 MiB

View File

@@ -20,12 +20,12 @@
}}
@media (prefers-color-scheme: dark) {
.main-image {
content:url("_/images/castle-dark2.svg");
height: 120vmin; bottom: -17vmin; left: 31vw;
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; bottom: -17vmin; left: 0vw;
max-width: 195vw; height: 80vh; left: 0vw;
}}
</style>
<script src="_/code/util.js"></script>
@@ -44,6 +44,15 @@
<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;

View File

@@ -8,7 +8,7 @@
<style>
#items {
position: absolute;
top: 45vh;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
@@ -18,29 +18,6 @@
text-align: center; /* ensures text inside spans is centered */
}
a {
cursor: default;
text-decoration: underline;
text-underline-offset: 5px;
transition: background .02s, color .2s;
user-select: none;
padding: 4px;
border-radius: 5px;
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 */
}
input {
background-color: transparent;
border: none;
@@ -78,8 +55,6 @@
width: 50vw
}
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
@@ -91,9 +66,43 @@
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div id="items">
<input placeholder="email"></input>
<input id="email" placeholder="email"></input>
<br>
<input placeholder="password"></input>
<input id="password" placeholder="password"></input>
<br>
<p id="applicant-message" style="color: green; margin-left: 10px; display: inline-block; margin: 0px; margin-left: 20px; font-size: 1em"></p>
<br>
<div>
</div>
<button onclick="login()" style="background-color: rgb(193, 135, 29)">Sign In
<script>
async function login() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const messageEl = document.getElementById('applicant-message');
const res = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});
if (res.ok) {
const data = await res.text();
messageEl.style.color = "green"
messageEl.textContent = "Check your email for a login link.";
} else {
const error = await res.text();
console.log(error)
messageEl.style.color = "red"
messageEl.textContent = "Error: " + error;
}
}
</script>
</button>
</div>
</body>
</html>

View File

@@ -1,4 +1,8 @@
See https://github.com/return-to-the-land/go-backend for instructions.
# Style Guidelines
- Font size is defined in the index.html. Only use rem as a unit.
- Font size is defined in the index.html. Only use rem as a unit.
# Documentation
```go install golang.org/x/tools/cmd/godoc@latest```
```$HOME/go/bin/godoc -http=:6060``` (to run on Mac)