1
Fork 0

Create a content template with header image

This commit is contained in:
Jake Howard 2020-05-02 21:49:27 +01:00
parent b0faca2f21
commit 213b846b6f
Signed by: jake
GPG key ID: 57AFB45680EDD477
5 changed files with 110 additions and 7 deletions

View file

@ -1,3 +1,4 @@
document.addEventListener("DOMContentLoaded", function() {
M.Sidenav.init(document.querySelectorAll(".sidenav"), {});
M.Parallax.init(document.querySelectorAll(".parallax"), {});
});

View file

@ -5,9 +5,12 @@
$sidenav-width: 275px;
body {
@extend .grey-text, .text-lighten-3;
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: #17181C;
}
main {
@ -21,9 +24,19 @@ main {
footer.page-footer {
padding-top: 0;
@media #{$large-and-up} {
margin-left: $sidenav-width;
}
}
.sidenav {
background-color: #17181C;
li > a {
@extend .grey-text, .text-lighten-3;
}
width: $sidenav-width;
@media #{$large-and-up} {
@ -36,3 +49,7 @@ nav {
display: none;
}
}
.header-image {
height: $sidenav-width * 1.5;
}

View file

@ -1,9 +1,85 @@
{% extends "base.html" %}
{% extends "content.html" %}
{% load static %}
{% block title %}About{% endblock %}
{% block headerimage %}{% static "img/header.jpg" %}{% endblock %}
{% block content %}
<h1>About</h1>
<h1>About</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
{% endblock%}

View file

@ -32,11 +32,7 @@
{% include "navigation/index.html" %}
<main>
{% block main %}
<div class="container">
{% block content %}{% endblock %}
</div>
{% endblock %}
{% block main %}{% endblock %}
</main>
{% block footer %}

13
templates/content.html Normal file
View file

@ -0,0 +1,13 @@
{% extends "base.html" %}
{% block main %}
{% block headerimagewrapper %}
<div class="header-image parallax-container">
<div class="parallax"><img src="{% block headerimage %}{% endblock %}" /></div>
</div>
{% endblock %}
<div class="container">
{% block content %}{% endblock %}
</div>
{% endblock%}