Improve template markup

robbinjohansson · Jan 9, 2018 · 36743af · 36743af
1 parent 539e67e
commit 36743af
Show file tree

Hide file tree

Showing 21 changed files with 104 additions and 101 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+# v0.3.2
+## 01/09/2018
+
+1. [](#new)
+    * Add asset cache busting
+2. [](#improved)
+    * Improve template markup
+
 # v0.3.1
 ## 11/13/2017
 

diff --git a/...ages/blog/getgrav-is-pretty-cool/index.md → ...s/02.blog/getgrav-is-pretty-cool/index.md b/...ages/blog/getgrav-is-pretty-cool/index.md → ...s/02.blog/getgrav-is-pretty-cool/index.md
diff --git a/...blog/getgrav-is-pretty-cool/sample_01.jpg → ...blog/getgrav-is-pretty-cool/sample_01.jpg b/...blog/getgrav-is-pretty-cool/sample_01.jpg → ...blog/getgrav-is-pretty-cool/sample_01.jpg
diff --git a/_demo/pages/blog/index.md → _demo/pages/02.blog/index.md b/_demo/pages/blog/index.md → _demo/pages/02.blog/index.md
@@ -1,5 +1,6 @@
 ---
 title: Blog
+visible: true
 template: blog
 ---
 

diff --git a/_demo/pages/blog/sun-is-shining/index.md → _demo/pages/02.blog/sun-is-shining/index.md b/_demo/pages/blog/sun-is-shining/index.md → _demo/pages/02.blog/sun-is-shining/index.md
diff --git a/...o/pages/blog/sun-is-shining/sample_02.jpg → ...ages/02.blog/sun-is-shining/sample_02.jpg b/...o/pages/blog/sun-is-shining/sample_02.jpg → ...ages/02.blog/sun-is-shining/sample_02.jpg
diff --git a/...o/pages/blog/today-is-a-good-day/index.md → ...ages/02.blog/today-is-a-good-day/index.md b/...o/pages/blog/today-is-a-good-day/index.md → ...ages/02.blog/today-is-a-good-day/index.md
diff --git a/...es/blog/today-is-a-good-day/sample_03.jpg → ...02.blog/today-is-a-good-day/sample_03.jpg b/...es/blog/today-is-a-good-day/sample_03.jpg → ...02.blog/today-is-a-good-day/sample_03.jpg
diff --git a/_demo/pages/02.github/external.md → _demo/pages/03.github/external.md b/_demo/pages/02.github/external.md → _demo/pages/03.github/external.md
@@ -1,5 +1,6 @@
 ---
 title: Github
+visible: true
 external_url: 'https://github.com/robbinfellow/haywire-grav'
 ---
 
diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,5 +1,5 @@
 name: Haywire
-version: 0.3.1
+version: 0.3.2
 description: Starter theme/boilerplate for developers to get up and running quickly on new Grav projects using modern frameworks and tools such as laravel-mix, vuejs, and bulma.
 icon: empire
 author:

diff --git a/dist/css/app.css b/dist/css/app.css
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=0329616e212602344904",
-    "/css/app.css": "/css/app.css?id=beadfbce7d412c481f88"
+    "/css/app.css": "/css/app.css?id=8be749afe4db420d4367"
 }
diff --git a/js/app.js b/js/app.js
@@ -1,15 +1,9 @@
-/**
-* Include polyfill for vue (IE)
-*/
 
+// Include polyfill for vue (IE)
 import "babel-polyfill";
 
-/**
- * Load all of this project's JavaScript dependencies including Vue
- */
-
+// Load all of this project's JavaScript dependencies including Vue
 require('./bootstrap');
-
 window.Vue = require('vue');
 
 /**

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "haywire-grav",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "homepage": "https://github.com/robbinfellow/haywire-grav#readme",
   "author": "Robbin Johansson <robbinfellow@gmail.com>",
   "repository": {

diff --git a/sass/common/_general.sass b/sass/common/_general.sass
@@ -1,3 +1,4 @@
 
-.is-rounded 
+.is-rounded
     border-radius: 50%
+    overflow: hidden
diff --git a/templates/blog.html.twig b/templates/blog.html.twig
@@ -1,38 +1,41 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
-    <div class="container">
-        <div class="columns">
-            <div class="column is-8 is-offset-2">
-
-                <div class="columns">
-                    <div class="column content">
-                        {{ page.content }}
-                    </div>
-                </div>
+<div class="container">
+    <div class="columns">
+        <div class="column is-8 is-offset-2">
+
+            <div class="content">
+                {{ page.content }}
+            </div>
 
-                <hr>
+            <hr>
 
-                <div class="columns is-multiline">
-                    {% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
-                    <div class="column is-12">
-                        <strong class="title is-5">
-                            <a href="{{ base_url }}{{ post.route }}">
-                                {{ post.title }}
-                            </a>
-                        </strong>
-                        <div class="summary">
+            {% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
+            <div class="box">
+                <article class="media">
+                    <div class="media-left">
+                        <figure class="image is-96x96">
+                            <img src="{{ post.url }}/{{ post.header.featured_image }}" alt="Image">
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <div class="content">
+                            <strong class="title is-size-5">
+                                <a href="{{ base_url }}{{ post.route }}">
+                                    {{ post.title }}
+                                </a>
+                            </strong>
                             {% if post.summary %}
-                                {{ post.summary(320) }}
-                            {% else %}
-                                <em>This post has no summary!</em>
+                                {{ post.summary(180) }}
                             {% endif %}
                         </div>
                     </div>
-                    {% endfor %}
-                </div>
-
+                </article>
             </div>
+            {% endfor %}
+
         </div>
     </div>
+</div>
 {% endblock %}
diff --git a/templates/default.html.twig b/templates/default.html.twig
@@ -1,19 +1,13 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
-
 <div class="container">
     <div class="columns">
         <div class="column is-8 is-offset-2">
-
-            <div class="columns">
-                <div class="column content">
-                    {{ page.content }}
-                </div>
+            <div class="content">
+                {{ page.content }}
             </div>
-
         </div>
     </div>
 </div>
-
 {% endblock %}
diff --git a/templates/error.html.twig b/templates/error.html.twig
@@ -1,12 +1,12 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
-    <div class="container">
-        <article class="message is-danger">
-            <div class="message-body">
-                <strong>{{ 'ERROR'|t }} {{ page.header.http_response_code }}</strong>
-                {{ page.content }}
-            </div>
-        </article>
+<div class="container">
+    <div class="notification is-danger">
+        <strong>
+            {{ 'ERROR'|t }} {{ page.header.http_response_code }}
+        </strong>
+        {{ page.content }}
     </div>
+</div>
 {% endblock %}
diff --git a/templates/home.html.twig b/templates/home.html.twig
@@ -1,38 +1,41 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
-    <div class="container">
-        <div class="columns">
-            <div class="column is-8 is-offset-2">
-
-                <div class="columns">
-                    <div class="column content">
-                        {{ page.content }}
-                    </div>
-                </div>
+<div class="container">
+    <div class="columns">
+        <div class="column is-8 is-offset-2">
+
+            <div class="content">
+                {{ page.content }}
+            </div>
 
-                <hr>
+            <hr>
 
-                <div class="columns is-multiline">
-                    {% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
-                    <div class="column is-12">
-                        <strong class="title is-5">
-                            <a href="{{ base_url }}{{ post.route }}">
-                                {{ post.title }}
-                            </a>
-                        </strong>
-                        <div class="summary">
+            {% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
+            <div class="box">
+                <article class="media">
+                    <div class="media-left">
+                        <figure class="image is-96x96">
+                            <img src="{{ post.url }}/{{ post.header.featured_image }}" alt="Image">
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <div class="content">
+                            <strong class="title is-size-5">
+                                <a href="{{ base_url }}{{ post.route }}">
+                                    {{ post.title }}
+                                </a>
+                            </strong>
                             {% if post.summary %}
-                                {{ post.summary(320) }}
-                            {% else %}
-                                <em>This post has no summary!</em>
+                                {{ post.summary(180) }}
                             {% endif %}
                         </div>
                     </div>
-                    {% endfor %}
-                </div>
-
+                </article>
             </div>
+            {% endfor %}
+
         </div>
     </div>
+</div>
 {% endblock %}
diff --git a/templates/item.html.twig b/templates/item.html.twig
@@ -1,26 +1,29 @@
 {% extends 'partials/base.html.twig' %}
 
 {% block content %}
+<div class="columns">
+    <div class="column is-8 is-offset-2">
 
-    <div class="columns">
-        <div class="column is-8 is-offset-2">
-
-            <div class="columns is-multiline post">
-                <div class="column is-2 is-4-mobile">
-                    <img class="image is-rounded" src="{{ page.url }}/{{ page.header.featured_image }}">
-                </div>
-
-                <div class="column is-12">
-                    <h1 class="title">
-                        {{ page.title }}
-                    </h1>
-                    <div class="content">
-                        {{ page.content }}
-                        <small class="is-size-7">Published {{ page.header.publish_date }}</small>
-                    </div>
+        <div class="columns is-centered is-multiline">
+            <div class="column is-12">
+                <figure class="image is-128x128 is-rounded" style="margin: 0 auto;">
+                    <img src="{{ page.url }}/{{ page.header.featured_image }}" alt="Image">
+                </figure>
+            </div>
+            <div class="column is-6 has-text-centered">
+                <h1 class="title" style="margin-bottom: 10px;">
+                    {{ page.title }}
+                </h1>
+                <small class="is-size-7">Published {{ page.header.publish_date }}</small>
+            </div>
+            <div class="column is-10">
+                <hr>
+                <div class="content">
+                    {{ page.content }}
                 </div>
             </div>
         </div>
-    </div>
 
+    </div>
+</div>
 {% endblock %}
diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig
@@ -8,22 +8,17 @@
 </head>
 <body class="{{ page.header.body_classes }}">
 
-{# Wrapping our content in #app to allow vue components #}
+{# Wrap content in #app to allow vue components #}
 <div id="app">
-
     {% include 'partials/navbar.html.twig' %}
-
     <section class="section">
         {% block content %}{% endblock %}
     </section>
-
     {% include 'partials/footer.html.twig' %}
-
 </div>
 
 {% block bottom %}
     {{ assets.js('bottom') }}
 {% endblock %}
-
 </body>
 </html>