MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rebrand

Browse source
This commit is contained in:
MeowcaTheoRange 2024-01-23 15:04:38 -06:00
parent accf418bbf
commit 3b43e6bc6b
22 changed files with 209 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
views/assets/88x31/esoteric/gnu-linux.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 550 B

BIN
views/assets/88x31/esoteric/html.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
views/assets/88x31/esoteric/vivaldi.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
views/assets/88x31/esoteric/xkcd.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
views/assets/88x31/freeplay_floof_company.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
views/assets/88x31/invoxiplaygames_uk.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
views/assets/88x31/ioletsgo_gay.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
views/assets/88x31/mae_wtf.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
views/assets/88x31/micro_pages_gay.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
views/assets/88x31/sneexy_pages_gay.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 690 B

BIN
views/assets/88x31/whois_slipfox_xyz.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
views/assets/bg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 260 KiB

4
views/branding/index.html
View file

@ -7,10 +7,6 @@
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 0, 0%;
}
.chip {
background-color: var(--mainColor);
display: inline-block;

6
views/domain/index.html
View file

@ -6,11 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 15, 100%;
}
</style>
<style></style>
</head>
<body>
<$ loader.html $>

52
views/index.html
View file

@ -7,23 +7,62 @@
<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>
:root {
--base-color: 195, 100%;
.header {
width: 100%;
aspect-ratio: 3 / 1;
background: url("/assets/bg.jpg");
background-position: center;
background-size: cover;
text-align: center;
color: white;
text-shadow: 0 0.1em 0.5em black;
box-shadow: 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;
}
</style>
</head>
<body>
<header>
<section>
<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>
<h2>Welcome! 👋</h2>
<h1>
Hey!
<span class="rs">👋</span>
</h1>
<section id="data_whoami">
<p>
I'm...
@ -48,16 +87,19 @@
></small
>
</p>
<button id="buttonflags" disabled>Cool Flags</button>
</section>
<section class="horizontal">
<section id="status"></section>
<section id="about"></section>
<button id="buttonflags" disabled>Cool Flags</button>
</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(

6
views/links/index.html
View file

@ -6,11 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 270, 100%;
}
</style>
<style></style>
</head>
<body>
<$ loader.html $>

6
views/projects/index.html
View file

@ -7,11 +7,7 @@
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/windows.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 15, 100%;
}
</style>
<style></style>
</head>
<body>
<$ loader.html $>

3
views/scripts/accessibility.js
View file

