143 lines
5.1 KiB
HTML
143 lines
5.1 KiB
HTML
<!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>
|