TAUTEN.net/portal
1
0
Fork 0
mirror of https://codeberg.org/tauten/portal.git synced 2024-09-19 17:36:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: initial commit

Browse source
This commit is contained in:
TAUTEN.net Administrator 2024-08-09 18:40:45 +00:00
commit 7d9a2cd2c7
10 changed files with 1912 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
index.html Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<!--
!\_/!
__ =T,U= __
/ /___╰v─v╯ __/ /____ ___
/ __/ _ `/ // / __/ -_) _ \
\__/\_,_/\_,_/\__/\__/_//_/
Copyright (c) TAUTEN.net 2024.
This website is open-source and licensed under the AGPL3.0-only license.
Refer to the /LICENSE file. <https://codeberg.org/tauten/portal>
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/scss/style.css">
<link rel="icon" type="image/x-icon" href="res/img/favicon.svg">
<title>TAUTEN.net portal 🐈‍⬛</title>
<script type="module" src="res/js/main.js"></script>
<meta name="name" content="TAUTEN.net"/>
<meta name="description" content="We're cats who brew code."/>
<meta name="keywords" content="TAUTEN.net, tauten, tauten portal"/>
<meta name="theme-color" content="#FF9040"/>
<meta property="og:site_name" content="TAUTEN.net"/>
<meta property="og:title" content="TAUTEN.net portal 🐈‍⬛"/>
<meta property="og:type" content="website"/>
<meta property="og:locale" content="en_GB"/>
<meta property="og:url" content="https://tauten.net"/>
<meta property="og:image" content="res/img/favicon.png"/>
<meta property="og:description" content="We're cats who brew code."/>
<meta name="twitter:title" content="TAUTEN.net portal 🐈‍⬛">
<meta name="twitter:description" content="We're cats who brew code.">
<meta name="twitter:image" content="res/img/thumbnail.png">
<meta name="twitter:card" content="summary_large_image">
</head>
<body>
<main>
<header>
<svg viewBox="0 0 98 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="mascot">
<path id="feets"
d="M39.4794 27.2066L41.1794 29.8684C41.3021 30.0605 41.5915 30.0301 41.6716 29.8167L42.781 26.8596L39.4794 27.2066ZM58.5198 27.2066L56.8198 29.8684C56.6971 30.0605 56.4077 30.0301 56.3276 29.8167L55.2182 26.8596L58.5198 27.2066Z"
/>
<g id="eyes">
<g id="close">
<path d="M39.3955 14.8323C39.1367 14.8277 38.9232 15.0339 38.9186 15.2928L38.9023 16.2301L44.7608 16.3324L44.7771 15.395C44.7816 15.1362 44.5755 14.9227 44.3166 14.9182L39.3955 14.8323Z"/>
<path d="M53.6834 14.9222C53.4245 14.9267 53.2184 15.1402 53.2229 15.3991L53.2392 16.3364L59.0977 16.2342L59.0814 15.2968C59.0768 15.038 58.8633 14.8318 58.6045 14.8363L53.6834 14.9222Z"/>
</g>
<g id="open" class="show">
<path d="M54.3978 15.94C54.4294 16.8455 55.1891 17.5539 56.0946 17.5223C57.0002 17.4907 57.7086 16.731 57.677 15.8254L57.5666 12.6633C57.5621 12.5339 57.6633 12.4254 57.7926 12.4209L58.7296 12.3882C58.8589 12.3837 58.9675 12.4849 58.972 12.6142L59.0824 15.7764C59.1411 17.4581 57.8254 18.869 56.1437 18.9277C54.462 18.9864 53.0511 17.6708 52.9924 15.989L52.8819 12.8269C52.8774 12.6975 52.9786 12.589 53.108 12.5845L54.0449 12.5518C54.1743 12.5473 54.2828 12.6485 54.2873 12.7778L54.3978 15.94ZM39.2621 12.6306C39.2666 12.5012 39.3752 12.4 39.5045 12.4045L44.1892 12.5681C44.3185 12.5726 44.4197 12.6812 44.4152 12.8105L44.3743 13.9817L42.5005 13.9163L42.341 18.4838C42.3319 18.7425 42.1149 18.9449 41.8561 18.9359L41.3877 18.9195C41.1289 18.9105 40.9265 18.6934 40.9356 18.4347L41.0951 13.8672L39.2212 13.8018L39.2621 12.6306Z" />
</g>
</g>
<path id="mouth"
d="M47.092 18.8079L47.3359 18.625L49 17.377L50.6641 18.625L50.908 18.8079L51.1236 18.5923L52.0611 17.6548L51.5639 17.1577L50.842 17.8796L49.2109 16.6562C49.0859 16.5625 48.9141 16.5625 48.7891 16.6562L47.158 17.8796L46.4361 17.1577L45.9389 17.6548L46.8764 18.5923L47.092 18.8079Z"
/>
<path id="body"
d="M36.2266 2.0712L36.9918 2.31717L43.1413 4.29378C43.328 4.3538 43.5283 4.37117 43.7283 4.34495C44.6878 4.21919 47.0982 3.92968 49 3.92968C50.9018 3.92968 53.3122 4.21919 54.2717 4.34495C54.4717 4.37117 54.672 4.3538 54.8587 4.29378L61.0082 2.31717L61.7734 2.0712V2.875V15.0625V24.4375C61.7734 26.3144 60.2519 27.8359 58.375 27.8359H39.625C37.7481 27.8359 36.2266 26.3144 36.2266 24.4375V15.0625V2.875V2.0712ZM37.3984 3.6788V15.0625V24.4375C37.3984 25.6672 38.3953 26.6641 39.625 26.6641H58.375C59.6047 26.6641 60.6016 25.6672 60.6016 24.4375V15.0625V3.6788L55.2173 5.40944C54.8605 5.52414 54.4854 5.55487 54.1194 5.50689C53.1612 5.3813 50.8179 5.10156 49 5.10156C47.1821 5.10156 44.8388 5.3813 43.8806 5.50689C43.5146 5.55487 43.1395 5.52414 42.7827 5.40944L37.3984 3.6788Z"
/>
<path id="whiskers"
d="M35.3125 20.3844L36.7219 20.4524L36.7512 20.4538L36.7803 20.4504L38.1816 20.2842L38.0988 19.5859L36.7266 19.7487L35.3464 19.6821L35.3125 20.3844ZM34.4824 22.6425L36.8248 22.5607L39.1671 22.4789L39.1426 21.7762L36.8002 21.858L34.4579 21.9398L34.4824 22.6425ZM36.9031 23.9663L36.8738 23.9649L36.8447 23.9683L35.4434 24.1345L35.5262 24.8327L36.8984 24.67L38.2787 24.7366L38.3126 24.0343L36.9031 23.9663ZM59.8184 20.2842L61.2197 20.4504L61.2488 20.4538L61.2781 20.4524L62.6876 20.3844L62.6537 19.6821L61.2734 19.7487L59.9012 19.5859L59.8184 20.2842ZM58.8329 22.4789L61.1752 22.5607L63.5176 22.6425L63.5421 21.9398L61.1998 21.858L58.8575 21.7762L58.8329 22.4789ZM61.1553 23.9683L61.1262 23.9649L61.0969 23.9663L59.6875 24.0343L59.7214 24.7366L61.1016 24.67L62.4738 24.8327L62.5566 24.1345L61.1553 23.9683Z"
/>
</g>
<g id="logotype">
<path d="M11.6709 48.8614C11.3209 48.8614 11.0372 48.5777 11.0372 48.2277V36.2475H7.08672C6.74222 36.2475 6.46296 35.9683 6.46296 35.6238V35.6238C6.46296 35.2793 6.74222 35 7.08672 35H16.3936C16.7381 35 17.0174 35.2793 17.0174 35.6238V35.6238C17.0174 35.9683 16.7381 36.2475 16.3936 36.2475H12.3045V48.2277C12.3045 48.5777 12.0208 48.8614 11.6709 48.8614V48.8614Z" />
<path d="M19.032 48.8614C18.601 48.8614 18.3096 48.4218 18.4774 48.0248L23.6731 35.7377C23.8622 35.2906 24.3005 35 24.786 35V35C25.2725 35 25.7116 35.2918 25.9 35.7404L31.033 47.9618C31.2125 48.3892 30.8986 48.8614 30.4351 48.8614V48.8614C30.1744 48.8614 29.939 48.7052 29.8376 48.465L25.8861 39.099C25.7409 38.7162 25.6088 38.3795 25.49 38.0891C25.3844 37.7855 25.2788 37.5083 25.1732 37.2574C25.0676 37.0066 24.962 36.7492 24.8564 36.4851C24.764 36.2079 24.6649 35.8977 24.5593 35.5545H24.9158C24.797 35.9505 24.6847 36.2937 24.5791 36.5842C24.4735 36.8746 24.3679 37.1452 24.2623 37.396C24.1567 37.6469 24.0445 37.9175 23.9257 38.2079C23.8201 38.4851 23.688 38.8152 23.5296 39.198L19.5863 48.4944C19.4919 48.7169 19.2737 48.8614 19.032 48.8614V48.8614ZM20.5395 44.9406L21.0544 43.6931H28.4801L28.8762 44.9406H20.5395Z" />
<path d="M40.6744 49C39.5127 49 38.483 48.7426 37.5853 48.2277C36.7008 47.7129 36.0078 47.0066 35.5061 46.1089C35.0177 45.2112 34.7734 44.1815 34.7734 43.0198V35.6337C34.7734 35.2837 35.0571 35 35.4071 35V35C35.7571 35 36.0408 35.2837 36.0408 35.6337V42.901C36.0408 43.8383 36.2388 44.6766 36.6348 45.4158C37.0441 46.1419 37.5985 46.7162 38.2982 47.1386C38.9979 47.5479 39.7899 47.7525 40.6744 47.7525C41.5985 47.7525 42.417 47.5479 43.1299 47.1386C43.8427 46.7162 44.4038 46.1419 44.813 45.4158C45.2223 44.6766 45.4269 43.8383 45.4269 42.901V35.6139C45.4269 35.2748 45.7017 35 46.0408 35V35C46.3798 35 46.6546 35.2748 46.6546 35.6139V43.0396C46.6546 44.1881 46.3972 45.2112 45.8824 46.1089C45.3807 47.0066 44.681 47.7129 43.7833 48.2277C42.8989 48.7426 41.8625 49 40.6744 49Z" />
<path d="M55.6065 48.8614C55.2566 48.8614 54.9729 48.5777 54.9729 48.2277V36.2475H51.0224C50.6779 36.2475 50.3986 35.9683 50.3986 35.6238V35.6238C50.3986 35.2793 50.6779 35 51.0224 35H60.3293C60.6738 35 60.953 35.2793 60.953 35.6238V35.6238C60.953 35.9683 60.6738 36.2475 60.3293 36.2475H56.2402V48.2277C56.2402 48.5777 55.9565 48.8614 55.6065 48.8614V48.8614Z" />
<path d="M65.3599 48.8614C65.0332 48.8614 64.7683 48.5965 64.7683 48.2699V35.5953C64.7683 35.2665 65.0349 35 65.3637 35H73.4713C73.8158 35 74.0951 35.2793 74.0951 35.6238V35.6238C74.0951 35.9683 73.8158 36.2475 73.4713 36.2475H66.0357V47.6139H73.4119C73.7564 47.6139 74.0357 47.8931 74.0357 48.2376V48.2376C74.0357 48.5821 73.7564 48.8614 73.4119 48.8614H65.3599ZM65.402 42.3465V41.099H72.3426C72.6871 41.099 72.9664 41.3783 72.9664 41.7228V41.7228C72.9664 42.0673 72.6871 42.3465 72.3426 42.3465H65.402Z" />
<path d="M79.5767 48.8614C79.2267 48.8614 78.943 48.5777 78.943 48.2277V35.8262C78.943 35.3699 79.3129 35 79.7691 35V35C80.0113 35 80.2414 35.1063 80.3983 35.2907L90.6658 47.3564L90.4479 47.8119C90.4083 47.6007 90.3819 47.2574 90.3687 46.7822C90.3687 46.2937 90.3555 45.7459 90.3291 45.1386C90.3159 44.5182 90.3027 43.8977 90.2895 43.2772C90.2895 42.6436 90.2829 42.0693 90.2697 41.5545C90.2697 41.0264 90.2697 40.6238 90.2697 40.3465V35.6337C90.2697 35.2837 90.5534 35 90.9034 35V35C91.2533 35 91.537 35.2837 91.537 35.6337V47.9941C91.537 48.4731 91.1488 48.8614 90.6698 48.8614V48.8614C90.4159 48.8614 90.1748 48.7502 90.01 48.557L79.7945 36.5842L79.9925 36.1089C79.9925 36.3993 79.9991 36.769 80.0123 37.2178C80.0387 37.6535 80.0651 38.1287 80.0915 38.6436C80.1179 39.1452 80.1377 39.6403 80.1509 40.1287C80.1641 40.6172 80.1773 41.0594 80.1905 41.4554C80.2037 41.8383 80.2103 42.1221 80.2103 42.3069V48.2277C80.2103 48.5777 79.9266 48.8614 79.5767 48.8614V48.8614Z" />
</g>
</svg>
</header>
<nav>
<a href="#">about</a>
<a href="#">works</a>
<a href="#">blog</a>
<a href="#">friends</a>
<a href="#">taunnect</a>
</nav>
<footer>
<span>cats who brew code</span>
</footer>
</main>
</body>
</html>

BIN
res/img/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

51
res/img/favicon.svg Normal file
View file

@ -0,0 +1,51 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
svg {
--surface: #FFFCFA;
--text: #442F20;
}
@media (prefers-color-scheme: dark) {
svg {
--surface: #28201A;
--text: #FEEEE3;
}
}
</style>
<g clip-path="url(#clip0_7190_3525)">
<rect
x="0.875"
width="16"
height="16"
rx="3"
fill="var(--surface)"/>
<path
d="M13.4699 7.53092C13.696 8.27033 14.4786 8.68648 15.218 8.46042C15.9575 8.23436 16.3736 7.45169 16.1476 6.71228L15.3582 4.13025C15.3259 4.02462 15.3853 3.91281 15.4909 3.88052L16.256 3.64662C16.3616 3.61433 16.4734 3.67378 16.5057 3.77941L17.2951 6.36143C17.715 7.73463 16.9421 9.18816 15.5689 9.60799C14.1957 10.0278 12.7422 9.25496 12.3223 7.88176L11.5329 5.29974C11.5006 5.19411 11.5601 5.0823 11.6657 5.05L12.4308 4.81611C12.5364 4.78381 12.6482 4.84326 12.6805 4.94889L13.4699 7.53092ZM0.26334 8.14599C0.238493 8.03837 0.305598 7.93097 0.413224 7.90613L4.3107 7.00632C4.41833 6.98148 4.52572 7.04858 4.55057 7.15621L4.77552 8.13058L3.21653 8.4905L4.09384 12.2905C4.14353 12.5058 4.00932 12.7206 3.79407 12.7703L3.40432 12.8603C3.18907 12.9099 2.97429 12.7757 2.92459 12.5605L2.04728 8.76044L0.488291 9.12036L0.26334 8.14599Z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="var(--text)"/>
<path
d="M8.08151 11.5084L8.24216 11.3038L9.33813 9.90752L10.9854 10.5687L11.2269 10.6656L11.3569 10.4403L11.9226 9.4605L11.403 9.1605L10.9674 9.91497L9.35283 9.26689C9.22909 9.21722 9.08742 9.25518 9.00509 9.36006L7.93085 10.7286L7.17638 10.293L6.87638 10.8126L7.85618 11.3783L8.08151 11.5084Z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="var(--text)"/>
</g>
<rect
x="1.375"
y="0.5"
width="15"
height="15"
rx="2.5"
stroke="#442F20"
stroke-opacity="0.15"/>
<defs>
<clipPath id="clip0_7190_3525">
<rect
x="0.875"
width="16"
height="16"
rx="3"
fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

1311
res/js/anime.es.js Normal file
View file

File diff suppressed because it is too large Load diff

43
res/js/hrt.js Normal file
View file

@ -0,0 +1,43 @@
/*
Also known as HTML Replacement Tool.
Copyright (c) TAUTEN.net 2024.
Code licensed under the AGPL3.0-only license.
Refer to the /LICENSE file. <https://codeberg.org/tauten/portal>
*/
const parser = new DOMParser(), parseDocument = text => {
return parser.parseFromString(text, "text/html");
}
class hrt {
retrieve(url, cache) {
return new Promise((resolve, reject) => {
fetch(url,{
cache: cache ? "force-cache" : "no-cache"
})
.catch(reason => {
reject(new Error(reason));
})
.then(async response => {
return resolve(await response.text());
});
})
}
save() {
}
takeover(element) {
element.addEventListenner("click", event => {
event.preventDefaults();
})
}
open() {
}
}
export default new hrt;

4
res/js/main.js Normal file
View file

@ -0,0 +1,4 @@
import hrt from "./hrt.js";
import * as mascot from "./mascotAnim.js";
window.hrt = hrt

94
res/js/mascotAnim.js Normal file
View file

@ -0,0 +1,94 @@
import anime from "./anime.es.js"
function sleep(delay) {
return new Promise(resolve => {
setTimeout(resolve, delay);
});
}
const svg = document.querySelector("header svg"),
mascot = svg.querySelector("#mascot"),
eyesGroup = mascot.querySelector("#eyes"),
logotype = svg.querySelector("#logotype"),
letters = logotype.querySelectorAll("path");
function switchEyes(name) {
const currentEyes = eyesGroup.querySelector(`.show`),
targetEyes = eyesGroup.querySelector(`#${name}`);
currentEyes.classList.remove("show");
targetEyes.classList.add("show");
}
const lettersAnim = anime({
targets: letters,
autoplay: false,
keyframes: [
{
scaleY: 0.5,
duration: 100,
easing: "easeOutQuad",
},
{
scaleY: 1.1,
duration: 100,
easing: "easeOutQuad",
},
{
scaleY: 1,
duration: 500,
}
],
delay: anime.stagger(30, {from: "center", start: 600}),
}),
mascotAnim = anime({
autoplay: true,
targets: mascot,
begin: async () => {
lettersAnim.restart();
await sleep(590);
switchEyes("close");
await sleep(200);
switchEyes("open");
},
keyframes: [
{
translateY: 0,
scaleX: 1.2,
scaleY: 0.5,
duration: 100,
easing: "easeInQuad",
},
{
translateY: -24,
scaleX: 1,
scaleY: 1,
easing: "easeOutQuad",
duration: 240,
},
{
translateY: 6,
scaleX: 0.8,
scaleY: 1.1,
easing: "easeInQuad",
duration: 340,
begin: null
},
{
scaleX: 1.2,
scaleY: 0.5,
duration: 100,
easing: "easeOutQuad",
},
{
scaleX: 1,
scaleY: 1,
translateY: 0,
duration: 600,
}
]
});
console.log(mascotAnim)
let mousedownInterval = setInterval(null);
mascot.addEventListener("click", mascotAnim.play);

