From 6599246439c382918a3780e9e459305ecaf60fe7 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Thu, 7 May 2020 17:47:30 +0100
Subject: [PATCH] Add blog item to blog page

---
 static/src/scss/content.scss | 26 ++++++++++++++++++++++++++
 templates/blog/index.html    |  6 +++---
 templates/blog/item.html     | 20 ++++++++++++++++++++
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 templates/blog/item.html

diff --git a/static/src/scss/content.scss b/static/src/scss/content.scss
index c1fc550..1444e32 100644
--- a/static/src/scss/content.scss
+++ b/static/src/scss/content.scss
@@ -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;
+    }
+  }
+}
diff --git a/templates/blog/index.html b/templates/blog/index.html
index 80b7931..5389ef5 100644
--- a/templates/blog/index.html
+++ b/templates/blog/index.html
@@ -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%}
diff --git a/templates/blog/item.html b/templates/blog/item.html
new file mode 100644
index 0000000..eef0f4a
--- /dev/null
+++ b/templates/blog/item.html
@@ -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>