{% extends "base.html" %}
{% set active_page = "worldmap" %}

{% block title %}Maps{% endblock %}
{% block content %}
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
    <h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Maps</h1>
</div>
<br/>
<div class="uk-container uk-container-small">
    <ul class="uk-subnav uk-subnav-pill uk-flex uk-flex-center" uk-switcher>
        <li><a href="#">World Map</a></li>
        <li><a href="#">Continent Overview</a></li>
        <li><a href="#">Continent Full</a></li>
    </ul>
    <ul class="uk-switcher uk-margin" uk-lightbox>
        <li><a href="{{ url_for('static', filename='WorldMap.png') }}"><img src="{{ url_for('static', filename='WorldMap.png') }}"/></a></li>
        <li><div>1 hex = 96 miles</div><a href="{{ url_for('static', filename='PalismaWorld.png') }}"><img src="{{ url_for('static', filename='PalismaWorld.png') }}"/></a></li>
        <li><div>1 hex = 24 miles</div><a href="{{ url_for('static', filename='PalismaContinent.png') }}"><img src="{{ url_for('static', filename='PalismaContinent.png') }}"/></a></li>
    </ul>
</div>
{% endblock %}

{% block head %}
<style>
h1 strong {
    display: block;
    font-size: 50%;
    opacity: 0.65;
}
</style>
{% endblock %}
