<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fonts</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/brz9-v2.3/brz9-v2.3.css">
<link rel="stylesheet" href="https://file.brz9.dev/cdn/fonts/base/all.css">
</head>
<body>
<nav>
<section id="left-nav">
<a href="/">
<span class="byl-icon-home"></span>
</a>
<a href="/proj">
<span>/projets</span>
</a>
</section>
</nav>
<div id="root">
<main>
<h3>Fonts</h3>
<input class="font-input" v-model="testText" placeholder="Your text"/>
<nav class="font-nav">
<fontpicker :tag="taglist.display">Display</fontpicker>
<fontpicker :tag="taglist.condensed">Condensed</fontpicker>
<fontpicker :tag="taglist.graphic">Graphic</fontpicker>
<fontpicker :tag="taglist.fancy">Fancy</fontpicker>
<fontpicker :tag="taglist.comic">Comic</fontpicker>
<fontpicker :tag="taglist.mono">Mono</fontpicker>
</nav>
<nav class="font-control">
<span class="brz9-icon-font-size"></span>
<span class="brz9-icon-plus" v-on:click="fontSizeUp"></span>
<span> / </span>
<span class="brz9-icon-minus" v-on:click="fontSizeDown"></span>
</nav>
<div class="font-container">
<div class="font-content">
<fontdemo v-for="font in this.selection" :typeface="font"
v-bind:fresh="isFresh"
v-bind:size="fontSize"
>{{ testText }}</fontdemo>
</div>
</div>
</main>
</div>
<footer>
<section id="social">
<a href="/feed.xml">
<span class="byl-icon-rss"></span>
</a>
<a rel="me" href="https://mamot.fr/@edardach" target="_blank">
<span class="byl-icon-mastodon"></span>
</a>
<!--
<a href="https://www.instagram.com/edbrz9/"
target="_blank">
<span class="byl-icon-instagram"></span>
</a>
<a href="https://twitter.com/edbrz9"
target="_blank">
<span class="byl-icon-twitter"></span>
</a>
-->
<a href="https://git.brz9.dev/ed"
target="_blank">
<span class="byl-icon-git"></span>
</a>
<!--
<a href="">
<a rel="me" href="https://mamot.fr/@edardach">
<span class="byl-icon-mastodon"></span>
</a>
<a href="">
<span class="byl-icon-tiktok"></span>
</a>
-->
<a href="/BTC">
<span class="byl-icon-bitcoin"></span>
</a>
<a href="/ETH">
<span class="byl-icon-ethereum"></span>
</a>
<a href="/XMR">
<span class="byl-icon-monero"></span>
</a>
</section>
<section id ="mail">
<p>ed<span class="132">ehbb</span>@<span class="lskd">dllls</span>brz9.dev</p>
</section>
<section id="license">
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">
<img class="cc-link" src="/assets/svg/edbz9-cc-by-sa.svg"/>
</a>
</section>
</footer>
</body>
<script src="https://ed.brz9.dev/assets/js/vue.min.js"></script>
<script src="fonts.js"></script>
</html>