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

3
.gitignore vendored
View File

@@ -1,4 +1,5 @@
.DS_Store .DS_Store
package-lock.json package-lock.json
_/build _/build
content content
db/*

1
ui/.gitignore vendored
View File

@@ -1 +0,0 @@
.DS_Store

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

@@ -1,40 +0,0 @@
:root {
--green: #0B5538;
--tan: #FFDFB4;
--red: rgb(206, 84, 61);
--brown: #c6a476
}
@font-face {
font-family: 'Canterbury';
src: url('/_/fonts/Canterbury/Canterbury.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CrimsonText';
src: url('/_/fonts/CrimsonText/CrimsonText-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CrimsonText';
src: url('/_/fonts/CrimsonText/CrimsonText-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
body {
font-family: 'CrimsonText', sans-serif;
background-color: var(--tan);
color: var(--green);
}
button {
background-color: var(--green);
color: var(--tan);
padding: 1em;
box-shadow: none;
}

BIN
ui/_/fonts/BonaNova/BonaNova-Bold.woff Normal file
View File

Binary file not shown.

BIN
ui/_/fonts/BonaNova/BonaNova-Italic.woff Normal file
View File

Binary file not shown.

BIN
ui/_/fonts/BonaNova/BonaNova-Regular.woff Normal file
View File

Binary file not shown.

BIN
ui/_/fonts/BonaNova/bona-nova-webfont.zip Normal file
View File

Binary file not shown.

18
ui/_/fonts/BonaNova/bona-nova-webfont/example.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1>Generated from: http://font.download</h1><br/>
<h1 style="font-family:'Bona Nova Regular';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Bona Nova Italic';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
<h1 style="font-family:'Bona Nova Bold';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
</body>
</html>

24
ui/_/fonts/BonaNova/bona-nova-webfont/style.css Normal file
View File

@@ -0,0 +1,24 @@
/* #### Generated By: http://font.download #### */
@font-face {
font-family: 'Bona Nova Regular';
font-style: normal;
font-weight: normal;
src: local('Bona Nova Regular'), url('BonaNova-Regular.woff') format('woff');
}
@font-face {
font-family: 'Bona Nova Italic';
font-style: normal;
font-weight: normal;
src: local('Bona Nova Italic'), url('BonaNova-Italic.woff') format('woff');
}
@font-face {
font-family: 'Bona Nova Bold';
font-style: normal;
font-weight: normal;
src: local('Bona Nova Bold'), url('BonaNova-Bold.woff') format('woff');
}

BIN
ui/_/fonts/BonaNova/old/BonaNova-Bold.ttf Executable file
View File

Binary file not shown.

BIN
ui/_/fonts/BonaNova/old/BonaNova-Italic.ttf Executable file
View File

Binary file not shown.

BIN
ui/_/fonts/BonaNova/old/BonaNova-Regular.ttf Executable file
View File

Binary file not shown.

576
ui/_/images/castle-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

3094
ui/_/images/castle-dark2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

578
ui/_/images/castle.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 553 KiB

181
ui/public/index.css
View File

@@ -1,143 +1,78 @@
.card-header { :root {
padding: 2vw; --tan: #E6D7AA;
--accent: black;
--purple: #251D44;
--green: #0B5538;
--red: #BC1C02;
--brown: #c6a476;
} }
.card-content { @media (prefers-color-scheme: dark) {
padding: 2vw; :root {
--tan: #251D44;
--accent: #AF7323;
} }
.card-footer {
padding: 10px 10px 3vw;
display: flex;
justify-content: center;
font-size: 1.2em;
}
.card a {
background: #af936226;
margin-right: 10px;
}
.card-image figure {
margin: 0;
padding: 0;
}
p {
font-size: 1.2em;
}
.card {
width: 40vw;
border: 1px solid var(--green);
}
.card-image img {
width: 100%;
height: 40vh;
object-fit: cover;
display: block;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5vw;
max-width: 90vw;
margin-top: 20vh;
margin-left: 5vw;
margin-bottom: 5vw
} }
@font-face { @font-face {
font-family: 'CrimsonText'; font-family: 'Canterbury';
src: url('/_/CrimsonText/CrimsonText-Regular.ttf') format('truetype'); src: url('/_/fonts/Canterbury/Canterbury.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'CrimsonText'; font-family: 'BonaNova';
src: url('/_/CrimsonText/CrimsonText-Bold.ttf') format('truetype'); src: url('/_/fonts/BonaNova/BonaNova-Regular.woff') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'BonaNova';
src: url('/_/fonts/BonaNova/BonaNova-Bold.woff') format('truetype');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@media screen and (max-width: 600px){ body {
.card a { font-family: 'BonaNova', sans-serif;
background: var(--green); font-size: 16px;
margin-right: 10px; background-color: var(--tan);
} color: var(--accent);
}
body { #title {
font-family: 'CrimsonText', sans-serif; padding: 5px 10px;
background-color: var(--tan); font-size: 1.7rem;
color: var(--green); position: fixed; top: 4.5vh; left: 6vw;
} cursor: pointer; z-index: 1;
}
:root { a {
--green: #0B5538; cursor: default;
--tan: #FFDFB4; text-decoration: none;
} text-underline-offset: 5px;
transition: background .02s, color .2s;
user-select: none;
color: var(--accent);
display: inline-block; /* makes background and padding behave */
padding: 0.2em 0.5em; /* adds breathing room */
}
.card-image img { a:hover {
height: 70vh; text-decoration: none;
} background: var(--green);
color: var(--tan);
}
.card { a:active {
margin-bottom: 4vw; background: var(--red); /* background color works now */
padding-bottom: 4vw; }
width: auto;
}
.content a { button {
background: var(--green); background-color: var(--green);
color: var(--tan); color: var(--tan);
border-radius: 6px; padding: 1em;
padding: 1vw; box-shadow: none;
} }
.card-footer-item {
background: var(--green);
color: var(--tan);
border-radius: 6px;
padding: 1vw;
margin-right: 1vw;
text-decoration: none;
}
.card-header {
padding: 2vw;
}
.card-content {
padding: 2vw;
}
.card-image {
margin: 0; /* Removes spacing around image container */
padding: 0;
}
.card-image figure {
margin: 0;
padding: 0;
}
.card-footer {
padding: 10px 10px 10px 2vw;
font-size: 1.2em;
display: flex;
justify-content: center;
}
.grid-container {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 5vw;
max-width: 90vw;
margin-left: auto;
margin-right: auto;
}
}

113
ui/public/index.html
View File

@@ -4,60 +4,29 @@
<title>Hyperia</title> <title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg"> <link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<style> <style>
:root {
--green: #0B5538; body {
--tan: #FFDFB4; font-size: 16px;
--red: #BC1C02;
--brown: #c6a476
} }
#items { .main-image {
position: absolute; content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%)
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 */
} }
#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) { @media (max-width: 600px) {
#title { .main-image {
font-size: 30vw 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> </style>
<script src="_/code/util.js"></script> <script src="_/code/util.js"></script>
<script type="module"> <script type="module">
@@ -67,18 +36,42 @@
</script> </script>
</head> </head>
<body> <body>
<div id="items"> <span id="title" class="link" onclick='window.location.href="/"'>hyperia
<span id="title" style="font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span> </span>
<img src="_/icons/logo.svg" style="width: 17vh; z-index: 1"> <img class="main-image">
<img src="_/icons/left_plant.svg" style="position: absolute; left: 25%; top: 23vh; width: 70%; transform: translateX(-50%)"> <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<img src="_/icons/right_plant.svg" style="position: absolute; left: 75%; top: 23vh; width: 70%; transform: translateX(-50%)"> <a href="join">join</a>
<div style="height: 2vh"></div> <span>|</span>
<span style="font-family: Canterbury; color: black; font-size: 4.5vh;">A <br>Classical <br> Christian <br> Society</span> <a href="signin">sign in</a>
<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>
</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> </body>
</html> </html>

