{% extends "index.html" %}
{% block title %}Basics{% endblock %}
      {% block main %}
      <article class='right'>
        <h3>Basics</h3>
        <p>
          Thanks to <a href='http://flask.pocoo.org/'>Python/Flask</a> with <strong>TetaWebApp</strong> most of the output things come to life via
          <a href='http://jinja.pocoo.org/docs/2.10/'>Jinja2 HTML templates</a>
          and is 100% <strong title='Bulshit inside'>HTML5 ready©</strong>.
        </p>
        <p>
          Colors and fonts are managed from separated CSS files letting you easily
          change the default theme to your favorite colors and icon set.
        </p>
        <pre>
/*
* Here are the font definitions.
* You can modify it or create your own and make it loaded
* after this one in the HTML header section of the index.html
* template file.
*/

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 400;
	src: var(--font-normal);
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	src: var(--font-bold);
}
        </pre>
        <pre>
/*
* Here are the base color scheme and icon set.
* You can modify it or create your own using the same variables
* and make it loaded after this one but before the fonts.css in
* the HTML header section of the index.html template file.
*/
:root {
    --coloured-bg: #FF5D00;
    --light-coloured-bg: #FFB387;
    --clear-bg: #E5E5E5;
    --mid-bg: #BBBBBB;
    --dark-bg: #2B2B2B;
    --dark-border: #888888;
    --text-color: #555555;
    --white: #FFFFFF;
    --black: #000000;
    --font-normal: url("/static/fonts/RobotoCondensed-Regular.ttf") format("truetype");
    --font-bold: url("/static/fonts/RobotoCondensed-Bold.ttf") format("truetype");
    --banner-logo: url(/static/images/logo.png);
    --add_icon: url(/static/images/add.png);
    --edit_icon: url(/static/images/edit.png);
    --login_icon: url(/static/images/login.png);
    --logout_icon: url(/static/images/logout.png);
    --refresh_icon: url(/static/images/refresh.png);
    --save_icon: url(/static/images/save.png);
    --search_icon: url(/static/images/search.png);
    --trash_icon: url(/static/images/trash.png);
}
        </pre>
      </article>
      {% endblock %}