{{ layout "templates/container.vto" }}
<script type="module" src="scripts/little-calendar.js"></script>

<div class="uk-grid">
    <div class="uk-large-1-3 uk-medium-2-3 uk-container-center">
        <div style="height:300px; width: 300px; background-size: 300px; background-image: url(images/logosansfond.JPG);" class="uk-cover-background uk-container-center uk-margin-left uk-margin-top"></div>
    </div>
</div>

<div class="uk-margin-top uk-margin-bottom uk-grid">
    <div class="uk-width-large-3-5 uk-width-medium-4-5 uk-width-small-1-1 uk-container-center">
        <div class="uk-grid uk-visible-large uk-grid-match">
            <div class="uk-width-large-1-3 uk-width-medium-1-3">
                <div class="uk-panel uk-panel-box">
                    <div class="uk-panel-badge uk-badge">
                        <i class="fa fa-newspaper-o" style="font-size: 1.7em;"></i>
                        </div>
                    <div>
                        {{ include "templates/includes/home-news.vto" }}
                    </div>
                </div>
            </div>
            <div class="uk-width-large-1-3 uk-width-medium-1-3">
                <div class="uk-panel uk-panel-box">
                    <div class="uk-panel-badge uk-badge"><i class="fa fa-calendar" style="font-size: 1.7em;"></i></div>
                    <h3 class="uk-panel-title"><a href="#/calendrier" class="uk-link-muted">Calendrier</a></h3>
                    <div id="large-mithril-container"></div>
                </div>
            </div>
            <div class="uk-width-large-1-3 uk-width-medium-1-3">
                <div class="uk-panel uk-panel-box">
                    <div class="uk-panel-badge uk-badge"><i class="fa fa-map-o" style="font-size: 1.7em;"></i></div>
                    <h3 class="uk-panel-title">Parc Walter-Stewart</h3>
                    {{ include "templates/includes/walter-stewart-map.vto" }}
                </div>
            </div>
        </div>

        <!-- start -->
        <div class="uk-visible-medium">
            <div class="uk-grid uk-grid-match">
                <div class="uk-width-medium-1-2">
                    <div class="uk-panel uk-panel-box">
                        <div class="uk-panel-badge uk-badge"><i class="fa fa-newspaper-o" style="font-size: 1.7em;"></i></div>
                        <div>
                            {{ include "templates/includes/home-news.vto" }}
                         </div>
                    </div>
                </div>
                <div class="uk-width-medium-1-2">
                    <div class="uk-panel uk-panel-box">
                        <div class="uk-panel-badge uk-badge"><i class="fa fa-calendar" style="font-size: 1.7em;"></i></div>
                        <h3 class="uk-panel-title"><a href="#/calendrier" class="uk-link-muted">Calendrier</a></h3>
                        <div id="medium-mithril-container"></div>
                    </div>
                </div>
            </div>
            <div class="uk-grid">
                <div class="uk-width-medium-1-1">
                    <div class="uk-panel uk-panel-box">
                        <div class="uk-panel-badge uk-badge"><i class="fa fa-map-o" style="font-size: 1.7em;"></i></div>
                        <h3 class="uk-panel-title">Parc Walter-Stewart</h3>
                        {{ include "templates/includes/walter-stewart-map.vto" }}
                    </div>
                </div>
            </div>
        </div>




        <!-- end -->
        <div class="uk-visible-small">
            <div class="uk-grid">
                <div class="uk-width-small-1-1">
                    <div class="uk-panel uk-panel-box">
                        <div class="uk-panel-badge uk-badge"><i class="fa fa-newspaper-o" style="font-size: 1.7em;"></i></div>
                        <div>
                            {{ include "templates/includes/home-news.vto" }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="uk-grid">
                <div class="uk-width-small-1-1">
                    <div class="uk-panel uk-panel-box">
                        <div class="uk-panel-badge uk-badge"><i class="fa fa-calendar" style="font-size: 1.7em;"></i></div>
                        <h3 class="uk-panel-title"><a href="#/calendrier" class="uk-link-muted">Calendrier</a></h3>
                        <div id="small-mithril-container">
                        </div>
                    </div>
                </div>
            </div>
            <div class="uk-grid">
                <div class="uk-width-small-1-1">
                    <div class="uk-panel uk-panel-box">
                        <div class="uk-panel-badge uk-badge"><i class="fa fa-map-o" style="font-size: 1.7em;"></i></div>
                        <h3 class="uk-panel-title">Parc Walter-Stewart</h3>
                        {{ include "templates/includes/walter-stewart-map.vto" }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{ /layout }}