221 lines
7.8 KiB
HTML
221 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Love Color Scheme</title>
|
|
<link href="css/style.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="wrapper">
|
|
<h1>Love</h1>
|
|
<section class="goals">
|
|
<h2 class="light">Goals</h2>
|
|
<div class="goal">
|
|
<h3 class="goal-title">
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">
|
|
Minimum AAA color contrast ratio.
|
|
</a>
|
|
</h3>
|
|
<p>
|
|
Don't worry about picking colors that pair well and are legible. Any combination
|
|
as used on this page have a contrast ratio of 7 to 1 or better.
|
|
</p>
|
|
</div>
|
|
<div class="goal light">
|
|
<h3 class="goal-title">
|
|
<a href="#variants">Dark and light variants.</a>
|
|
</h3>
|
|
<p>
|
|
Only you see the world through your eyes, decide for yourself whether you like
|
|
it dark or light. Or both.
|
|
</p>
|
|
</div>
|
|
<div class="goal">
|
|
<h3 class="goal-title">
|
|
<a href="https://gitlab.com/holllo/love">Free and open-source.</a>
|
|
</h3>
|
|
<p>
|
|
Open-sourced with the MIT License, because everyone deserves love.
|
|
</p>
|
|
</div>
|
|
<div class="goal light">
|
|
<h3 class="goal-title">
|
|
<a href="#get">Broad integration.</a>
|
|
</h3>
|
|
<p>
|
|
Get Love wherever you like.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<div class="divider"></div>
|
|
<section id="samples" class="cupcake-ipsum">
|
|
<h2 class="light">Samples</h2>
|
|
<p class="border">
|
|
Cupcake ipsum dolor sit amet powder. Chocolate jujubes cookie chocolate cake I
|
|
love cake. Jujubes I love chocolate bar dessert cake candy canes macaroon. Wafer
|
|
oat cake dessert donut. Ice cream wafer lollipop cake. Chocolate jelly-o caramels
|
|
dragée gummies powder donut chocolate cake I love. Caramels cake chocolate cake
|
|
dessert liquorice I love gummi bears. I love pudding lemon drops icing liquorice.
|
|
Gummies cookie cake bonbon marshmallow lollipop lemon drops.
|
|
</p>
|
|
<p class="light">
|
|
Caramels dragée apple pie topping. Apple pie jelly beans I love chupa chups
|
|
cheesecake I love jelly beans. Gummies marzipan sesame snaps wafer brownie pie
|
|
dragée cake. Macaroon fruitcake dragée sugar plum muffin caramels. Jelly beans
|
|
gingerbread jelly beans dessert sugar plum candy sweet roll. Biscuit tiramisu I
|
|
love gummi bears chocolate bar chocolate. Powder chocolate cake toffee bear claw
|
|
danish lemon drops cake.
|
|
</p>
|
|
</section>
|
|
<div class="spacer"></div>
|
|
{% for variant in love %}
|
|
<section class="{{ variant.name }}-labels">
|
|
{% for accent in variant.colors.accents %}
|
|
<span title="{{ accent.toUpperCase() }}">LOVE</span>
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
<div class="spacer"></div>
|
|
{% for variant in love %}
|
|
<section class="{{ variant.name }}-outline-labels">
|
|
{% for accent in variant.colors.accents %}
|
|
<span title="{{ accent.toUpperCase() }}">LOVE</span>
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
<div class="spacer"></div>
|
|
{% for variant in love %}
|
|
<section class="{{ variant.name }}-rainbow {{ 'light' if variant.name == 'light' else 'border' }}">
|
|
<p>♥</p>
|
|
</section>
|
|
{% endfor %}
|
|
<div class="divider"></div>
|
|
<section id="variants">
|
|
<h2 class="light">Variants</h2>
|
|
{% for variant in love %}
|
|
<div id="{{ variant.name }}">
|
|
<h3>{{ variant.name|capitalize }}</h3>
|
|
<p class="foreground-primary">
|
|
Foreground Primary <span class="color">{{ variant.colors.foreground1 }}</span>
|
|
</p>
|
|
<p class="foreground-secondary">
|
|
Foreground Secondary <span class="color">{{ variant.colors.foreground2 }}</span>
|
|
</p>
|
|
<p class="background-primary">
|
|
Background Primary <span class="color">{{ variant.colors.background1 }}</span>
|
|
</p>
|
|
<p class="background-secondary">
|
|
Background Secondary <span class="color">{{ variant.colors.background2 }}</span>
|
|
</p>
|
|
{% for accent in variant.colors.accents %}
|
|
<p class="accent-{{ loop.index }}">
|
|
Accent {{ loop.index }} <span class="color">{{ accent }}</span>
|
|
</p>
|
|
{% endfor %}
|
|
{% for gray in variant.colors.grays %}
|
|
<p class="gray-{{ loop.index }}">
|
|
Gray {{ loop.index }} <span class="color">{{ gray }}</span>
|
|
</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
<div class="divider"></div>
|
|
<section id="get">
|
|
<h2 class="light">
|
|
Integrations
|
|
</h2>
|
|
<div class="border">
|
|
<p>
|
|
Love isn't widely available yet, but you can help change that.
|
|
Suggest file formats, software, websites and anything else you know of where
|
|
color customization is possible, and we'll spread the love together.
|
|
</p>
|
|
<p>
|
|
Your suggestions are welcome at Love's
|
|
<a href="https://gitlab.com/holllo/love/issues">issue tracker</a>
|
|
and through email at
|
|
<a href="mailto:love@holllo.cc">love@holllo.cc</a>.
|
|
</p>
|
|
</div>
|
|
<div class="light">
|
|
<h3>
|
|
File Formats
|
|
</h3>
|
|
<ul>
|
|
<li>
|
|
<a href="love.json">JSON</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="border">
|
|
<h3>
|
|
Software
|
|
</h3>
|
|
<ul>
|
|
<li>
|
|
Atom<sup>*</sup>
|
|
</li>
|
|
<li>
|
|
Firefox Color
|
|
<a href="https://color.firefox.com/?theme=XQAAAAIYAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKlhSXT3Vtt2XDAs6h7gdL5pcAb7xqXopx66Ln4wY2B4_apm1Xo1m-kSLNybjC15LIb4OXWhGfyPJrZA2e0IeJeWC0yox2SBMD04SrZBvZwoC8QX9EBbJd69TMCmh7d-g0Wc_msdR2nzvnbFECN4_c5VKI9Btzbzvdvjw1-KH_nfezJDCoRea7HASdSJBgMVdHiWfmWiLujatKOWmCJfGaFyV_75SjmA">Dark</a>
|
|
{{- '/' -}}
|
|
<a href="https://color.firefox.com/?theme=XQAAAAIqAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKliFvSp4LiFpmRcA5AwYsIABKiGtHcakOiV8NSmxjnVR9H4TYg2VNxSp6iDrgcvBoo3NoFSZSndEX6ZHCH8h1ahP78I4dZXjJD8ZzlOxqC6HrDKQmTBAEm09iix8uVI5_QcbhtDjDxpYbPP5WGvXu84Za9H0s1VXwrgKdxIgKTJraGh0P5bPsWJ_YY-lPSsAB62ABnbOV7SJEIMsWMC9a01QhpCubrrA-f_WNVAA">Light</a>
|
|
</li>
|
|
<li>
|
|
Sublime Text<sup>*</sup>
|
|
</li>
|
|
<li>
|
|
Visual Studio Code<sup>*</sup>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="light">
|
|
<p>
|
|
<small>* indicates planned but not yet available.</small>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<div class="divider"></div>
|
|
<section id="attributions">
|
|
<h2 class="light">Attributions</h2>
|
|
<div class="border">
|
|
<h3>
|
|
<a href="https://rsms.me/inter/">Inter</a>
|
|
</h3>
|
|
<p>Excellent OFL 1.1 licensed sans-serif font.</p>
|
|
</div>
|
|
<div class="light monospace">
|
|
<h3>
|
|
<a href="https://github.com/i-tu/Hasklig/">Hasklig</a>
|
|
</h3>
|
|
<p>OFL 1.1 licensed monospace font with ligatures.</p>
|
|
</div>
|
|
<div class="border">
|
|
<h3>
|
|
<a href="https://www.hsluv.org/">HSLuv</a>
|
|
</h3>
|
|
<p>Human-friendly HSL alternative, without it Love wouldn't exist.</p>
|
|
</div>
|
|
</section>
|
|
<div class="spacer"></div>
|
|
<footer>
|
|
<div>
|
|
<a class="hide-external" href="https://holllo.cc">
|
|
<img src="images/holllo-mark.png" alt="Made by Holllo">
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a id="liberapay-button" class="hide-external" href="https://liberapay.com/Holllo/donate">
|
|
<img src="images/liberapay-button.svg" alt="Support Holllo via LiberaPay">
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|