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

Add blog item to blog page

Browse source
This commit is contained in:
Jake Howard 2020-05-07 17:47:30 +01:00
parent 7b3e583007
commit 6599246439
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 49 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
static/src/scss/content.scss
View file

@ -41,3 +41,29 @@ h1.page-title {
height: 100%;
}
}
.page-list {
.card {
background-color: transparent;
box-shadow: none;
}
.card + .card {
margin-top: 2rem;
}
.card-image {
max-width: 25% !important;
margin: auto 0;
}
@media #{$small-and-down} {
.card {
display: initial;
}
.card-image {
max-width: initial !important;
}
}
}

6
templates/blog/index.html
View file

@ -1,9 +1,9 @@
{% extends "content.html" %}
{% load static %}
{% block title %}Blog{% endblock %}
{% block content %}
<div class="row page-list">
{% include "blog/item.html" %}
</div>
{% endblock%}

20
templates/blog/item.html Normal file
View file

@ -0,0 +1,20 @@
{% load static %}
<div class="col s12">
<div class="card horizontal">
<div class="card-image">
<img src="{% static 'img/header.jpg' %}">
</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
<a href="#">Read More</a>
<p class="right"><i class="far fa-calendar-alt pr-1"></i> 2020-01-01 &emsp;<i class="far fa-clock pr-1"></i> 10 minutes</p>
</div>
</div>
</div>
</div>