209 lines
7.0 KiB
HTML
209 lines
7.0 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 rel="stylesheet" href="/css/modern-normalize.css">
|
|
<link href="/css/style.css" rel="stylesheet">
|
|
<link rel="shortcut icon" href="/images/love-mark-square.png" type="image/x-icon">
|
|
</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://git.holllo.cc/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 via 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>
|
|
<a href="/get/firefox">Firefox</a>
|
|
</li>
|
|
<li>
|
|
<a href="/get/kitty">Kitty</a>
|
|
</li>
|
|
<li>
|
|
<a href="/get/sublime-text">Sublime Text</a>
|
|
</li>
|
|
<li>
|
|
<a href="/get/tauon">Tauon Music Box</a>
|
|
</li>
|
|
<li>
|
|
<a href="/get/vscode">Visual Studio Code</a>
|
|
</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://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>
|