first push

templates/index.html

@@ -0,0 +1,32 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="uk-container">
+        <div class="grid-container masonry-grid">
+            {% for post in posts %}
+                <div class="blog-card uk-card uk-card-default">
+                    <div class="uk-card-media-top">
+                        <img src="{{ post.thumbnail_img }}" alt="{{ post.title }}">
+                    </div>
+                    <div class="uk-card-body">
+                        <h3 class="uk-card-title">{{ post.title }}</h3>
+                        <!-- Truncate the contents to 100 characters, removing any HTML tags -->
+                        <p>{{ post.contents | striptags | truncate(100) }}</p>
+                        <a href="#" class="uk-button uk-button-text">Read more</a>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+    <script>
+        $(document).ready(function () {
+            $('.masonry-grid').masonry({
+                // options...
+                itemSelector: '.blog-card',
+                columnWidth: '.blog-card',
+                percentPosition: true
+            });
+        });
+    </script>
+
+{% endblock %}