Update templates & add UIkit
This commit is contained in:
parent
99dc771814
commit
efa3398992
2 changed files with 78 additions and 0 deletions
|
@ -1,3 +1,11 @@
|
|||
body {
|
||||
font: 400 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
}
|
||||
|
||||
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
|
||||
margin: 0 10px 0 calc(10px - 4px);
|
||||
}
|
|
@ -5,6 +5,11 @@
|
|||
{% load static %}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- UIkit CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/css/uikit.min.css" />
|
||||
<!-- UIkit JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.16/dist/js/uikit-icons.min.js"></script>
|
||||
<!-- Muistox CSS -->
|
||||
<link href="{% static 'css/muistox.css' %}" rel="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
|
||||
|
@ -13,11 +18,76 @@
|
|||
|
||||
<body>
|
||||
|
||||
<!-- Parallax -->
|
||||
{% block parallax %}
|
||||
{% endblock %}
|
||||
|
||||
<!-- Navbar -->
|
||||
{% block navbar %}
|
||||
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky;">
|
||||
<nav class="uk-navbar-container" uk-navbar>
|
||||
<div class="uk-navbar-left uk-margin-left">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li><a href="{% url 'gallery:main_url' %}"><span uk-icon="camera"></span></a></li>
|
||||
<li class="uk-visible@m"><a href="">Albums</a></li>
|
||||
<li class="uk-visible@m"><a href="">Photostream</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-navbar-right uk-margin-right">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li class="uk-visible@m"><a href="#">Contact</a></li>
|
||||
{% if user.is_authenticated %}
|
||||
<li class="uk-visible@m"><a href="{% url 'admin:index' %}">Admin</a></li>
|
||||
{% endif %}
|
||||
<li class="uk-hidden@m"><a class="uk-navbar-toggle" uk-navbar-toggle-icon uk-toggle="target: #offcanvas-nav"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Navbar mobile -->
|
||||
<div id="offcanvas-nav" uk-offcanvas="flip: true; overlay: true">
|
||||
<div class="uk-offcanvas-bar">
|
||||
<button class="uk-offcanvas-close" type="button" uk-close></button>
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
<li><a href="">Albums</a></li>
|
||||
<li><a href="">Photostream</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
{% if user.is_authenticated %}
|
||||
<li><a href="{% url 'admin:index' %}">Admin</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<!-- Header -->
|
||||
<header class="uk-align-center uk-container-large">
|
||||
<!-- Breadcrumb -->
|
||||
<nav class="uk-flex uk-flex-between uk-margin-small-top uk-margin-small-bottom" aria-label="Breadcrumb">
|
||||
<div class="uk-margin-left">
|
||||
<ul class="uk-breadcrumb">
|
||||
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
||||
{% block breadcrumb %}{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-margin-right">
|
||||
Right
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="uk-align-center uk-container-large">
|
||||
{% block content %} No Content {% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="uk-align-center uk-container-large uk-text-center uk-text-light">
|
||||
© {% now "Y" %} Nyymix, powered by <a href="https://git.hakkeri.net/nyymix/muistox">muistox</a>.
|
||||
</footer>
|
||||
|
||||
<!-- Muistox JS -->
|
||||
<script src="{% static 'js/muistox.js' %}" type="text/javascript"></script>
|
||||
|
||||
|
|
Loading…
Reference in a new issue