Branding, page width accessibility
This commit is contained in:
parent
de4e109bca
commit
5187c3df9a
5 changed files with 204 additions and 5 deletions
|
@ -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
143
views/branding/index.html
Normal 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
15
views/branding/scripts/data_get_member.js
Normal 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;
|
||||||
|
});
|
|
@ -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");
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue