From 5187c3df9ae605ff6e480ecae49d47c28f21204a Mon Sep 17 00:00:00 2001 From: MeowcaTheoRange Date: Sun, 26 Nov 2023 01:37:29 -0600 Subject: [PATCH] Branding, page width accessibility --- embeds/nav.html | 5 +- views/branding/index.html | 143 ++++++++++++++++++++++ views/branding/scripts/data_get_member.js | 15 +++ views/scripts/accessibility.js | 42 ++++++- views/styles/style.css | 4 + 5 files changed, 204 insertions(+), 5 deletions(-) create mode 100644 views/branding/index.html create mode 100644 views/branding/scripts/data_get_member.js diff --git a/embeds/nav.html b/embeds/nav.html index de35173..adf447b 100644 --- a/embeds/nav.html +++ b/embeds/nav.html @@ -1,7 +1,8 @@

- Home - Links - - Projects - About - + Home - Branding - + Links - Projects - + About - Site Information

diff --git a/views/branding/index.html b/views/branding/index.html new file mode 100644 index 0000000..cc4457a --- /dev/null +++ b/views/branding/index.html @@ -0,0 +1,143 @@ + + + + + MeowcaTheoRange + + + + + + +
+
+

Branding

+
+ <$ nav.html $> +
+
+
+

+ 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. +

+
+
+

Name

+

+ If you would like to refer to me online, you'll usually be able to use + my username MeowcaTheoRange. If that's too long, you can always + shorten it to MTR. +

+

+ Please make sure to keep the styling. It's MeowcaTheoRange, not + MeowcatHeOrange, MeowcaTheOrange, + nor Meowca Theo Range. +

+

+ The styling meowcatheorange is OK if necessary. +

+

+ If you would like to refer to me in a more professional context, my + name Iszac or the moniker Theo Range + will work just as well. +

+

+ If you are a local organization and would like to refer to me by my + legal name, please + contact me + and we can probably figure something out.
Local means + within Minnesota, by the way. +

+
+ +
+

Colors

+

Main Colors

+

+ 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: +

+
+ Iszac Blue
Primary +

#00c0ff

+
+
+ Rocco Orange
Primary Negative +

#ff4000

+
+

+ Iszac Blue is literally Rocco Orange but + inverted. This color is named after Iszac.
If + you were to use any of these colors to represnt me as a + person, use this one. +

+

+ Rocco Orange is my favourite color orange, but now more red. + The name comes from my character Rocco.
If you + were to use any of these colors to represnt me as an + entity, use this one whenever possible. +

+

Sub Colors

+

+ If you need filler colors for something that refers to me, feel free + to use these extra colors: +

+
+ Grape Soda
Secondary +

#8000ff

+
+
+ Avalonian Waste
Secondary Negative +

#80ff00

+
+

+ Grape Soda represents my love for grape soda.
My favourite + is Fanta Grape. :] +

+

+ Avalonian Waste is also literally + Grape Soda but inverted. This represents some old + lore that I'm still screwing with. +

+
+
+ + + + + + diff --git a/views/branding/scripts/data_get_member.js b/views/branding/scripts/data_get_member.js new file mode 100644 index 0000000..fe07271 --- /dev/null +++ b/views/branding/scripts/data_get_member.js @@ -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 = `${member.display_name}`; + characters.querySelector(".characterImage").src = member.links[0]; + characters.querySelector(".pronouns").innerHTML = member.pronouns + .map((pronoun) => pronoun.pronouns.split("/")[0]) + .join("/"); + characters.style.display = null; + }); diff --git a/views/scripts/accessibility.js b/views/scripts/accessibility.js index 08f759c..594724d 100755 --- a/views/scripts/accessibility.js +++ b/views/scripts/accessibility.js @@ -1,10 +1,11 @@ var accScale; +var accWidth; var accBase; function createAccessibilityNodes() { document.querySelector("#accessibility").innerHTML = `
Accessibility controls -