archive/website-2020-spike
Archived
1
Fork 0
Code Releases Packages Activity

Create a content template with header image

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/src/js/index.js
View file

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

17
static/src/scss/index.scss
View file

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

78
templates/about.html
View file

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

6
templates/base.html
View file

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