Redesign and improvements

- Redesign base theme layout - Blog improvements
robbinjohansson · Feb 27, 2018 · 0b30239 · 0b30239
1 parent 6571c0b
commit 0b30239
Show file tree

Hide file tree

Showing 21 changed files with 113 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,15 +3,21 @@
 
 1. [](#new)
     * Add favicon
+    * Add intro to blog items
+    * Add tags to blog items
 2. [](#improved)
     * Remove redundant blueprints
-    * Update theme languages
-    * Improve blog/item blueprints
+    * Update theme languages strings
+    * Improve blog item blueprints
     * Update theme screenshot/thumbnail (now uses correct ratio/sizes)
     * Update demo pages
     * Add `.is-right` modifier to navbar-dropdown by default
-    * Better twig templates markup
     * Remove `_general.sass`
+    * Redesign all page templates
+    * Overall markup improvements
+    * Dates are now printed using `nicetime()`
+    * Reset style of bulma `box` element
+    * Post `thumbnail` > `featured_image`
 
 # v0.3.5
 ## 02/12/2018

diff --git a/_demo/pages/02.blog/01.fruitcake-chocolate-cake/blog.md b/_demo/pages/02.blog/01.fruitcake-chocolate-cake/blog.md
@@ -1,7 +1,8 @@
 ---
 title: 'Fruitcake chocolate cake'
 media_order: demo_01.jpg
-post_thumbnail: demo_01.jpg
+featured_image: demo_01.jpg
+intro: 'I love fruitcake chocolate cake donut halvah apple pie chocolate cake. Dessert cotton candy gummies candy carrot cake liquorice macaroon. Jelly dessert apple pie cotton candy brownie carrot cake. I love cotton candy tootsie roll croissant cake topping pastry.'
 published: true
 publish_date: '2018-02-15 13:37'
 taxonomy:

diff --git a/_demo/pages/02.blog/01.fruitcake-chocolate-cake/demo_01.jpg b/_demo/pages/02.blog/01.fruitcake-chocolate-cake/demo_01.jpg
diff --git a/_demo/pages/02.blog/02.jelly-o-brownie/blog.md b/_demo/pages/02.blog/02.jelly-o-brownie/blog.md
@@ -1,7 +1,8 @@
 ---
 title: 'Jelly-o brownie'
 media_order: demo_02.jpg
-post_thumbnail: demo_02.jpg
+featured_image: demo_02.jpg
+intro: 'Candy canes jelly-o brownie dessert sugar plum toffee candy canes marzipan. Bear claw lemon drops jujubes lemon drops cookie cheesecake gummies. Jujubes jelly ice cream halvah muffin chocolate cake cookie danish.'
 published: true
 publish_date: '2018-02-08 13:37'
 taxonomy:

diff --git a/_demo/pages/02.blog/02.jelly-o-brownie/demo_02.jpg b/_demo/pages/02.blog/02.jelly-o-brownie/demo_02.jpg
diff --git a/_demo/pages/02.blog/03.muffin-icing/blog.md b/_demo/pages/02.blog/03.muffin-icing/blog.md
@@ -1,7 +1,8 @@
 ---
 title: 'Muffin icing'
 media_order: demo_03.jpg
-post_thumbnail: demo_03.jpg
+featured_image: demo_03.jpg
+intro: 'Candy canes dragée jujubes muffin icing. Chocolate cake dessert macaroon dessert sesame snaps tart danish croissant. Sweet jelly pastry chocolate cake gummi bears marzipan gingerbread jelly. Sweet chupa chups gingerbread bonbon.'
 published: true
 publish_date: '2018-02-01 13:37'
 taxonomy:

diff --git a/_demo/pages/02.blog/03.muffin-icing/demo_03.jpg b/_demo/pages/02.blog/03.muffin-icing/demo_03.jpg
diff --git a/blueprints.yaml b/blueprints.yaml
@@ -1,5 +1,5 @@
 name: Haywire
-version: 0.3.5
+version: 0.4.0
 description: A modern starter theme for Grav CMS using modern frameworks and tools such as Laravel Mix, Vuejs, Bulma.
 icon: empire
 author:

diff --git a/blueprints/item.yaml b/blueprints/item.yaml
@@ -7,19 +7,26 @@ form:
       fields:
         content:
           fields:
-            thumbnail:
+            featured_image:
               type: section
-              title: HAYWIRE.THUMBNAIL
+              title: HAYWIRE.FEATURED_IMAGE
               underline: true
               fields:
-                header.post_thumbnail:
+                header.featured_image:
                   type: filepicker
-                  label: HAYWIRE.THUMBNAIL
-                  help: HAYWIRE.THUMBNAIL_HELP
-                  placeholder: HAYWIRE.THUMBNAIL_PLACEHOLDER
+                  label: HAYWIRE.FEATURED_IMAGE
+                  placeholder: HAYWIRE.FEATURED_IMAGE_PLACEHOLDER
                   folder: 'self@'
                   toggleable: true
                   preview_images: true
                   acccept:
                     - .png
                     - .jpg
+            intro:
+              type: section
+              title: HAYWIRE.INTRO
+              underline: true
+              fields:
+                header.intro:
+                  type: editor
+                  label: HAYWIRE.INTRO_LABEL
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=6248d161f0328e822330",
-    "/css/app.css": "/css/app.css?id=9be623667eb065261cf4"
+    "/css/app.css": "/css/app.css?id=93cc557f1fa4c26b47bf"
 }
diff --git a/languages.yaml b/languages.yaml
@@ -1,5 +1,6 @@
 en:
   HAYWIRE:
-    THUMBNAIL: 'Thumbnail'
-    THUMBNAIL_HELP: 'Set post thumbnail image'
-    THUMBNAIL_PLACEHOLDER: 'Choose from page media'
+    FEATURED_IMAGE: 'Featured image'
+    FEATURED_IMAGE_PLACEHOLDER: 'Choose from page media'
+    INTRO: 'Intro'
+    INTRO_LABEL: 'Intro text'
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "haywire-grav",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "homepage": "https://github.com/robbinfellow/haywire-grav#readme",
   "author": "Robbin Johansson <robbinfellow@gmail.com>",
   "license": "MIT",

diff --git a/resources/sass/_variables.sass b/resources/sass/_variables.sass
@@ -1,2 +1,6 @@
 
 // Use this file to override default bulma variables
+$box-radius: 0
+$box-shadow: none
+$box-padding: .75rem 0
+$hr-background-color: hsla(0, 0%, 0%, 0.05)
diff --git a/screenshot.jpg b/screenshot.jpg
diff --git a/templates/blog.html.twig b/templates/blog.html.twig
@@ -2,8 +2,8 @@
 
 {% block content %}
 <div class="container">
-    <div class="columns">
-        <div class="column is-8 is-offset-2">
+    <div class="columns is-centered">
+        <div class="column is-7">
 
             <div class="content">
                 <h1>
@@ -12,43 +12,37 @@
                 {{ page.content }}
             </div>
 
+            <hr>
+
             {% for post in page.find('/blog').children.order('publish_date', 'desc').slice(0, 3) %}
             <div class="box">
-                <article class="media">
-
-                    {% if post.header.post_thumbnail %}
-                    <div class="media-left">
-                        <figure class="image is-96x96">
-                            <img src="{{ post.url }}/{{ post.header.post_thumbnail }}?cropResize=192,192" alt="{{ post.title }}">
-                        </figure>
-                    </div>
-                    {% endif %}
-
-                    <div class="media-content" style="overflow: initial;">
-                        <div class="content">
-                            <strong class="title is-size-5">
-                                <a href="{{ post.url }}">
+                <a href="{{ post.url }}" style="color: #4a4a4a;">
+                    <article class="media">
+
+                        <div class="media-content" style="overflow: initial;">
+                            <div class="content">
+                                <strong class="title is-size-5">
                                     {{ post.title }}
-                                </a>
-                            </strong>
-                            <small>
-                                {{ post.header.publish_date|nicetime() }}
-                            </small>
-                            {{ post.summary(180) }}
-                        </div>
-                        {% if post.header.taxonomy.tag %}
-                            <div class="tags">
-                            {% for tag in post.header.taxonomy.tag %}
-                                <span class="tag">
-                                    {{ tag }}
-                                </span>
-                            {% endfor %}
+                                </strong>
+                                {{ post.header.intro|truncate(120)|markdown }}
+                                <small>
+                                    {{ post.header.publish_date|nicetime() }}
+                                </small>
                             </div>
+                        </div>
+
+                        {% if post.header.featured_image %}
+                        <div class="media-right">
+                            <figure class="image">
+                                <img src="{{ post.url }}/{{ post.header.featured_image }}?cropResize=160,120" alt="{{ post.title }}">
+                            </figure>
+                        </div>
                         {% endif %}
-                    </div>
 
-                </article>
+                    </article>
+                </a>
             </div>
+            <hr>
             {% endfor %}
 
         </div>

diff --git a/templates/default.html.twig b/templates/default.html.twig
@@ -2,8 +2,8 @@
 
 {% block content %}
 <div class="container">
-    <div class="columns">
-        <div class="column is-8 is-offset-2">
+    <div class="columns is-centered">
+        <div class="column is-7">
 
             <div class="content">
                 <h1>

diff --git a/templates/error.html.twig b/templates/error.html.twig
@@ -2,11 +2,17 @@
 
 {% block content %}
 <div class="container">
-    <div class="notification is-danger">
-        <strong>
-            {{ 'ERROR'|t }} {{ page.header.http_response_code }}
-        </strong>
-        {{ page.content }}
+    <div class="columns is-centered">
+        <div class="column is-7">
+
+            <div class="notification is-danger">
+                <strong>
+                    {{ 'ERROR'|t }} {{ page.header.http_response_code }}
+                </strong>
+                {{ page.content }}
+            </div>
+
+        </div>
     </div>
 </div>
 {% endblock %}
diff --git a/templates/external.html.twig b/templates/external.html.twig
@@ -8,13 +8,19 @@
 
 {% block content %}
 <div class="container">
-    <div class="notification is-danger">
-        <strong>
-            {{ 'ERROR'|t }}
-        </strong>
-        <p>
-            This page is not available.
-        </p>
+    <div class="columns is-centered">
+        <div class="column is-7">
+
+            <div class="notification is-danger">
+                <strong>
+                    {{ 'ERROR'|t }}
+                </strong>
+                <p>
+                    This page is not available.
+                </p>
+            </div>
+
+        </div>
     </div>
 </div>
 {% endblock %}
diff --git a/templates/item.html.twig b/templates/item.html.twig
@@ -2,15 +2,28 @@
 
 {% block content %}
 <div class="container">
-    <div class="columns">
-        <div class="column is-8 is-offset-2">
-
-            <div class="content">
-                <h1>
-                    {{ page.title }}
-                </h1>
-                {{ page.content }}
+    <div class="columns is-centered">
+        <div class="column is-7">
+
+        <div class="content">
+            <h1>
+                {{ page.title }}
+            </h1>
+
+            {% if page.header.intro %}
+            <div class="is-size-5">
+                {{ page.header.intro|markdown }}
             </div>
+            {% endif %}
+
+            {% if page.header.featured_image %}
+            <figure class="image is-4by3" style="margin-left: 0; margin-right: 0;">
+                <img src="{{ page.url }}/{{ page.header.featured_image }}?cropResize=768,576" alt="{{ page.title }}">
+            </figure>
+            {% endif %}
+
+            {{ page.content }}
+         </div>
 
             {% if page.header.taxonomy.tag %}
                 <div class="tags">

diff --git a/thumbnail.jpg b/thumbnail.jpg