Create a content template with header image
This commit is contained in:
parent
b0faca2f21
commit
213b846b6f
5 changed files with 110 additions and 7 deletions
|
@ -1,3 +1,4 @@
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
M.Sidenav.init(document.querySelectorAll(".sidenav"), {});
|
||||
M.Parallax.init(document.querySelectorAll(".parallax"), {});
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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%}
|
||||
|
|
|
@ -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
13
templates/content.html
Normal 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%}
|
Reference in a new issue