abtmtr-v4/views/branding/index.html
2024-01-23 15:04:38 -06:00

123 lines
4.3 KiB
HTML

<!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>