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

Branding, page width accessibility

Browse source
This commit is contained in:
MeowcaTheoRange 2023-11-26 01:37:29 -06:00
parent de4e109bca
commit 5187c3df9a
5 changed files with 204 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
embeds/nav.html
View file

@ -1,7 +1,8 @@
<section> <section>
<p> <p>
<a href="/">Home</a> - <a href="/links/">Links</a> - <a href="/">Home</a> - <a href="/branding/">Branding</a> -
<a href="/projects/">Projects</a> - <a href="/about/">About</a> - <a href="/links/">Links</a> - <a href="/projects/">Projects</a> -
<a href="/about/">About</a> -
<a href="/site/">Site Information</a> <a href="/site/">Site Information</a>
</p> </p>
</section> </section>

143
views/branding/index.html Normal file
View file

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MeowcaTheoRange</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>
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
--base-scale: 16px;
--background-color: hsl(0, 0%, 15%);
--color: hsl(0, 0%, 85%);
--accent-color: hsl(0, 0%, 50%);
--accent-color-fg: hsl(0, 0%, 95%);
--font-family: "Lexend Deca";
--document-width: 40em;
}
.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 $>
</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, my
name <strong>Iszac</strong> or the moniker <strong>Theo Range</strong>
<!-- -->will work just as well.
</p>
<p class="hv">
If you are a local organization and would like to refer to me by my
legal name, please<!-- -->
<a href="/links" class="inline">contact me</a>
<!-- -->and we can probably figure something out.<br />Local means
<strong>within Minnesota</strong>, by the way.
</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/windows.js"></script>
<script src="/scripts/accessibility.js"></script>
<script src="./scripts/data_get_member.js"></script>
</body>
</html>

15
views/branding/scripts/data_get_member.js Normal file
View file

@ -0,0 +1,15 @@
const characters = document.getElementById("characters");
fetch(
"https://pronouns.cc/api/v1/users/MeowcaTheoRange/members/CurrentCharacter"
)
.then((x) => x.json())
.then((member) => {
characters.querySelector(
".characterName"
).innerHTML = `<a href="${member.bio}" target="_blank">${member.display_name}</a>`;
characters.querySelector(".characterImage").src = member.links[0];
characters.querySelector(".pronouns").innerHTML = member.pronouns
.map((pronoun) => pronoun.pronouns.split("/")[0])
.join("/");
characters.style.display = null;
});

42
views/scripts/accessibility.js
View file

@ -1,10 +1,11 @@
var accScale; var accScale;
var accWidth;
var accBase; var accBase;
function createAccessibilityNodes() { function createAccessibilityNodes() {
document.querySelector("#accessibility").innerHTML = `<fieldset> document.querySelector("#accessibility").innerHTML = `<fieldset>
<legend>Accessibility controls</legend> <legend>Accessibility controls</legend>
<label for="size_width"> <label for="acc-scale">
<input <input
id="acc-scale" id="acc-scale"
type="number" type="number"
@ -14,6 +15,16 @@ function createAccessibilityNodes() {
value="16" value="16"
/> />
UI scale</label><br /> UI scale</label><br />
<label for="acc-width">
<input
id="acc-width"
type="number"
style="width: 8ch"
min="30"
max="100"
value="40"
/>
Page width</label><br />
<label for="acc-base" class="checkbox"> <label for="acc-base" class="checkbox">
<input id="acc-base" type="checkbox" id="acc-base" /> <input id="acc-base" type="checkbox" id="acc-base" />
<span class="checkbox">✓</span> <span class="checkbox">✓</span>
@ -23,6 +34,7 @@ function createAccessibilityNodes() {
document.querySelector("#accessibility").hidden = false; document.querySelector("#accessibility").hidden = false;
accScale = document.getElementById("acc-scale"); accScale = document.getElementById("acc-scale");
accWidth = document.getElementById("acc-width");
accBase = document.getElementById("acc-base"); accBase = document.getElementById("acc-base");
accScale.addEventListener("change", function (e) { accScale.addEventListener("change", function (e) {
@ -30,6 +42,11 @@ function createAccessibilityNodes() {
changeScale(e.target.value); changeScale(e.target.value);
}); });
accWidth.addEventListener("change", function (e) {
window.localStorage.setItem("acc-width", e.target.value);
changeWidth(e.target.value);
});
accBase.addEventListener("change", function (e) { accBase.addEventListener("change", function (e) {
window.localStorage.setItem("acc-base", e.target.checked); window.localStorage.setItem("acc-base", e.target.checked);
window.location.reload(); window.location.reload();
@ -46,9 +63,23 @@ let prevBase; // previous base, for reload check
function initializeChanges(_, loading) { function initializeChanges(_, loading) {
if (window.frameElement == null) createAccessibilityNodes(); if (window.frameElement == null) createAccessibilityNodes();
const scale = window.localStorage.getItem("acc-scale"); let scale = window.localStorage.getItem("acc-scale");
const base = window.localStorage.getItem("acc-base"); if (scale == null) {
window.localStorage.setItem("acc-scale", 16);
scale = window.localStorage.getItem("acc-scale");
}
let width = window.localStorage.getItem("acc-width");
if (width == null) {
window.localStorage.setItem("acc-width", 40);
width = window.localStorage.getItem("acc-width");
}
let base = window.localStorage.getItem("acc-base");
if (base == null) {
window.localStorage.setItem("acc-base", false);
base = window.localStorage.getItem("acc-base");
}
changeScale(scale); changeScale(scale);
changeWidth(width);
if (loading) { if (loading) {
prevBase = base; prevBase = base;
@ -56,6 +87,7 @@ function initializeChanges(_, loading) {
} else if (base != prevBase) window.location.reload(); } else if (base != prevBase) window.location.reload();
if (scale != null && accScale != null) accScale.value = scale; if (scale != null && accScale != null) accScale.value = scale;
if (width != null && accWidth != null) accWidth.value = width;
if (base != null && accBase != null) accBase.checked = base === "true"; if (base != null && accBase != null) accBase.checked = base === "true";
} }
@ -63,6 +95,10 @@ function changeScale(scale) {
document.documentElement.style.setProperty("--base-scale", scale + "px"); document.documentElement.style.setProperty("--base-scale", scale + "px");
} }
function changeWidth(width) {
document.documentElement.style.setProperty("--document-width", width + "em");
}
function changeBase(base) { function changeBase(base) {
if (base) document.documentElement.classList.add("base"); if (base) document.documentElement.classList.add("base");
else document.documentElement.classList.remove("base"); else document.documentElement.classList.remove("base");

4
views/styles/style.css
View file

@ -19,3 +19,7 @@
* { * {
transition: background-color 0.25s, color 0.25s, opacity 0.25s; transition: background-color 0.25s, color 0.25s, opacity 0.25s;
} }
img {
max-width: 100%;
}