{% extends "layout.html" %}
{% block title %}{{ this.title }} | Tor Styleguide {% endblock %}
{% block body %}

<div class="row col-sm-12 col-xs-12 ml-sm-auto col-md-9 col-lg-9 mx-auto">

<main role="main" class="col-12 col-md-10 col-xl-10 content-scroll" data-spy="scroll" data-offset="0">

  {{ this.body }}

  <div class="page-header mb-4 mt-5">
    <h3>Tor Project Assets</h3>
    <p class="text-muted">The Tor Project brand assets are included here. Use them responsibly.</p>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="image border p-5">
        <img src="/static/images/tor-logo/color.svg"/>
      </div>
      <h5 class="text-left pt-3 pb-5">Default</h5>
    </div>
    <div class="col-sm-3">
      <div class="image border p-5">
        <img src="/static/images/tor-logo/purple.svg"/>
      </div>
      <h5 class="text-left pt-3">Purple</h5>
    </div>
    <div class="col-sm-3">
      <div class="image border p-5">
        <img src="/static/images/tor-logo/black.svg"/>
      </div>
      <h5 class="text-left pt-3">Black</h5>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-sm-3">
      <div class="image border bg-primary p-5">
        <img src="/static/images/tor-logo/white.svg"/>
      </div>
      <h5 class="text-left pt-3">Invert</h5>
    </div>
    <div class="col-sm-3">
      <div class="image border bg-dark p-5">
        <img src="/static/images/tor-logo/white.svg"/>
      </div>
      <h5 class="text-left pt-3">Dark</h5>
    </div>
    <div class="col-sm-6">
      <div class="border p-5 text-left">
        <h6>Download Tor Logo Assets</h6>
        <p class="m-0">This package includes .png and .svg files</p>
        <a class="btn btn-lg btn-link p-0" title="Tor Styleguide Repo" href="https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static/images/tor-logo" target="_blank">Visit Repo</a>
      </div>
    </div>
  </div>


  <div class="page-header mb-4 mt-5">
    <h3>Tor Browser Assets</h3>
    <p class="text-muted">Tor Browser icons for desktop and mobile are included here. Use them responsibly.</p>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="image border text-center pb-5">
        <img class="w-75" src="/static/images/tor-browser/stable/stable.svg"/>
      </div>
      <h5 class="text-left pt-3 pb-5">Stable</h5>
    </div>
    <div class="col-sm-3">
      <div class="image border text-center p-5">
        <img class="w-100" src="/static/images/tor-browser-android/res/stable/drawable-xxhdpi/large_icon.png"/>
      </div>
      <h5 class="text-left pt-3">Android</h5>
    </div>
    <div class="col-sm-3">
      <div class="image border text-center p-5">
        <img class="w-75 py-4 mx-auto" src="/static/images/tor-browser/glyph/glyph.svg"/>
        <img class="w-50 py-4 mx-3" src="/static/images/tor-browser/glyph/glyph.svg"/>
        <img class="w-25 py-4 mx-auto" src="/static/images/tor-browser/glyph/glyph.svg"/>
      </div>
      <h5 class="text-left pt-3">Onion Glyph</h5>
    </div>
  </div>
  <div class="row mb-5">
    <div class="col-sm-3">
      <div class="image border text-center p-5" style="background:#111;">
        <img class="w-75" src="/static/images/tor-browser/alpha/alpha.svg"/>
      </div>
      <h5 class="text-left pt-3">Alpha</h5>
    </div>
    <div class="col-sm-3">
      <div class="image border bg-black text-center p-5" style="background:#111;">
        <img class="w-75" src="/static/images/tor-browser/nightly/nightly.svg"/>
      </div>
      <h5 class="text-left pt-3">Nightly</h5>
    </div>
    <div class="col-sm-6">
      <div class="border p-5 text-left">
        <h6>Download Tor Browser Icon</h6>
        <p class="m-0">This package includes .png and .svg files</p>
        <a class="btn btn-lg btn-link p-0" title="Tor Styleguide Repo" href="https://gitweb.torproject.org/project/web/styleguide.git/tree/assets/static/images/tor-browser" target="_blank">Visit Repo</a>
      </div>
    </div>
  </div>

</main>
{% endblock %}
