A color scheme for you to love. ♡ https://love.holllo.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

228 lines
8.3 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>The Love Color Scheme</title>
  7. <link href="css/style.css" rel="stylesheet">
  8. <link rel="shortcut icon" href="images/love-mark-square.png" type="image/x-icon">
  9. </head>
  10. <body>
  11. <div id="wrapper">
  12. <h1>Love</h1>
  13. <section class="goals">
  14. <h2 class="light">Goals</h2>
  15. <div class="goal">
  16. <h3 class="goal-title">
  17. <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">
  18. Minimum AAA color contrast ratio.
  19. </a>
  20. </h3>
  21. <p>
  22. Don't worry about picking colors that pair well and are legible. Any combination
  23. as used on this page have a contrast ratio of 7 to 1 or better.
  24. </p>
  25. </div>
  26. <div class="goal light">
  27. <h3 class="goal-title">
  28. <a href="#variants">Dark and light variants.</a>
  29. </h3>
  30. <p>
  31. Only you see the world through your eyes, decide for yourself whether you like
  32. it dark or light. Or both.
  33. </p>
  34. </div>
  35. <div class="goal">
  36. <h3 class="goal-title">
  37. <a href="https://gitlab.com/holllo/love">Free and open-source.</a>
  38. </h3>
  39. <p>
  40. Open-sourced with the MIT License, because everyone deserves love.
  41. </p>
  42. </div>
  43. <div class="goal light">
  44. <h3 class="goal-title">
  45. <a href="#get">Broad integration.</a>
  46. </h3>
  47. <p>
  48. Get Love wherever you like.
  49. </p>
  50. </div>
  51. </section>
  52. <div class="divider"></div>
  53. <section id="samples" class="cupcake-ipsum">
  54. <h2 class="light">Samples</h2>
  55. <p class="border">
  56. Cupcake ipsum dolor sit amet powder. Chocolate jujubes cookie chocolate cake I
  57. love cake. Jujubes I love chocolate bar dessert cake candy canes macaroon. Wafer
  58. oat cake dessert donut. Ice cream wafer lollipop cake. Chocolate jelly-o caramels
  59. dragée gummies powder donut chocolate cake I love. Caramels cake chocolate cake
  60. dessert liquorice I love gummi bears. I love pudding lemon drops icing liquorice.
  61. Gummies cookie cake bonbon marshmallow lollipop lemon drops.
  62. </p>
  63. <p class="light">
  64. Caramels dragée apple pie topping. Apple pie jelly beans I love chupa chups
  65. cheesecake I love jelly beans. Gummies marzipan sesame snaps wafer brownie pie
  66. dragée cake. Macaroon fruitcake dragée sugar plum muffin caramels. Jelly beans
  67. gingerbread jelly beans dessert sugar plum candy sweet roll. Biscuit tiramisu I
  68. love gummi bears chocolate bar chocolate. Powder chocolate cake toffee bear claw
  69. danish lemon drops cake.
  70. </p>
  71. </section>
  72. <div class="spacer"></div>
  73. {% for variant in love %}
  74. <section class="{{ variant.name }}-labels">
  75. {% for accent in variant.colors.accents %}
  76. <span title="{{ accent.toUpperCase() }}">LOVE</span>
  77. {% endfor %}
  78. </section>
  79. {% endfor %}
  80. <div class="spacer"></div>
  81. {% for variant in love %}
  82. <section class="{{ variant.name }}-outline-labels">
  83. {% for accent in variant.colors.accents %}
  84. <span title="{{ accent.toUpperCase() }}">LOVE</span>
  85. {% endfor %}
  86. </section>
  87. {% endfor %}
  88. <div class="spacer"></div>
  89. {% for variant in love %}
  90. <section class="{{ variant.name }}-rainbow {{ 'light' if variant.name == 'light' else 'border' }}">
  91. <p>♥</p>
  92. </section>
  93. {% endfor %}
  94. <div class="divider"></div>
  95. <section id="variants">
  96. <h2 class="light">Variants</h2>
  97. {% for variant in love %}
  98. <div id="{{ variant.name }}">
  99. <h3>{{ variant.name|capitalize }}</h3>
  100. <p class="foreground-primary">
  101. Foreground Primary <span class="color">{{ variant.colors.foreground1 }}</span>
  102. </p>
  103. <p class="foreground-secondary">
  104. Foreground Secondary <span class="color">{{ variant.colors.foreground2 }}</span>
  105. </p>
  106. <p class="background-primary">
  107. Background Primary <span class="color">{{ variant.colors.background1 }}</span>
  108. </p>
  109. <p class="background-secondary">
  110. Background Secondary <span class="color">{{ variant.colors.background2 }}</span>
  111. </p>
  112. {% for accent in variant.colors.accents %}
  113. <p class="accent-{{ loop.index }}">
  114. Accent {{ loop.index }} <span class="color">{{ accent }}</span>
  115. </p>
  116. {% endfor %}
  117. {% for gray in variant.colors.grays %}
  118. <p class="gray-{{ loop.index }}">
  119. Gray {{ loop.index }} <span class="color">{{ gray }}</span>
  120. </p>
  121. {% endfor %}
  122. </div>
  123. {% endfor %}
  124. </section>
  125. <div class="divider"></div>
  126. <section id="get">
  127. <h2 class="light">
  128. Integrations
  129. </h2>
  130. <div class="border">
  131. <p>
  132. Love isn't widely available yet, but you can help change that.
  133. Suggest file formats, software, websites and anything else you know of where
  134. color customization is possible, and we'll spread the love together.
  135. </p>
  136. <p>
  137. Your suggestions are welcome at Love's
  138. <a href="https://gitlab.com/holllo/love/issues">issue tracker</a>
  139. and through email at
  140. <a href="mailto:love@holllo.cc">love@holllo.cc</a>.
  141. </p>
  142. </div>
  143. <div class="light">
  144. <h3>
  145. File Formats
  146. </h3>
  147. <ul>
  148. <li>
  149. <a href="love.json">JSON</a>
  150. </li>
  151. </ul>
  152. </div>
  153. <div class="border">
  154. <h3>
  155. Software
  156. </h3>
  157. <ul>
  158. <li>
  159. <a href="https://atom.io/users/Holllo">Atom</a>
  160. </li>
  161. <li>
  162. Firefox Color
  163. <a href="https://color.firefox.com/?theme=XQAAAAIYAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKlhSXT3Vtt2XDAs6h7gdL5pcAb7xqXopx66Ln4wY2B4_apm1Xo1m-kSLNybjC15LIb4OXWhGfyPJrZA2e0IeJeWC0yox2SBMD04SrZBvZwoC8QX9EBbJd69TMCmh7d-g0Wc_msdR2nzvnbFECN4_c5VKI9Btzbzvdvjw1-KH_nfezJDCoRea7HASdSJBgMVdHiWfmWiLujatKOWmCJfGaFyV_75SjmA">Dark</a>
  164. {{- '/' -}}
  165. <a href="https://color.firefox.com/?theme=XQAAAAIqAQAAAAAAAABBqYhm849SCia2CaaEGccwS-xNKliFvSp4LiFpmRcA5AwYsIABKiGtHcakOiV8NSmxjnVR9H4TYg2VNxSp6iDrgcvBoo3NoFSZSndEX6ZHCH8h1ahP78I4dZXjJD8ZzlOxqC6HrDKQmTBAEm09iix8uVI5_QcbhtDjDxpYbPP5WGvXu84Za9H0s1VXwrgKdxIgKTJraGh0P5bPsWJ_YY-lPSsAB62ABnbOV7SJEIMsWMC9a01QhpCubrrA-f_WNVAA">Light</a>
  166. </li>
  167. <li>
  168. <a class="fake-external" href="love-kitty.zip">Kitty</a>
  169. </li>
  170. <li>
  171. <a class="fake-external" href="Love.sublime-package">Sublime Text</a>
  172. </li>
  173. <li>
  174. <a class="fake-external" href="love-tauon.zip">Tauon Music Box</a>
  175. </li>
  176. <li>
  177. <a href="https://marketplace.visualstudio.com/items?itemName=Holllo.love">Visual Studio Code</a>
  178. </li>
  179. </ul>
  180. </div>
  181. <div class="light">
  182. <p>
  183. <small>* indicates planned but not yet available.</small>
  184. </p>
  185. </div>
  186. </section>
  187. <div class="divider"></div>
  188. <section id="attributions">
  189. <h2 class="light">Attributions</h2>
  190. <div class="border">
  191. <h3>
  192. <a href="https://rsms.me/inter/">Inter</a>
  193. </h3>
  194. <p>Excellent OFL 1.1 licensed sans-serif font.</p>
  195. </div>
  196. <div class="light monospace">
  197. <h3>
  198. <a href="https://github.com/i-tu/Hasklig/">Hasklig</a>
  199. </h3>
  200. <p>OFL 1.1 licensed monospace font with ligatures.</p>
  201. </div>
  202. <div class="border">
  203. <h3>
  204. <a href="https://www.hsluv.org/">HSLuv</a>
  205. </h3>
  206. <p>Human-friendly HSL alternative, without it Love wouldn't exist.</p>
  207. </div>
  208. </section>
  209. <div class="spacer"></div>
  210. <footer>
  211. <div>
  212. <a class="hide-external" href="https://holllo.cc">
  213. <img src="images/holllo-mark.png" alt="Made by Holllo">
  214. </a>
  215. </div>
  216. <div>
  217. <a id="liberapay-button" class="hide-external" href="https://liberapay.com/Holllo/donate">
  218. <img src="images/liberapay-button.svg" alt="Support Holllo via LiberaPay">
  219. </a>
  220. </div>
  221. </footer>
  222. </div>
  223. </body>
  224. </html>