21
ui/public/pages/join.html
View File

@@ -4,15 +4,8 @@
<title>Hyperia</title> <title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg"> <link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<style> <style>
:root {
--green: #0B5538;
--tan: #FFDFB4;
--red: #BC1C02;
--brown: #c6a476
}
#items { #items {
position: absolute; position: absolute;
@@ -26,13 +19,6 @@
text-align: center; /* ensures text inside spans is centered */ text-align: center; /* ensures text inside spans is centered */
} }
#title {
font-size: 10vh;
position: absolute;
left: 2vw;
top: 2vh;
}
a { a {
cursor: default; cursor: default;
text-decoration: underline; text-decoration: underline;
@@ -64,10 +50,9 @@
</script> </script>
</head> </head>
<body> <body>
<span id="title" style="font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span> <span id="title" onclick='window.location.href="/"'>hyperia
<div id="items"> </span>
</div>
<script> <script>
Array.from($("a*")).forEach((link) => { Array.from($("a*")).forEach((link) => {
link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase())) link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))

49
ui/public/pages/signin.html
View File

@@ -4,16 +4,8 @@
<title>Hyperia</title> <title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg"> <link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<style> <style>
:root {
--green: #0B5538;
--tan: #FFDFB4;
--red: #BC1C02;
--brown: #c6a476
}
#items { #items {
position: absolute; position: absolute;
top: 45vh; top: 45vh;
@@ -26,13 +18,6 @@
text-align: center; /* ensures text inside spans is centered */ text-align: center; /* ensures text inside spans is centered */
} }
#title {
font-size: 10vh;
position: absolute;
left: 2vw;
top: 2vh;
}
a { a {
cursor: default; cursor: default;
text-decoration: underline; text-decoration: underline;
@@ -60,36 +45,33 @@
background-color: transparent; background-color: transparent;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
border-top: 2px solid var(--green); border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--green); border-bottom: 2px solid var(--accent);
height: 2em; height: 2em;
width: 15vw; width: 15vw;
padding: 0.2em; padding: 0.2em;
transition: border .2s, padding .2s; transition: border .2s, padding .2s;
color: var(--accent)
}
input::placeholder {
color: var(--accent);
} }
input:focus { input:focus {
outline: none; outline: none;
padding: 0.4em; padding: 0.4em;
border-top: 2px solid var(--red); border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red); border-bottom: 2px solid var(--red);
} }
input:focus::placeholder { input:focus::placeholder {
color: var(--red) color: var(--red)
} }
input:-webkit-autofill,
input::placeholder { input:-webkit-autofill:focus {
color: var(--green); transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
} }
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
@media (max-width: 600px) { @media (max-width: 600px) {
input { input {
@@ -107,16 +89,11 @@
</script> </script>
</head> </head>
<body> <body>
<span onclick="window.location = '/'"id="title" style="cursor: default; font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span> <span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div id="items"> <div id="items">
<input placeholder="email"></input> <input placeholder="email"></input>
<br> <br>
<input placeholder="password"></input> <input placeholder="password"></input>
</div> </div>
<script>
Array.from($("a*")).forEach((link) => {
link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))
})
</script>
</body> </body>
</html> </html>

3
ui/readme.md
View File

@@ -1 +1,4 @@
See https://github.com/return-to-the-land/go-backend for instructions. 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.