andrew/keyrune
andrew/keyrune
1
0
Fork 0
mirror of https://github.com/andrewgioia/keyrune.git synced 2024-11-14 19:24:46 +00:00
Code Issues Projects Releases Wiki Activity
2470b15371
keyrune/docs/index.html

355 lines
29 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Keyrune</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="light dark">
<meta name="generator" content="Hand crafted">
<script type="text/javascript" src='/assets/js/first.js'></script>
<link rel="stylesheet" type="text/css" href='/assets/css/docs.css'>
<link rel="stylesheet" type="text/css" href='/assets/css/keyrune.css'>
<script type="text/javascript" src='/assets/js/zepto.js'></script>
<script type="text/javascript" src='/assets/js/zepto.fx.js'></script>
<script type="text/javascript" src='/assets/js/glitz.js'></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<header>
<mark class="flex flex-row flex-align-center flex-justify-start">
<a href="/" class="flex flex-row flex-align-center flex-justify-start mr-1">
<i class="ss ss-leg relative mr-2"></i>
<span>Keyrune</span>
</a>
<a href="https://github.com/andrewgioia/keyrune/archive/refs/heads/master.zip" target="blank">
<b>4.0.0</b>
</a>
</mark>
<a href="javascript:;" data-nav="mobile" id="toggle-nav">
<svg id="toggle-nav-svg" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" y1="6" x2="20" y2="6" class="line top"></line>
<line x1="4" y1="12" x2="20" y2="12" class="line mid"></line>
<line x1="4" y1="18" x2="20" y2="18" class="line bot"></line>
</svg>
</a>
<nav>
<a href="sets">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
<span>
Sets
</span>
</a>
<a href="docs">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<span>
Documentation
</span>
</a>
<a href="examples">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 4V2"></path>
<path d="M15 16v-2"></path>
<path d="M8 9h2"></path>
<path d="M20 9h2"></path>
<path d="M17.8 11.8 19 13"></path>
<path d="M15 9h0"></path>
<path d="M17.8 6.2 19 5"></path>
<path d="m3 21 9-9"></path>
<path d="M12.2 6.2 11 5"></path>
</svg>
<span>
Examples
</span>
</a>
<a href="https://github.com/andrewgioia/keyrune" target="blank">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
<span>
GitHub
</span>
</a>
<div id="mode" class="ml-2">
<input class="toggle" type="checkbox" id="switch" />
<label class="toggle" for="switch"></label>
</div>
</nav>
</header>
<main aria-role="main">
<aside>
<h1>
Keyrune.css
</h1>
<p class="big">
Keyrune is a complete SVG-based icon library and toolkit for Magic: the Gathering set symbols. <span class="hidden xs:inline">Use them on your website just like any icon font, or print them outfor great looking card dividers and storage labels.</span>
</p>
<div class="flex flex-align-center flex-justify-center w-full mt-12 flex-col sm:flex-row">
<a href="https://github.com/andrewgioia/keyrune/latest" class="button mx-2 flex flex-justify-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>
Download v4.0.0
</span>
</a>
<a href="docs/guide" class="button flex flex-justify-center mx-2 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-3 top-px relative">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
</svg>
<span>
<span class="hidden xs:inline">Read the getting started guide</span>
<span class="xs:hidden">Getting started guide</span>
</span>
</a>
</div>
</aside>
<dialog id="explode" class="relative overflow-hidden">
<div class="explode-inner flex flex-col flex-align-center flex-justify-center flex-shrink-0 relative">
<div class="isometric explode">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 436 480" class="border">
<path fill="none" d="M0 0h436v480H0z"/>
<path fill="var(--svg-border)" d="m436 54-30.889 71.493-24.754 17.454-13.483 17.014h-36.468l2.265 5.003 14.321 15.122 16.317 43.101v67.7l-32.99 17.18h-7.18l-31.851 20.266-34.909 18.207h-14.285l-32.244 24.227-35.145 18.308h-14.432l-32.285 24.266-24.229 12.607H72.7V223.144l16.356-43.092 14.282-15.121 2.253-4.97H68.68l-13.112-17.078-24.672-17.466L0 54h436zm-18.254 11.998H18.264l22.309 51.569 23.407 16.571 10.615 13.825h49.609l-10.767 23.748-14.014 14.838-14.724 38.795V413.95h16.126l20.746-10.795 34.695-26.078h15.501l31.665-16.495 34.657-26.04h15.349l31.845-16.609 34.363-21.864h7.736l23.929-12.461v-58.226l-14.687-38.795-14.052-14.838-10.767-23.786h49.268l10.956-13.825 23.408-16.505 22.309-51.635z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 436 480" class="rarity">
<path fill="none" d="M0 0h436v480H0z"/>
<path fill="var(--rarity-default)" d="M357.087 141.571h-48.198c-1.704-3.702-2.926-6.401-2.926-6.401H130.046s-1.297 2.813-2.926 6.401H78.961l-8.579-10.766L87.36 113.42h261.29l16.978 17.385-8.541 10.766zm-39.95 33.767 14.279 15.056H104.593l14.242-15.056h198.302zm-35.292 137.188V249.5l7.14-9.545h21.637l7.14 9.545.038 40.168-35.955 22.858zm-81.85 42.583V249.5l7.139-9.545h21.637l7.14 9.545.038 78.603-35.954 27.006zm-81.823 42.573V249.5l7.14-9.545h21.599l7.177 9.545.038 121.138-35.954 27.044zM18.264 65.998l22.309 51.569 23.408 16.571 10.614 13.825h49.609l-10.766 23.748-14.015 14.838-14.724 38.795V413.95h16.126l20.747-10.795 34.694-26.078h15.501l31.665-16.495 34.657-26.04h15.349l31.845-16.609 34.363-21.864h7.736l23.929-12.461v-58.226l-14.687-38.795-14.052-14.838-10.766-23.786h49.267l10.956-13.825 23.408-16.505 22.309-51.635H18.264z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 436 480" class="inner">
<path fill="none" d="M0 0h436v480H0z"/>
<path fill="var(--inner-default)" d="m146.911 239.955 7.177 9.545.038 121.138-35.954 27.044V249.5l7.14-9.545h21.599zm81.86 0h-21.637l-7.139 9.545v105.609l35.954-27.006-.038-78.603-7.14-9.545zm81.851 0h-21.637l-7.14 9.545v63.026l35.954-22.858-.037-40.168-7.14-9.545zm6.515-64.617 14.279 15.056H104.593l14.242-15.056h198.302zM130.046 135.17h175.917c.416.917.834 1.833 2.926 6.401h48.198l8.541-10.766-16.978-17.385H87.36l-16.978 17.385 8.579 10.766h48.159c1.629-3.588 2.926-6.401 2.926-6.401z"/>
</svg>
</div>
</div>
<div class="explode-text pb-6">
<h2 class="mt-10 mb-7">
Redrawn and refactored with full set coverage
</h2>
<p class="big">
Version 4 represents hundreds of hours of labor-of-love, with <strong>re-drawn, normalized glyphs</strong> for accurate sizing and <strong>multi-layer support</strong> for <em>every</em> set symbol!
</p>
<p class="big">
Style the rarity, border, and inner layers separately and perfectly, all with cross-browser <a href="examples">plug'n'play CSS classes</a>.
</p>
</div>
</dialog>
<article class="mt-16 mb-16">
<h2 class="mb-0 text-center">
<span style="box-shadow: -.1rem .1rem 0 #000, 0 .1rem 0 #000; background-color: #beb9b2; border-radius: 1rem; color: #111; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
<title>3</title>
<path fill="#444" d="M11.824 17.025l-0.807-1.508 0.535-0.323c2.070-1.258 3.961-2.532 5.676-3.825s2.571-2.766 2.571-4.419c0-1.111-0.412-2.045-1.234-2.799-0.824-0.757-1.789-1.134-2.898-1.134-2.576 0-5.294 1.6-8.157 4.796l-1.342-1.024c2.981-4.526 6.626-6.79 10.936-6.79 1.903 0 3.518 0.467 4.849 1.401 1.508 1.043 2.262 2.461 2.262 4.257 0 1.292-0.54 2.55-1.616 3.77-0.611 0.719-1.69 1.653-3.233 2.802l-0.646 0.485c0.287-0.036 0.629-0.054 1.024-0.054 1.975 0 3.599 0.755 4.875 2.263s1.913 3.268 1.913 5.278c0 3.413-1.438 6.267-4.31 8.566-2.659 2.155-5.73 3.231-9.213 3.231-3.196 0-5.71-0.699-7.543-2.1l0.972-1.348c2.155 1.043 4.112 1.563 5.872 1.563 2.549 0 4.82-0.844 6.813-2.532 1.995-1.688 2.99-3.788 2.99-6.302 0-1.653-0.502-3.062-1.508-4.23-1.006-1.166-2.317-1.75-3.933-1.75-1.474 0.001-3.089 0.575-4.849 1.724z"></path>
</svg>
</span>,
<span style="box-shadow: -.1rem .1rem 0 #000, 0 .1rem 0 #000; background-color: #beb9b2; border-radius: 1rem; color: #111; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
<title>tap</title>
<path fill="#444" d="M27.263 16.227h-12.874l4.714-3.355c-1.751-1.39-3.778-2.084-6.073-2.084-1.148 0-1.936 0.219-2.356 0.656-0.423 0.439-0.635 1.232-0.635 2.379 0 3.173 1.632 6.558 4.895 10.153l-3.715 3.762c-4.323-5.258-6.482-9.956-6.482-14.097 0-2.477 0.746-4.451 2.242-5.916 1.495-1.465 3.485-2.198 5.96-2.198 3.022 0 6.316 1.15 9.883 3.445l2.763-4.713 1.678 11.967z"></path>
</svg>
</span>: Draw 6 new features.
</h2>
<h2 class="mt-2 mb-16 text-center">You have no maximum hand size for the rest of the game.</h2>
<div class="grid grid-cols-6 grid-gap-x-8 grid-gap-y-12">
<div class="feature flex flex-col flex-align-center flex-justify-start text-center">
<svg width="80" height="80" viewBox="0 0 460 460" xmlns="http://www.w3.org/2000/svg" class="p-2">
<g transform="translate(-60 -58)" fill="none" fill-rule="evenodd">
<circle fill="#000" opacity="1" cx="290" cy="288" r="230"></circle>
<path d="M343.058 89.985c-109.36-29.303-221.77 35.597-251.073 144.957-29.303 109.36 35.597 221.77 144.957 251.073 109.36 29.303 221.77-35.597 251.073-144.957 29.303-109.36-35.597-221.77-144.957-251.073zM256.342 451.95l.276.71c1.172 3.187 3.562 5.776 6.644 7.2 3.082 1.422 6.603 1.562 9.788.387l48.355-17.774c3.184-1.175 6.706-1.035 9.787.388 3.082 1.424 5.472 4.013 6.644 7.2l.19.56c2.105 5.852-.304 12.37-5.71 15.448-93.23 22.17-187.912-30.724-217.912-121.736s14.67-189.84 102.81-227.453c5.144.502 9.544 3.91 11.32 8.762 2.578 6.977 10.317 10.55 17.3 7.99l15.73-5.803c3.186-1.176 6.707-1.036 9.79.387 3.08 1.423 5.47 4.012 6.643 7.198l.19.56c1.174 3.185 1.034 6.706-.39 9.788-1.422 3.082-4.01 5.472-7.197 6.644l-109.46 40.366c-3.187 1.172-5.777 3.562-7.2 6.644-1.422 3.082-1.562 6.603-.388 9.788l.19.56c1.172 3.186 3.562 5.775 6.643 7.198 3.082 1.423 6.603 1.563 9.788.388l80.06-29.483c3.184-1.174 6.705-1.034 9.787.388 3.082 1.423 5.472 4.013 6.644 7.2l.19.56c1.173 3.184 1.034 6.705-.39 9.787-1.422 3.08-4.01 5.47-7.197 6.643l-127.814 47.08c-3.186 1.17-5.776 3.56-7.2 6.643-1.42 3.082-1.56 6.603-.387 9.788l.19.56c1.172 3.186 3.562 5.775 6.643 7.198 3.08 1.423 6.602 1.563 9.787.388L297.72 226.4c3.184-1.175 6.705-1.036 9.787.387 3.082 1.423 5.472 4.012 6.644 7.198l.467 1.27c1.174 3.186 1.035 6.707-.388 9.79-1.424 3.08-4.014 5.47-7.2 6.643l-113 41.54c-3.187 1.172-5.777 3.562-7.2 6.644-1.422 3.08-1.562 6.603-.387 9.787l.19.56c1.17 3.185 3.56 5.775 6.643 7.198 3.08 1.423 6.603 1.562 9.787.388l51.798-19.06c3.186-1.174 6.707-1.034 9.79.39 3.08 1.422 5.47 4.01 6.643 7.197l.19.56c1.174 3.185 1.034 6.706-.39 9.788-1.422 3.083-4.01 5.473-7.197 6.644l-89.085 32.754c-3.185 1.17-5.774 3.56-7.197 6.643-1.423 3.083-1.562 6.604-.388 9.79l.19.56c1.17 3.185 3.56 5.775 6.643 7.197 3.082 1.423 6.603 1.563 9.788.388L304.563 336.3c3.185-1.173 6.706-1.034 9.788.39 3.083 1.422 5.473 4.01 6.644 7.197l.19.56c1.174 3.185 1.035 6.706-.388 9.788s-4.013 5.472-7.198 6.644l-74.954 27.54c-3.186 1.17-5.776 3.56-7.2 6.643-1.422 3.082-1.56 6.603-.387 9.788l.19.56c1.172 3.187 3.562 5.777 6.643 7.2 3.082 1.422 6.603 1.562 9.788.387l94.147-34.537c3.185-1.175 6.706-1.035 9.788.388s5.472 4.012 6.644 7.198c2.428 6.58-.893 13.887-7.447 16.384l-86.903 33.168c-3.18 1.18-5.764 3.574-7.18 6.658-1.414 3.083-1.547 6.603-.367 9.784l-.018-.09z" fill="#FFF"></path>
</g>
</svg>
<h3 class="mt-8 mb-4">Full Scryfall set code coverage</h3>
<p class="m-0">Every set officially recognized by <a href="https://https://scryfall.com/sets" target="blank">Scryfall</a> is aliased to the appropriate symbol, including all of their custom codes for promos, cubes, etc.</p>
</div>
<div class="feature flex flex-col flex-align-center flex-justify-start text-center">
<i class="ss ss-4bb ss-border" style="font-size: 6rem;"></i>
<h3 class="mt-8 mb-4">More unofficial set symbols</h3>
<p class="m-0">All of the missing <a href="sets/unofficial">convenience symbols</a> for popular but unofficial "sets" are now available, with some new fun ones 😜.</p>
</div>
<div class="feature flex flex-col flex-align-center flex-justify-start text-center">
<i class="ss ss-arn ss-border ss-inner" style="font-size: 6rem;"></i>
<h3 class="mt-8 mb-4">Set symbol size normalization!</h3>
<p class="m-0">When every glyph was squared off, Arabian Nights was too thin and Tempest too big. Now every symbol is relatively sized!</p>
</div>
<div class="feature flex flex-col flex-align-center flex-justify-start text-center">
<i class="ss ss-leg ss-rarity ss-border ss-rarity-mythic ss-rarity-gradient" style="font-size: 6rem;"></i>
<h3 class="mt-8 mb-4">Three targetable layers</h3>
<p class="m-0">In an icon font first, border, rarity, and inner layers are targetable via <code>::before</code>, <code>::after</code>, and <code>::marker</code> pseudo-elements.</p>
</div>
<div class="feature flex flex-col flex-align-center flex-justify-start text-center">
<i class="ss ss-atq ss-border" style="font-size: 6rem;"></i>
<h3 class="mt-8 mb-4">Overlays for print variations</h3>
<p class="m-0">Booster fun, box topper, pre-release, and some other print variations now have easy overlays if your project needs to differentiate.</p>
</div>
<div class="feature flex flex-col flex-align-center flex-justify-start text-center">
<svg width="80" height="80" viewBox="0, 0, 120, 120" xmlns="http://www.w3.org/2000/svg" class="p-2">
<path d="M5.041,0.631 C6.662,-0.21 8.686,-0.207 10.304,0.644 C11.51,1.181 12.408,2.179 13.323,3.097 C22.062,11.839 30.797,20.587 39.536,29.333 C40.23,30.027 40.95,30.695 41.573,31.456 C41.516,25.317 41.564,19.174 41.548,13.035 C41.548,9.466 45.212,6.518 48.698,7.196 C51.668,7.564 53.977,10.39 53.935,13.354 C53.967,24.44 53.935,35.53 53.951,46.616 C54.044,49.877 50.917,52.614 47.748,52.525 C36.787,52.538 25.828,52.518 14.867,52.534 C12.757,52.656 10.608,51.553 9.495,49.756 C8.6,48.422 8.322,46.737 8.574,45.167 C9.047,42.392 11.663,40.157 14.487,40.141 C20.575,40.137 26.663,40.128 32.751,40.147 C23.018,30.506 13.348,20.795 3.647,11.123 C2.438,9.93 1.498,8.369 1.418,6.64 C1.236,4.142 2.755,1.642 5.041,0.631 z" fill="var(--text-default)"/>
<path d="M110.277,0.388 C113.506,-0.926 117.497,1.252 118.357,4.583 C119.086,6.956 118.053,9.514 116.314,11.167 C106.58,20.821 96.917,30.545 87.145,40.153 C93.221,40.112 99.296,40.15 105.368,40.134 C108.409,40.073 111.198,42.625 111.444,45.647 C112,49.043 109.097,52.451 105.679,52.528 C94.276,52.544 82.87,52.499 71.471,52.55 C68.535,52.263 66.08,49.545 66.086,46.59 C66.035,35.402 66.08,24.21 66.064,13.019 C66.073,9.495 69.661,6.572 73.118,7.18 C76.037,7.506 78.397,10.208 78.438,13.131 C78.486,19.219 78.47,25.307 78.445,31.395 C87.558,22.221 96.719,13.092 105.854,3.941 C107.223,2.643 108.428,1.031 110.277,0.388 z" fill="var(--text-accent)"/>
<path d="M8.606,72.19 C9.147,69.475 11.733,67.33 14.506,67.32 C25.601,67.311 36.7,67.323 47.796,67.314 C51.035,67.346 53.961,70.227 53.926,73.495 C53.967,84.574 53.945,95.654 53.938,106.734 C53.993,110.347 50.379,113.397 46.827,112.783 C43.895,112.393 41.506,109.688 41.554,106.714 C41.551,100.668 41.525,94.621 41.57,88.574 C31.971,98.302 22.257,107.917 12.619,117.609 C11.382,118.932 9.687,119.972 7.832,119.988 C5.086,120.099 2.473,118.123 1.687,115.514 C0.932,113.257 1.731,110.686 3.449,109.087 C13.284,99.293 23.056,89.425 32.943,79.679 C27.021,79.746 21.096,79.688 15.174,79.711 C13.067,79.756 10.835,78.876 9.645,77.073 C8.625,75.688 8.277,73.866 8.606,72.19 z" fill="var(--text-accent)"/>
<path d="M68.376,68.759 C69.642,67.633 71.416,67.39 73.047,67.394 C83.922,67.41 94.8,67.381 105.675,67.406 C108.828,67.49 111.498,70.355 111.501,73.485 C111.607,75.874 110.12,78.262 107.926,79.218 C106.35,80.024 104.527,79.855 102.817,79.867 C97.621,79.826 92.421,79.861 87.225,79.794 C96.454,89 105.669,98.215 114.888,107.431 C116.218,108.812 117.884,110.062 118.357,112.026 C119.479,115.671 116.528,119.84 112.716,119.978 C110.469,120.189 108.448,118.856 107.022,117.238 C97.464,107.587 87.823,98.017 78.304,88.325 C78.352,94.036 78.307,99.75 78.326,105.461 C78.422,107.181 78.163,109.017 77.035,110.392 C75.122,113.049 71.033,113.637 68.433,111.642 C66.895,110.51 65.92,108.62 65.933,106.705 C65.917,95.734 65.933,84.76 65.926,73.789 C65.853,71.832 66.885,69.971 68.376,68.759 z" fill="var(--text-default)"/>
</svg>
<h3 class="mt-8 mb-4">Smaller SVG code</h3>
<p class="m-0">In addition to the redraw, each SVG has been optimized for file size to help reduce the overall weight of the font and library.</p>
</div>
</div>
</article>
<section class="flex flex-col flex-align-center mt-12 pt-24 pb-12 bg-black w-full text-white angle-top relative">
<h2 class="mb-8 px-4 text-center w-wide">
See Keyrune in the wild at these fine locations!
</h2>
<div class="flex flex-wrap flex-align-center flex-justify-center pb-4 w-wide">
<a href="https://mtgjson.com" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/mtgjson.svg" width="80">
</a>
<a href="https://tappedout.net" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/tappedout.svg" width="220">
</a>
<a href="https://tcgplayer.com" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/tcgplayer.svg" width="180">
</a>
<a href="https://whatsinstandard.com" target="blank" class="user bubble mx-8 my-2">
<img src="assets/svg/standard.svg" width="80">
</a>
<a href="https://untapped.gg" target="blank" class="user bubble mx-8 my-4 pt-2 px-2">
<img src="assets/svg/untapped.svg" width="200">
</a>
<a href="https://manatraders.com" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/manatraders.svg" width="160">
</a>
<a href="https://mtgaassistant.com" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/mtgaassistant.svg" width="72">
</a>
<a href="https://starcitygames.com/magic-the-gathering-cards-the-unofficial-ultimate-collectors-guide-ben-bleiweiss-non-autographed/" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/scg.svg" width="300">
</a>
<a href="https://cardsphere.com" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/cardsphere.svg" width="64">
</a>
<a href="https://echomtg.com" target="blank" class="user bubble mx-8 my-4 pt-1">
<img src="assets/svg/echomtg.svg" width="200">
</a>
<a href="https://github.com/andrewgioia/keyrune" target="blank" class="user bubble mx-8 my-4 pt-2">
<img src="assets/svg/yours.svg" width="150">
</a>
</div>
</section>
</main>
<footer class="border">
<div class="w-wide flex flex-col sm:flex-row">
<div class="w-full sm:w-1/5 flex flex-col">
<h4 class="mt-0 mb-4">
Keyrune.css
</h4>
<p class="mt-1 mb-6 pr-12 relative top-px">
An MTG icon font built with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a>.
</p>
<a href="https://www.jsdelivr.com/package/npm/keyrune" class="mb-4">
<img src="https://data.jsdelivr.com/v1/package/npm/keyrune/badge">
</a>
<a class="github-button" href="https://github.com/andrewgioia/keyrune" data-icon="octicon-star" data-show-count="true" aria-label="Star andrewgioia/keyrune on GitHub" class="mb-8">
Star
</a>
</div>
<div class="w-full sm:w-1/5 flex flex-col">
<h5 class="mt-1 mb-4">
Project
</h5>
<menu class="flex flex-row flex-wrap sm:list mb-8 mt-1">
<li class="flex flex-row flex-align-center flex-justify-start">
<i class="ss ss-leg ss-white w-4 mr-2"></i>
<a href="/" class="mr-4">Overview</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
<a href="/sets" class="mr-4">Set symbols</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
</svg>
<a href="/docs" class="mr-4">Documentation</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M15 4V2"></path>
<path d="M15 16v-2"></path>
<path d="M8 9h2"></path>
<path d="M20 9h2"></path>
<path d="M17.8 11.8 19 13"></path>
<path d="M15 9h0"></path>
<path d="M17.8 6.2 19 5"></path>
<path d="m3 21 9-9"></path>
<path d="M12.2 6.2 11 5"></path>
</svg>
<a href="https://andrewgioia.keyrune.com/examples" class="mr-4">Examples</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M6 20h4"></path>
<path d="M14 10h4"></path>
<path d="M6 14h2v6"></path>
<path d="M14 4h2v6"></path>
<rect x="6" y="4" width="4" height="6"></rect>
<rect x="14" y="14" width="4" height="6"></rect>
</svg>
<a href="/cheatsheet" class="mr-4">Cheatsheet</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
<a href="https://github.com/andrewgioia/keyrune" target="blank" class="mr-4">GitHub project</a>
</li>
<li class="flex flex-row flex-align-center flex-justify-start">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="top-px relative w-4 mr-2">
<path d="m5.784 5.309-.956-.001c-2.112 0-3.825 1.68-3.825 3.754-.001 2.073 1.711 3.754 3.823 3.754l.956.001zm17.211 8.252c-.459 3.456-3.625 5.131-5.738 5.131l-5.737-.002c-2.112 0-4.681-1.581-5.736-5.133l.002-8.248 17.211.003zm-8.833-5.155V5.308zm-.638.134a1 1 0 0 0-1.366.366l-1.928 3.34a1 1 0 0 0 .366 1.366l3.34 1.928a1 1 0 0 0 1.366-.366l1.928-3.34a1 1 0 0 0-.366-1.366l-3.34-1.928z"></path>
</svg>
<a href="https://git.gioia.cloud/andrew/keyrune" target="blank" class="mr-4">Gitea mirror</a>
</li>
</menu>
</div>
<div class="w-full sm:w-3/5">
<h5 class="mt-1">
Licensing and terms of use
</h5>
<p>
Keyrune is free, unofficial "Fan Content" permitted under the Wizards of the Coast <a href="https://company.wizards.com/en/legal/fancontentpolicy" target="blank">Fan Content Policy</a>. The Magic: the Gathering&trade; set symbols themselves are copyright Wizards of the Coast, LLC, a subsidiary of Hasbro, Inc. Keyrune is not produced by, endorsed by, supported by, or affiliated with Wizards of the Coast, and I develop and distribute this project solely as a resource to enable other Fan Content.
</p>
<p>
The Keyrune font is licensed under the <a href="http://scripts.sil.org/OFL" target="blank">SIL OFL 1.1</a>. Please review the terms of that license for attribution, distribution, incorporation, and bundling requirements.
</p>
<p>
The source code and other project files, including CSS, SCSS, and his website, are licensed separately under the <a href="https://opensource.org/licenses/GPL-3.0" target="blank">GPL 3.0 License</a>. You're free to share or modify any of the source code or this website's design so long as you also distribute your project under the same license.
</p>
</div>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink