138 lines
3.7 KiB
HTML
Executable file
138 lines
3.7 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>abtmtr.link</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="/styles/normal.css" />
|
|
<link rel="stylesheet" href="/styles/windows.css" />
|
|
<link rel="stylesheet" href="/styles/style.css" />
|
|
<link rel="stylesheet" href="./styles/buttonroll.css" />
|
|
<style>
|
|
.header {
|
|
width: 100%;
|
|
aspect-ratio: 3 / 1;
|
|
background: url("/assets/bg.jpg");
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
text-align: center;
|
|
color: white;
|
|
text-shadow: 0 0.1em 0.5em black;
|
|
box-shadow: inset 0 0 1em var(--accent-color);
|
|
font-size: 1.5em;
|
|
border-radius: 2rem;
|
|
|
|
overflow: hidden;
|
|
|
|
display: grid;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
margin: 0.5em 0;
|
|
margin-bottom: 1em;
|
|
user-select: none;
|
|
}
|
|
.header h1 {
|
|
line-height: 1em;
|
|
margin-bottom: 0.35em;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.horizontal {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
gap: 1em;
|
|
}
|
|
@keyframes wave {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
20% {
|
|
transform: rotate(-15deg);
|
|
}
|
|
40% {
|
|
transform: rotate(15deg);
|
|
}
|
|
60% {
|
|
transform: rotate(-15deg);
|
|
}
|
|
80% {
|
|
transform: rotate(15deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
.waving {
|
|
transform-origin: 60% 60%;
|
|
cursor: none;
|
|
}
|
|
.waving:hover {
|
|
animation: infinite wave 0.5s;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<section class="header" title="Image attribution: Celeste">
|
|
<div>
|
|
<small>⸻ welcome to ⸻</small>
|
|
<h1>ABTMTR.LINK</h1>
|
|
</div>
|
|
</section>
|
|
<$ nav.html $>
|
|
<section id="accessibility" hidden></section>
|
|
<div id="buttonroll" hidden></div>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<h1>
|
|
Hey!
|
|
<span class="rs waving">👋</span>
|
|
</h1>
|
|
<section id="data_whoami">
|
|
<p>
|
|
I'm...
|
|
<small
|
|
><a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
|
|
>not loading</a
|
|
>.</small
|
|
>
|
|
</p>
|
|
</section>
|
|
<p>
|
|
I'm a web developer, Fediverse enthusiast, and compulsory Minnesotan.
|
|
</p>
|
|
<p>I run this domain and all of the services on it!</p>
|
|
<p id="no-fetchy" style="display: none">
|
|
For me, it is <b id="time">12:00 PM</b> on a
|
|
<b id="weekday">Sunday</b>. <b id="timezone">(UTC-0)</b><br />
|
|
<small
|
|
>data locally fetched from
|
|
<a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
|
|
>pronouns.cc</a
|
|
></small
|
|
>
|
|
</p>
|
|
<button id="buttonflags" disabled>Cool Flags</button>
|
|
</section>
|
|
<section class="horizontal">
|
|
<section id="status"></section>
|
|
<section id="about"></section>
|
|
</section>
|
|
<section id="fields"></section>
|
|
</main>
|
|
<div id="WindowHolder"></div>
|
|
<script src="/scripts/windows.js"></script>
|
|
<script src="/scripts/accessibility.js"></script>
|
|
<script src="./scripts/data_get_whoami.js"></script>
|
|
<script src="./scripts/roll_buttons.js"></script>
|
|
<script src="/projects/item/hex/scripts/index.js"></script>
|
|
<script>
|
|
window.manager = new WindowManager(
|
|
document.getElementById("WindowHolder")
|
|
);
|
|
</script>
|
|
</body>
|
|
</html>
|