117 lines
4 KiB
Text
117 lines
4 KiB
Text
|
---
|
||
|
|
layout: layout_flow.liquid
|
||
|
|
title: Style Guide
|
||
|
|
---
|
||
|
|
|
||
|
|
<h2 class="Title--sizeH3">Colors</h2>
|
||
|
|
|
||
|
|
<div class="StyleGuide-colors">
|
||
|
|
<!-- headings -->
|
||
|
|
<div class="StyleGuide-color--heading">for backgrounds</div>
|
||
|
|
<div class="StyleGuide-color--heading">for text</div>
|
||
|
|
|
||
|
|
<!-- reds -->
|
||
|
|
<div class="StyleGuide-color--red400">$red-400</div>
|
||
|
|
<div class="StyleGuide-color--red600">$red-600</div>
|
||
|
|
|
||
|
|
<!-- oranges -->
|
||
|
|
<div class="StyleGuide-color--orange400">$orange-400</div>
|
||
|
|
<div class="StyleGuide-color--orange600">$orange-600</div>
|
||
|
|
|
||
|
|
<!-- yellows -->
|
||
|
|
<div class="StyleGuide-color--yellow400">$yellow-400</div>
|
||
|
|
<div class="StyleGuide-color--yellow600">$yellow-600</div>
|
||
|
|
|
||
|
|
<!-- greens -->
|
||
|
|
<div class="StyleGuide-color--green400">$green-400</div>
|
||
|
|
<div class="StyleGuide-color--green600">$green-600</div>
|
||
|
|
|
||
|
|
<!-- blues -->
|
||
|
|
<div class="StyleGuide-color--blue400">$blue-400</div>
|
||
|
|
<div class="StyleGuide-color--blue600">$blue-600</div>
|
||
|
|
|
||
|
|
<!-- purples -->
|
||
|
|
<div class="StyleGuide-color--purple400">$purple-400</div>
|
||
|
|
<div class="StyleGuide-color--purple600">$purple-600</div>
|
||
|
|
|
||
|
|
<!-- pinks -->
|
||
|
|
<div class="StyleGuide-color--pink400">$pink-400</div>
|
||
|
|
<div class="StyleGuide-color--pink600">$pink-600</div>
|
||
|
|
|
||
|
|
<!-- neutrals -->
|
||
|
|
<div class="StyleGuide-color--neutral50">$neutral-400</div>
|
||
|
|
<div class="StyleGuide-color--neutral900">$neutral-600</div>
|
||
|
|
|
||
|
|
<div class="StyleGuide-color--gradient">$gradient</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 class="Title--sizeH3">Text</h2>
|
||
|
|
|
||
|
|
<p class="u-rainbowifyChildren"><b><p></b>This is a paragraph, containing
|
||
|
|
long amounts of text that likely wraps onto multiple lines. I can say anything
|
||
|
|
here, but if it's too long readers are likely to skip
|
||
|
|
it!<b></p></b></p>
|
||
|
|
|
||
|
|
<div class="StyleGuide-rainbowText">
|
||
|
|
<div class="StyleGuide-italics">
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
<i><i>italic text</i></i><br>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="StyleGuide-bold">
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
<b><b>bold text</b></b><br>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="StyleGuide-links">
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
<a class="Link"><a class="Link">link</a></a><br>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="Title--sizeH2">.Title--sizeH2</div>
|
||
|
|
<div class="Title--sizeH3">.Title--sizeH3</div>
|
||
|
|
<div class="Title--sizeH4">.Title--sizeH4</div>
|
||
|
|
<div class="Title--sizeH5">.Title--sizeH5</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="List">
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
<li class="List-item"><li class="List-item">unordered
|
||
|
|
list</li></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2 class="Title--sizeH3">Mixins/Components</h2>
|
||
|
|
|
||
|
|
<div class="StyleGuide-rainbowBorder">@include mixins.gradient-border;</div>
|
||
|
|
|
||
|
|
<div class="u-textCenter"><hr></div>
|
||
|
|
<hr>
|