1
Fork 0

Make the homepage

This commit is contained in:
Jake Howard 2020-04-13 12:32:26 +01:00
parent 4a31f0fcf6
commit f3ab567e47
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 79 additions and 5 deletions

View file

@ -16,3 +16,6 @@ cp node_modules/materialize-css/dist/js/materialize.min.js static/build/js/mater
# Install fontawesome # Install fontawesome
cp node_modules/@fortawesome/fontawesome-free/css/all.min.css static/build/css/font-awesome.min.css cp node_modules/@fortawesome/fontawesome-free/css/all.min.css static/build/css/font-awesome.min.css
cp -r node_modules/@fortawesome/fontawesome-free/webfonts static/build/ cp -r node_modules/@fortawesome/fontawesome-free/webfonts static/build/
# Install images
cp -r static/src/img static/build/

BIN
static/src/img/header.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 784 KiB

View file

@ -1,5 +1,7 @@
@import "materialize-css/sass/materialize"; @import "materialize-css/sass/materialize";
$navbar-height: 50px;
body { body {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
@ -13,3 +15,28 @@ main {
footer.page-footer { footer.page-footer {
padding-top: 0; padding-top: 0;
} }
.index-jumbotron {
@extend .valign-wrapper, .center-align;
justify-content: center;
flex-direction: column;
color: white;
@media #{$large-and-up} {
height: calc(70vh - #{$navbar-height});
}
@media #{$medium-and-down} {
height: calc(100vh - #{$navbar-height});
}
}
.index-recent-content {
h2 {
@extend .center-align;
margin-bottom: $element-bottom-margin * 2;
}
}

View file

@ -33,9 +33,12 @@
</header> </header>
<main> <main>
{% block main %}
<div class="container"> <div class="container">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
{% endblock %}
</main> </main>
<footer class="page-footer black"> <footer class="page-footer black">
@ -55,5 +58,7 @@
var instances = M.Sidenav.init(elems, {}); var instances = M.Sidenav.init(elems, {});
}); });
</script> </script>
{% block extrascripts %}{% endblock %}
</body> </body>
</html> </html>

View file

@ -0,0 +1,13 @@
<div class="row">
<div class="card">
<div class="card-content">
<p>
I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.
</p>
</div>
<div class="card-action">
<a href="#">Read More</a>
</div>
</div>
</div>

View file

@ -1,7 +1,33 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %}
{% block title %}Homepage{% endblock %} {% block title %}Homepage{% endblock %}
{% block content %} {% block main %}
Homepage content <div class="index-jumbotron parallax-container">
<div class="parallax">
<img src="{% static 'img/header.jpg' %}" />
</div>
<h1>Jake Howard</h1>
<p class="flow-text">Part Developer. Part SysAdmin. Part InfoSec. All Nerd!</p>
</div>
<div class="container index-recent-content">
<h2>Recent Content</h2>
{% include "card-list-item.html" %}
</div>
{% endblock%}
{% block extrascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.parallax');
var instances = M.Parallax.init(elems, {});
});
</script>
{% endblock %} {% endblock %}