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

Clean up site...

Browse source
This commit is contained in:
MeowcaTheoRange 2024-01-23 16:10:54 -06:00
parent 3b43e6bc6b
commit 92c481343b
8 changed files with 18 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
embeds/nav.html
View file

@ -1,7 +1,7 @@
<section class="nav" role="navigation" aria-label="Site navigation"> <section class="nav" role="navigation" aria-label="Site navigation">
<p> <p>
<a href="/">Home</a> <a href="/branding/">Branding</a> <a href="/">Home</a>
<a href="/site/">Site Information</a> <span>Branding (WIP...)</span>
</p> </p>
<p> <p>
<a href="/projects/">Projects</a> <a href="/projects/">Projects</a>

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

123
views/branding/index.html
View file

@ -1,123 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Branding - 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/style.css" />
<style>
.chip {
background-color: var(--mainColor);
display: inline-block;
width: 12em;
aspect-ratio: 1/1;
padding: 1em;
vertical-align: top;
margin: 0.5em;
}
</style>
</head>
<body>
<header>
<section>
<h1>Branding</h1>
</section>
<$ nav.html $>
<section id="accessibility" hidden></section>
</header>
<main>
<section>
<p>
I don't really have strict branding guidelines, but I do have a few
important rules if you would like to refer to me in a professional or
formal context.
</p>
</section>
<section>
<h2>Name</h2>
<p>
If you would like to refer to me online, you'll usually be able to use
my username <b>MeowcaTheoRange</b>. If that's too long, you can always
shorten it to <strong>MTR</strong>.
</p>
<p>
Please make sure to keep the styling. It's <b>MeowcaTheoRange</b>, not<!-- -->
<strong>MeowcatHeOrange</strong>, <strong>MeowcaTheOrange</strong>,
nor <strong>Meowca Theo Range</strong>.
</p>
<p class="hv">
The styling <strong>meowcatheorange</strong> is OK if necessary.
</p>
<p>
If you would like to refer to me in a more professional context,
<a href="https://pronouns.cc/@MeowcaTheoRange" target="_blank"
>check my pronouns.cc page for my preferred names.</a
>
</p>
</section>
<section id="characters" style="display: none">
<h2>Characters</h2>
<p>
If you would like to use a character to represent me, I'd prefer you
use <b class="characterName"></b>
<small>(<span class="pronouns"></span>)</small>.
</p>
<img class="characterImage" />
</section>
<section>
<h2>Colors</h2>
<h3>Main Colors</h3>
<p>
If you would like to use colors to refer to me, whether that be the
primary color on a card, or the color of my name, I recommend you use
these colors:
</p>
<div style="--mainColor: #00c0ff; color: #000000" class="chip">
<b>Iszac Blue</b><br /><small>Primary</small>
<p>#00c0ff</p>
</div>
<div style="--mainColor: #ff4000; color: #000000" class="chip">
<b>Rocco Orange</b><br /><small>Primary Negative</small>
<p>#ff4000</p>
</div>
<p>
<b>Iszac Blue</b> is literally <strong>Rocco Orange</strong> but
inverted. This color is named after <strong>Iszac</strong>.<br />If
you were to use any of these colors to represnt me as a
<strong>person</strong>, use this one.
</p>
<p>
<b>Rocco Orange</b> is my favourite color orange, but now more red.
The name comes from my character <strong>Rocco</strong>.<br />If you
were to use any of these colors to represnt me as an
<strong>entity</strong>, use this one whenever possible.
</p>
<h3>Sub Colors</h3>
<p>
If you need filler colors for something that refers to me, feel free
to use these extra colors:
</p>
<div style="--mainColor: #8000ff; color: #000000" class="chip">
<b>Grape Soda</b><br /><small>Secondary</small>
<p>#8000ff</p>
</div>
<div style="--mainColor: #80ff00; color: #000000" class="chip">
<b>Avalonian Waste</b><br /><small>Secondary Negative</small>
<p>#80ff00</p>
</div>
<p>
<b>Grape Soda</b> represents my love for grape soda.<br />My favourite
is Fanta Grape. :]
</p>
<p>
<b>Avalonian Waste</b> is also literally
<strong>Grape Soda</strong> but inverted. This represents some old
lore that I'm still screwing with.
</p>
</section>
</main>
<section id="accessibility" hidden></section>
<script src="/scripts/accessibility.js"></script>
</body>
</html>

22
views/branding/scripts/data_get_member.js
View file

@ -1,22 +0,0 @@
const characters = document.getElementById("characters");
const CURRENT_CHARACTER = "meowcatheorange/iszac";
fetch_ask(`https://beta.trollcall.xyz/api/troll/${CURRENT_CHARACTER}`)
.then((x) => x.json())
.then((char) => {
var name = char.name
.map((string) => {
string = string[0].toUpperCase() + string.slice(1);
return string;
})
.join(" ");
characters.querySelector(
".characterName"
).innerHTML = `<a href="https://beta.trollcall.xyz/troll/${CURRENT_CHARACTER}" target="_blank">${name}</a>`;
characters.querySelector(".characterImage").src = char.images[0];
characters.querySelector(".pronouns").innerHTML = char.pronouns
.map((pronoun) => pronoun[0])
.join("/");
characters.style.display = null;
});

5
views/scripts/roll_buttons.js
View file

@ -1,5 +1,10 @@
const buttonroll = document.getElementById("buttonroll"); const buttonroll = document.getElementById("buttonroll");
const buttons = [ const buttons = [
{
href: "https://arimelody.me/",
img: "/assets/88x31/arimelody_me.gif",
alt: "arimelody.me",
},
{ {
href: "https://freeplay.floof.company/", href: "https://freeplay.floof.company/",
img: "/assets/88x31/freeplay_floof_company.png", img: "/assets/88x31/freeplay_floof_company.png",

50
views/site/index.html
View file

@ -1,50 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Site Information - 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/style.css" />
<style></style>
</head>
<body>
<header>
<section>
<h1>Site Information</h1>
</section>
<$ nav.html $>
<section id="accessibility" hidden></section>
</header>
<main>
<section>
<h2>What happened to the previous site?</h2>
<p>
The previous site kinda sucked. It depended on client-side React for
the most basic of things, and was just overall kind of a mess of TSX
everywhere.
</p>
<p>
This site is represented semi-statically, which means there's nothing
new being generated on the backend.<br />
This site does not use React either, so everything the frontend runs
is vanilla JavaScript.
</p>
<h2>
What's with the <b>accessibility controls</b> on every page of the
site?
</h2>
<p>
Just because. If you want to make the text bigger or get rid of the
colors, you have that panel.
</p>
<h2>What font are you using for this site?</h2>
<p>
<b>Lexend Deca</b>, or your <b>system's default sans-serif font</b>,
depending on if you're using Base style.
</p>
</section>
</main>
<script src="/scripts/accessibility.js"></script>
</body>
</html>

7
views/styles/style.css
View file

@ -55,7 +55,7 @@
gap: 1em; gap: 1em;
} }
.nav p a { .nav p * {
text-align: center; text-align: center;
} }
@ -67,7 +67,10 @@ html.base .nav p a {
text-align: start; text-align: start;
} }
h1, h1 {
border-bottom: var(--border-width) var(--border-style) var(--border-color);
padding-bottom: 0em;
}
h2 { h2 {
border-bottom: var(--border-width) var(--border-style) var(--border-color); border-bottom: var(--border-width) var(--border-style) var(--border-color);
padding-bottom: 0.25em; padding-bottom: 0.25em;

6
views/styles/windows.css
View file

@ -27,6 +27,7 @@ div.window-object {
color: var(--accent-color-fg); color: var(--accent-color-fg);
--border-color: var(--color); --border-color: var(--color);
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);
resize: both; resize: both;
overflow: hidden; overflow: hidden;
padding: 0.25em; padding: 0.25em;
@ -47,6 +48,7 @@ html.base div.window-object {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--accent-color-fg); color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);
} }
@media (forced-colors: active) { @media (forced-colors: active) {
@ -108,6 +110,7 @@ div.window-object {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--accent-color-fg); color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);
} }
} }
@ -122,6 +125,7 @@ div.window-object {
background-color: var(--accent-color); background-color: var(--accent-color);
color: var(--accent-color-fg); color: var(--accent-color-fg);
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);
} }
} }
@ -217,6 +221,7 @@ div.window-object > div.window-manager > div > button {
margin-inline-start: 0.25em; margin-inline-start: 0.25em;
box-sizing: border-box; box-sizing: border-box;
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);
background-color: transparent; background-color: transparent;
color: currentColor; color: currentColor;
font-family: "Material Symbols Outlined"; font-family: "Material Symbols Outlined";
@ -231,6 +236,7 @@ div.window-object > iframe.window-content {
height: 100%; height: 100%;
width: 100%; width: 100%;
border: var(--border-width) var(--border-style) var(--border-color); border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
} }