pin footer at the bottom of the viewport, resolves #26

This commit is contained in:
meeb 2021-01-20 17:42:16 +11:00
parent d553d58fde
commit 4ebe6f2a37
2 changed files with 35 additions and 24 deletions

View File

@ -5,6 +5,13 @@ html {
color: $text-colour; color: $text-colour;
} }
body {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}
header { header {
background-color: $header-background-colour; background-color: $header-background-colour;

View File

@ -16,32 +16,36 @@
<body> <body>
<header> <div class="app">
<div class="container">
<a href="{% url 'sync:dashboard' %}">
{% include 'tubesync.svg' with width='3rem' height='3rem' %}
<h1>TubeSync</h1>
</a>
</div>
</header>
<nav> <header>
<div class="container"> <div class="container">
<ul> <a href="{% url 'sync:dashboard' %}">
<li><a href="{% url 'sync:dashboard' %}"><i class="fas fa-fw fa-th-large"></i><span class="hide-on-med-and-down"> Dashboard</span></a></li> {% include 'tubesync.svg' with width='3rem' height='3rem' %}
<li><a href="{% url 'sync:sources' %}"><i class="fas fa-fw fa-play"></i><span class="hide-on-med-and-down"> Sources</span></a></li> <h1>TubeSync</h1>
<li><a href="{% url 'sync:media' %}"><i class="fas fa-fw fa-film"></i><span class="hide-on-med-and-down"> Media</span></a></li> </a>
<li><a href="{% url 'sync:tasks' %}"><i class="far fa-fw fa-clock"></i><span class="hide-on-med-and-down"> Tasks</span></a></li> </div>
<li><a href="{% url 'sync:mediaservers' %}"><i class="fas fa-fw fa-stream"></i><span class="hide-on-med-and-down"> Media Servers</span></a></li> </header>
</ul>
</div>
</nav>
<main> <nav>
<div class="container"> <div class="container">
{% block content %}{% endblock %} <ul>
</div> <li><a href="{% url 'sync:dashboard' %}"><i class="fas fa-fw fa-th-large"></i><span class="hide-on-med-and-down"> Dashboard</span></a></li>
</main> <li><a href="{% url 'sync:sources' %}"><i class="fas fa-fw fa-play"></i><span class="hide-on-med-and-down"> Sources</span></a></li>
<li><a href="{% url 'sync:media' %}"><i class="fas fa-fw fa-film"></i><span class="hide-on-med-and-down"> Media</span></a></li>
<li><a href="{% url 'sync:tasks' %}"><i class="far fa-fw fa-clock"></i><span class="hide-on-med-and-down"> Tasks</span></a></li>
<li><a href="{% url 'sync:mediaservers' %}"><i class="fas fa-fw fa-stream"></i><span class="hide-on-med-and-down"> Media Servers</span></a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
{% block content %}{% endblock %}
</div>
</main>
</div>
<footer> <footer>
<div class="container"> <div class="container">