trash.html

---
layout: default
title: Recursive
meta-content:
  image: 
  description: Recursive is a variable font, providing a continuous range of design control across five axes, Proportion, Casual, Weight, Italic, and Cursive.
---



<div class="container-fluid bg-dark position-relative" id="hero">
   
    <!-- <div class="hero__headline position-absolute w-100">
        A typographic palette for vibrant code & UI.
    </div> -->
    <div class="temp-hero" id="temp-hero">
        A typographic<br>palette for<br><span class="indent">vibrant<br>code & UI.</span>
        <div class="temp-hero-controls">
            <ul>
                <li><span class="label">Proportinal</span>1</li>
                <li><span class="label">Casual</span>0</li>
                <li class="active"><span class="label">Weight</span><span id="weightVal">400</span></li>
                <li><span class="label">Italic</span>0</li>
                <li><span class="label">Slant</span>0</li>
            </ul>
        </div>
    </div>
    <div id="verticalBar"></div>
</div>
<div id="phantomToolbar" class="d-none"></div>

<div class="toolbar clearfix" id="toolbar">
    <select class="toolbar__item" id="chooseInstance">
        {% for instance in site.data.instances %}
        <option data-mono="{{ instance.MONO }}" data-casl="{{ instance.CASL }}" data-ital="{{ instance.ital }}" data-slnt="{{ instance.slnt }}" data-wght="{{ instance.wght }}">{{ instance.name }}</option>
        {% endfor %}
    </select>
    <div class="toolbar__item">
        <a data-toggle="collapse" data-target="#pickFontSize" data-text="Collapse">
        15pt
        <svg style="pointer-events:none" class="arrow" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.41 0.589844L6 5.16984L10.59 0.589844L12 1.99984L6 7.99984L0 1.99984L1.41 0.589844Z" fill="black"/>
        </svg>
        </a>
        <div class="collapse" id="pickFontSize">
            <ul>
                <li><input id="globalFontSizeSlider" min="6" max="60" step="1" value="15" type="range"></li>
            </ul>
        </div>
    </div>
    <div class="toolbar__item">
        <a data-toggle="collapse" data-target="#pickVariability" data-text="Collapse" id="collapseSettings">
            <span>MONO </span><span id="globalMono">1</span><span>   CASL </span><span id="globalCasl">0</span><span>   wght </span><span id="globalWght">400</span><span>   ital </span><span id="globalCrsv">0</span><span>   slnt </span><span id="globalSlnt">0</span>
        </a>
        <div class="collapse" id="pickVariability">
            <ul>
                <li><span class="collapse__label">MONO</span> <span class="inputs d-inline-block"><span class="collapse__label"><span class="radio radio-prop" id="globalRadioMono"></span> Mono</span> <span class="collapse__label"><span class="radio radio-prop active" id="globalRadioSans"></span> Sans</span></span></li>
                <li><span class="collapse__label">CASL</span><input id="globalCaslSlider" min="0" max="1" value="0" step="0.01" type="range"></li>
                <li><span class="collapse__label">wght</span><input id="globalWghtSlider" min="300" max="1000" value="400" step="1" type="range"></li>
                <li><span class="collapse__label">ital</span> <span class="inputs d-inline-block"><span class="collapse__label"><span class="radio active radio-ital" id="globalCrsvOff"></span> Off</span> <span class="collapse__label"><span class="radio radio-ital" id="globalCrsvAuto"></span> Auto</span> <span class="collapse__label"><span class="radio radio-ital" id="globalCrsvOn"></span> On</span></span></li>
                <li><span class="collapse__label">slnt</span><input id="globalSlntSlider" min="-15" max="0" value="0" step="0.01" type="range"></li>
            </ul>
        </div>
    </div>
    <div class="toolbar__item">
        <a id="inversePage">
            <svg id="inverseSVG" style="pointer-events:none" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="8" cy="8" r="7.5" fill="white" stroke="black"/>
                <path d="M15.4836 7.5H0.516402C0.773695 3.59098 4.02588 0.5 8 0.5C11.9741 0.5 15.2263 3.59098 15.4836 7.5Z" fill="black" stroke="black"/>
            </svg>
        </a>
    </div>
</div>

<div class="container-fluid" id="mdContainer">
        <textarea id="mdSection">
            {% include mde.md %}
        </textarea>
</div>