152
res/scss/style.css Normal file
View file

@ -0,0 +1,152 @@
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
* {
-webkit-tap-highlight-color: transparent;
}
::-moz-selection {
background-color: var(--accent);
color: #FFFCFA;
}
::selection {
background-color: var(--accent);
color: #FFFCFA;
}
html {
--surface: #FFFCFA;
--text: #442F20;
--accent: #E2782B;
}
@media (prefers-color-scheme: dark) {
html {
--surface: #28201A;
--text: #FEEEE3;
--accent: #FAAC74;
}
}
body, html {
height: 100%;
}
body {
background-color: var(--surface);
color: var(--text);
font-family: "Space Mono", monospace;
max-width: 48rem;
margin: auto;
display: flex;
}
main {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1em;
}
main > * {
width: -moz-fit-content;
width: fit-content;
}
@media (min-width: 32em) {
main {
font-size: 1.25em;
}
}
header svg {
height: 6.25em;
overflow: visible;
}
header svg path {
fill: currentColor;
}
header #mascot {
pointer-events: bounding-box;
cursor: pointer;
transform-origin: 48px 30px;
}
header #mascot:not(:active) {
transition: opacity 0.32s;
}
header #mascot:active {
opacity: 0.6;
}
header #logotype path {
transform-origin: 48px 48px;
}
header #eyes > *:not(.show) {
opacity: 0;
}
a {
color: var(--accent);
}
a:not(:active) {
transition: opacity 0.08s;
}
a:active {
opacity: 0.4;
color: var(--accent);
transform: translateY(0.0625em);
}
nav {
max-width: 20em;
display: flex;
flex-wrap: wrap;
justify-content: center;
-moz-column-gap: 0.5em;
column-gap: 0.5em;
row-gap: 0.2em;
}
nav a {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: inherit;
text-decoration-color: transparent;
}
nav a::before, nav a::after {
--factor: 0;
display: inline-block;
transform: translateX(calc(var(--translation) * var(--factor)));
transition: transform 0.16s cubic-bezier(0.075, 0.82, 0.165, 1.6);
}
nav a::before {
content: "[";
margin-right: 0.25em;
--translation: -0.3em;
}
nav a::after {
content: "]";
margin-left: 0.25em;
--translation: 0.3em;
}
nav a:hover {
color: var(--accent);
}
nav a:hover::before, nav a:hover::after {
--factor: 1;
}
footer {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
opacity: 0.5;
}
footer span {
font-size: 0.625em;
}
footer span::before, footer span::after {
content: "~";
margin: 0.5em;
}
p {
line-height: 140%;
}/*# sourceMappingURL=style.css.map */

1
res/scss/style.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAQ,iHAAA;AAER;EACE,wCAAA;ACAF;;ADGA;EACE,+BAAA;EACA,cAAA;ACAF;;ADFA;EACE,+BAAA;EACA,cAAA;ACAF;;ADGA;EACE,kBAAA;EACA,eAAA;EACA,iBAAA;ACAF;ADEE;EALF;IAMI,kBAAA;IACA,eAAA;IACA,iBAAA;ECCF;AACF;;ADEA;EACE,YAAA;ACCF;;ADEA;EACE,gCAAA;EACA,kBAAA;EACA,oCAAA;EAEA,gBAAA;EACA,YAAA;EACA,aAAA;ACAF;;ADGA;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,YAAA;ACAF;ADEE;EACE,uBAAA;EAAA,kBAAA;ACAJ;ADGE;EAXF;IAYI,iBAAA;ECAF;AACF;;ADIE;EACE,cAAA;EACA,iBAAA;ACDJ;ADGI;EACE,kBAAA;ACDN;ADKE;EACE,4BAAA;EACA,eAAA;EACA,2BAAA;ACHJ;ADKI;EACE,yBAAA;ACHN;ADMI;EACE,YAAA;ACJN;ADQE;EACE,2BAAA;ACNJ;ADUI;EACE,UAAA;ACRN;;ADaA;EACE,oBAAA;ACVF;ADYE;EACE,yBAAA;ACVJ;ADaE;EACE,YAAA;EACA,oBAAA;EACA,+BAAA;ACXJ;;ADeA;EACE,eAAA;EACA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,sBAAA;OAAA,iBAAA;EACA,cAAA;ACZF;ADcE;EACE,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,cAAA;EACA,kCAAA;ACZJ;ADcI;EACE,WAAA;EACA,qBAAA;EACA,+DAAA;EACA,iEAAA;ACZN;ADeI;EACE,YAAA;EACA,oBAAA;EACA,qBAAA;ACbN;ADgBI;EACE,YAAA;EACA,mBAAA;EACA,oBAAA;ACdN;ADiBI;EACE,oBAAA;ACfN;ADiBM;EACE,WAAA;ACfR;;ADqBA;EACE,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,uBAAA;EACA,YAAA;AClBF;ADmBE;EACE,kBAAA;ACjBJ;ADmBI;EACE,YAAA;EACA,aAAA;ACjBN;;ADsBA;EACE,iBAAA;ACnBF","file":"style.css"}

