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>
|
||||
<p>
|
||||
<a href="/">Home</a> - <a href="/links/">Links</a> -
|
||||
<a href="/projects/">Projects</a> - <a href="/about/">About</a> -
|
||||
<a href="/">Home</a> - <a href="/branding/">Branding</a> -
|
||||
<a href="/links/">Links</a> - <a href="/projects/">Projects</a> -
|
||||
<a href="/about/">About</a> -
|
||||
<a href="/site/">Site Information</a>
|
||||
</p>
|
||||
</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 accWidth;
|
||||
var accBase;
|
||||
|
||||
function createAccessibilityNodes() {
|
||||
document.querySelector("#accessibility").innerHTML = `<fieldset>
|
||||
<legend>Accessibility controls</legend>
|
||||
<label for="size_width">
|
||||
<label for="acc-scale">
|
||||
<input
|
||||
id="acc-scale"
|
||||
type="number"
|
||||
|
|
@ -14,6 +15,16 @@ function createAccessibilityNodes() {
|
|||
value="16"
|
||||
/>
|
||||
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">
|
||||
<input id="acc-base" type="checkbox" id="acc-base" />
|
||||
<span class="checkbox">✓</span>
|
||||
|
|
@ -23,6 +34,7 @@ function createAccessibilityNodes() {
|
|||
document.querySelector("#accessibility").hidden = false;
|
||||
|
||||
accScale = document.getElementById("acc-scale");
|
||||
accWidth = document.getElementById("acc-width");
|
||||
accBase = document.getElementById("acc-base");
|
||||
|
||||
accScale.addEventListener("change", function (e) {
|
||||
|
|
@ -30,6 +42,11 @@ function createAccessibilityNodes() {
|
|||
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) {
|
||||
window.localStorage.setItem("acc-base", e.target.checked);
|
||||
window.location.reload();
|
||||
|
|
@ -46,9 +63,23 @@ let prevBase; // previous base, for reload check
|
|||
function initializeChanges(_, loading) {
|
||||
if (window.frameElement == null) createAccessibilityNodes();
|
||||
|
||||
const scale = window.localStorage.getItem("acc-scale");
|
||||
const base = window.localStorage.getItem("acc-base");
|
||||
let scale = window.localStorage.getItem("acc-scale");
|
||||
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);
|
||||
changeWidth(width);
|
||||
|
||||
if (loading) {
|
||||
prevBase = base;
|
||||
|
|
@ -56,6 +87,7 @@ function initializeChanges(_, loading) {
|
|||
} else if (base != prevBase) window.location.reload();
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
|
|
@ -63,6 +95,10 @@ function changeScale(scale) {
|
|||
document.documentElement.style.setProperty("--base-scale", scale + "px");
|
||||
}
|
||||
|
||||
function changeWidth(width) {
|
||||
document.documentElement.style.setProperty("--document-width", width + "em");
|
||||
}
|
||||
|
||||
function changeBase(base) {
|
||||
if (base) document.documentElement.classList.add("base");
|
||||
else document.documentElement.classList.remove("base");
|
||||
|
|
|
|||
|
|
@ -19,3 +19,7 @@
|
|||
* {
|
||||
transition: background-color 0.25s, color 0.25s, opacity 0.25s;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue