{% extends "templates/article.njk" %}
{% import "components/toc.njk" as toc with context %}

{% block head %}
    <title>qwik - graphical resources</title>
{% endblock %}

{% block header %}
    <img src="/assets/images/design-res-promo.svg" alt="A promotional image for our graphical resources.">
    Graphical Resources
    <i>Last updated 10th August 2021</i>
{% endblock %}

{% block main %}
    {{ toc.header("h1", "Typography") }}
    <p>
        We only use one font, <a href="https://manropefont.com/">Manrope</a>, coming with 7 weights:
    </p>
    <ul>
        <li>Extra Light</li>
        <li>Light</li>
        <li>Regular</li>
        <li>Medium</li>
        <li>Semibold</li>
        <li>Bold</li>
        <li>Extra Bold</li>
    </ul>
    <p>
        We use <i>Regular</i> as the main font and for strong (bold) text we use <i>Semibold</i>.
        We use a line height of 1.5 for better readability. We don't really have a specific size that
        the font should be, but try to keep it readable (make sure the font is readble on all screens).
        Also, try to keep a visual hierarchy (having headeings bigger than paragraphs, and so on).
    </p>
    <p>
        Other weights should only be used for other material than text, like posters, images, social media,
        and so on, to "spice them up".
    </p>
    <p>
        We also <i>justify</i> wider text bodies, while we recommend using left-aligned text for less wide text bodies:
    </p>
    <img src="/assets/images/design-text-aligning.svg" alt="An image showing how we align text.">



    {{ toc.header("h1", "Logo") }}
    <img class="logo" src="/assets/images/logo.svg" alt="Our logo.">
    <p>
        You can download our logo <a href="https://qwik.space/resources/logo.svg" download="qwik-logo.svg">here</a>. It is made by BurnyLlama
        and is available under the <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> license
        (tl;dr: give us credit).
    </p>



    {{ toc.header("h1", "Images") }}
    <p>
        We recommend using SVGs instead of raster images like PNGs and JPGs. This is because they scale for all screens, and
        are (typically) smaller in size (unless you're making something huge).
    </p>



    {{ toc.header("h1", "Colours") }}
    <p>
        We provide a pretty big colour scheme that includes one greyscale (consisting of 15 tones) and 12 colours with five tones each.
        Official material for qwik should <b>only</b> use these colours.
    </p>
    <img src="/assets/images/design-colors-showcase.svg" alt="An image showing all colours.">
    <p>
        <a href="./colours">Read more about our colours here.</a>
    </p>
{% endblock %}