163
res/scss/style.scss Normal file
View file

@ -0,0 +1,163 @@
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
* {
-webkit-tap-highlight-color: transparent;
}
::selection {
background-color: var(--accent);
color: #FFFCFA;
}
html {
--surface: #FFFCFA;
--text: #442F20;
--accent: #E2782B;
@media (prefers-color-scheme: dark) {
--surface: #28201A;
--text: #FEEEE3;
--accent: #FAAC74;
}
}
body, html {
height: 100%;
}
body {
background-color: var(--surface);
color: var(--text);
font-family: "Space Mono", monospace;
max-width: 48rem;
margin: auto;
display: flex;
}
main {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1em;
> * {
width: fit-content;
}
@media (min-width: 32em) {
font-size: 1.25em;
}
}
header {
svg {
height: 6.25em;
overflow:visible;
path {
fill: currentColor;
}
}
#mascot {
pointer-events: bounding-box;
cursor: pointer;
transform-origin: 48px 30px;
&:not(:active) {
transition: opacity 0.32s;
}
&:active {
opacity: 0.6;
}
}
#logotype path {
transform-origin: 48px 48px;
}
#eyes {
> *:not(.show) {
opacity: 0;
}
}
}
a {
color: var(--accent);
&:not(:active) {
transition: opacity 0.08s;
}
&:active {
opacity: 0.4;
color: var(--accent);
transform: translateY(0.0625em);
}
}
nav {
max-width: 20em;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 0.5em;
row-gap: 0.2em;
a {
user-select: none;
color: inherit;
text-decoration-color: transparent;
&::before, &::after {
--factor: 0;
display: inline-block;
transform: translateX(calc(var(--translation) * var(--factor)));
transition: transform 0.16s cubic-bezier(0.075, 0.82, 0.165, 1.6);
}
&::before {
content: "[";
margin-right: 0.25em;
--translation: -0.3em;
}
&::after {
content: "]";
margin-left: 0.25em;
--translation: 0.3em;
}
&:hover {
color: var(--accent);
&::before, &::after {
--factor: 1;
}
}
}
}
footer {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
opacity: 0.5;
span {
font-size: 0.625em;
&::before, &::after {
content: "~";
margin: 0.5em;
}
}
}
p {
line-height: 140%;
}