1
Fork 0

Simplify homepage

I quite liked the old style
This commit is contained in:
Jake Howard 2020-04-20 20:57:02 +01:00
parent 30e77f3cfb
commit c66af9defa
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 9 additions and 50 deletions

View file

@ -1,24 +1,17 @@
.homepage-jumbotron { .homepage-jumbotron {
@extend .valign-wrapper, .center-align; @extend .center-align;
justify-content: center;
flex-direction: column;
color: white; color: white;
@media #{$large-and-up} { h1 {
height: calc(70vh - #{$navbar-height}); margin-top: 0;
}
@media #{$medium-and-down} {
height: calc(100vh - #{$navbar-height});
} }
} }
.homepage-recent-content { .homepageview > main {
h2 { display: flex;
@extend .center-align; justify-content: center;
align-items: center;
margin-bottom: $element-bottom-margin * 2; background-image: url('../img/header.jpg');
}
} }

View file

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