@ -13,7 +13,7 @@ var accBase;
var propagateStyles = propagateStyles ?? null;
const FONTS = [
["Lexend Deca"],
["Lexend Deca", ""],
["Renogare"],
["OpenDyslexic"],
// ["Mojangles", "Minecraft"],
@ -265,6 +265,7 @@ function changeWidth(width) {
function changeFont(font) {
document.documentElement.style.setProperty("--font-family", font);
document.documentElement.style.setProperty("--header-font-family", font);
}
const baseColor = getComputedStyle(document.documentElement)

106
views/scripts/roll_buttons.js Normal file
View file

@ -0,0 +1,106 @@
const buttonroll = document.getElementById("buttonroll");
const buttons = [
{
href: "https://freeplay.floof.company/",
img: "/assets/88x31/freeplay_floof_company.png",
alt: "freeplay.floof.company",
},
{
href: "https://invoxiplaygames.uk/",
img: "/assets/88x31/invoxiplaygames_uk.png",
alt: "invoxiplaygames.uk",
},
{
href: "https://ioletsgo.gay/",
img: "/assets/88x31/ioletsgo_gay.gif",
alt: "ioletsgo.gay",
},
{
href: "https://mae.wtf/",
img: "/assets/88x31/mae_wtf.png",
alt: "mae.wtf",
},
{
href: "https://micro.pages.gay/",
img: "/assets/88x31/micro_pages_gay.png",
alt: "micro.pages.gay",
},
{
href: "https://sneexy.pages.gay/",
img: "/assets/88x31/sneexy_pages_gay.gif",
alt: "sneexy.pages.gay",
},
{
href: "https://whois.slipfox.xyz/",
img: "/assets/88x31/whois_slipfox_xyz.png",
alt: "whois.slipfox.xyz",
},
{
href: "https://ultramarine-linux.org/",
img: "/assets/88x31/esoteric/gnu-linux.gif",
alt: "Made on GNU/Linux",
},
{
href: "https://abtmtr.link/projects/item/normalize",
img: "/assets/88x31/esoteric/html.gif",
alt: "<HTML> - Learn it today!",
},
{
href: "https://vivaldi.com",
img: "/assets/88x31/esoteric/vivaldi.gif",
alt: "I use Vivaldi",
},
{
href: "https://channelstore.roku.com/details/7da3fa0c2209746730df8a4e21e83b02",
img: "/assets/88x31/esoteric/xkcd.gif",
alt: "xkcd",
},
];
function initializeButtons() {
buttonroll.innerHTML += buttons.reduce(
(pv, cv) =>
pv +
`<a href="${cv.href}" target="_blank"><img alt="${cv.alt}" title="${cv.alt}" src="${cv.img}"></a>`,
""
);
}
buttonroll.hidden = false;
overflowButtons();
initializeButtons();
overflowButtons();
overflowButtons();
function overflowButtons() {
buttonroll.innerHTML += buttons.reduce(
(pv, cv) =>
pv +
`<a href="${cv.href}" target="_blank" class="overflow"><img alt="${cv.alt}" title="${cv.alt}" src="${cv.img}"></a>`,
""
);
}
let isHovering = false;
buttonroll.addEventListener("mouseenter", () => (isHovering = true));
buttonroll.addEventListener("mouseleave", () => (isHovering = false));
let curAnim;
let endTime = performance.now();
let unit = 88;
let gap = 8;
let scrollX = (unit + gap) * buttons.length * 2;
let speed = 50;
let max = (unit + gap) * buttons.length;
function scrollButtons(startTime) {
let deltaTime = (startTime - endTime) / 1000;
if (!isHovering) {
scrollX += speed * deltaTime;
} else scrollX = buttonroll.scrollLeft;
buttonroll.scrollLeft = (scrollX % max) + max;
endTime = startTime;
curAnim = window.requestAnimationFrame(scrollButtons);
}
curAnim = window.requestAnimationFrame(scrollButtons);

6
views/site/index.html
View file

@ -6,11 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 125, 100%;
}
</style>
<style></style>
</head>
<body>
<header>

27
views/styles/buttonroll.css Normal file
View file

@ -0,0 +1,27 @@
#buttonroll {
display: flex;
align-items: center;
overflow-x: scroll;
gap: 8px;
max-width: 50em;
margin: auto;
}
#buttonroll img {
display: inline-block;
width: 88px;
height: 31px;
max-width: none;
}
/* #buttonroll .overflow {
opacity: 0.5;
} */
#buttonroll::-webkit-scrollbar {
display: none;
}
#buttonroll {
-ms-overflow-style: none;
scrollbar-width: none;
}

20
views/styles/style.css
View file

@ -19,7 +19,12 @@
src: url("/assets/fonts/OpenDyslexic/Regular.otf");
}
:root {
--header-font-family: "Renogare";
--header-font-weight: 400;
--font-family: "Lexend Deca";
--border-width: calc(2rem / 16);
--base-color: 311, 32%;
--border-radius: calc(4rem / 16);
}
#accessibility {
@ -61,3 +66,18 @@ html.base .nav {
html.base .nav p a {
text-align: start;
}
h1,
h2 {
border-bottom: var(--border-width) var(--border-style) var(--border-color);
padding-bottom: 0.25em;
}
h1 a,
h2 a {
text-decoration: none !important;
}
.rs {
float: inline-end;
}