From 213b846b6f2abc10488c6a83256fb4c0301d5a18 Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Sat, 2 May 2020 21:49:27 +0100 Subject: [PATCH] Create a content template with header image --- static/src/js/index.js | 1 + static/src/scss/index.scss | 17 ++++++++ templates/about.html | 80 +++++++++++++++++++++++++++++++++++++- templates/base.html | 6 +-- templates/content.html | 13 +++++++ 5 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 templates/content.html diff --git a/static/src/js/index.js b/static/src/js/index.js index 67e60e9..2390816 100644 --- a/static/src/js/index.js +++ b/static/src/js/index.js @@ -1,3 +1,4 @@ document.addEventListener("DOMContentLoaded", function() { M.Sidenav.init(document.querySelectorAll(".sidenav"), {}); + M.Parallax.init(document.querySelectorAll(".parallax"), {}); }); diff --git a/static/src/scss/index.scss b/static/src/scss/index.scss index 4c88220..915fcc2 100644 --- a/static/src/scss/index.scss +++ b/static/src/scss/index.scss @@ -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; +} diff --git a/templates/about.html b/templates/about.html index e7b4146..f49f858 100644 --- a/templates/about.html +++ b/templates/about.html @@ -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 %} -

About

+ +

About

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endblock%} diff --git a/templates/base.html b/templates/base.html index 495ea83..667855c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -32,11 +32,7 @@ {% include "navigation/index.html" %}
- {% block main %} -
- {% block content %}{% endblock %} -
- {% endblock %} + {% block main %}{% endblock %}
{% block footer %} diff --git a/templates/content.html b/templates/content.html new file mode 100644 index 0000000..0aabf44 --- /dev/null +++ b/templates/content.html @@ -0,0 +1,13 @@ +{% extends "base.html" %} + +{% block main %} + {% block headerimagewrapper %} +
+
+
+ {% endblock %} + +
+ {% block content %}{% endblock %} +
+{% endblock%}