pin footer at the bottom of the viewport, resolves #26
This commit is contained in:
		
							parent
							
								
									d553d58fde
								
							
						
					
					
						commit
						4ebe6f2a37
					
				| 
						 | 
					@ -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;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue