Blog and article styling

michelmany · Nov 7, 2018 · 9e5aa8b · 9e5aa8b
1 parent ea65937
commit 9e5aa8b
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -5,17 +5,9 @@
 * [Yarn](https://yarnpkg.com/en/) >= v1.7.0 **or** [npm](https://www.npmjs.com/) >= v6.1.0
 * [Nodejs](https://nodejs.org/en/) >= v8.11.1
 
-## Installation
-* Go your themes folder and run`composer create-project suomato/base-camp`
-* `cd base-camp`
-* `yarn` **or** `npm install`
-* define your custom webpack config to `build/config.js` file
-* `yarn watch` **or** `npm run watch`
-* Happy developing :)
-
 ## Structure
 ```
-base-camp/                                          # Theme root
+ticket-brazil/                                      # Theme root
 ├── app/                                            # Theme logic
 │   ├── config/                                     # Theme config
 │   │   ├── wp/                                     # WordPress specific config

diff --git a/resources/assets/sass/_single.sass b/resources/assets/sass/_single.sass
@@ -1,6 +1,7 @@
 .single
   .main-article
     position: relative
+    margin-bottom: 25px
 
     &__title
       @extend .title

diff --git a/resources/assets/sass/components/_article.sass b/resources/assets/sass/components/_article.sass
diff --git a/resources/assets/sass/components/index.sass b/resources/assets/sass/components/index.sass
@@ -1,4 +1,3 @@
-@import article
 @import comment
 @import navbar
 @import social-media

diff --git a/resources/assets/sass/pages/_blog.sass b/resources/assets/sass/pages/_blog.sass
@@ -2,18 +2,72 @@
 .blog
 
     &__item
+        margin-bottom: 35px
+        padding: 18px
+        background: $off-light
+
+        +tablet
+            padding: 33px
+
 
         &-thumbnail
-            background: $gray-dark center / cover no-repeat
-            min-height: 190px
+            background: #fff center / cover no-repeat
+            height: 180px
             margin-bottom: 25px
+            position: relative
+            transition: 0.4s
+            background-blend-mode: multiply
+            transition: background-color .25s
+
+            +tablet
+                height: 362px
+
+            +desktop
+                height: 445px
+
+
+            &:hover
+                transition: background-color .25s
+                background-color: $yellow
+
+            .thumbnail-overlay
+                position: absolute
+                width: 100%
+                height: 100%
+                color: #fff
+                text-transform: uppercase
+                display: flex
+                justify-content: center
+                align-items: center
+                font-size: 18px
+                font-weight: bold
+                letter-spacing: 2.8px        
+                transition: 0.2s
+                &:hover
+                    .thumbnail-overlay__text
+                        opacity: 1
+                        transform: scale(1)
+
+                &__text
+                    transition: 0.2s
+                    opacity: 0
+                    transform: scale(0.1)
+
 
         &-title
             @extend .title
             margin-bottom: 8px !important
 
+            a
+                color: $gray-dark
+                &:hover
+                    color: $bc-primary
+
             +mobile
-                font-size: 28px
+                font-size: 24px
 
         &-meta
-            margin-bottom: 25px
+            margin-bottom: 25px
+
+            i
+                font-size: 12px 
diff --git a/resources/views/components/article.twig b/resources/views/components/article.twig
@@ -1,10 +1,12 @@
-<div class="blog__item column is-half-tablet is-one-quarter-desktop" id="post-{{ post.ID }}">
 
-    {% set post_thumb = TimberImage(post.thumbnail) %}
-    
+<div class="blog__item" id="post-{{ post.ID }}">
+
     <a href="{{ post.link }}">
-        <div class="blog__item-thumbnail" 
-            style="background-image: url('{{ post_thumb.src|resize(1320)}}')"></div>
+        <div class="blog__item-thumbnail" style="background-image: url('{{ post.thumbnail.src|resize(1320)}}')">
+            <div class="thumbnail-overlay">
+                <div class="thumbnail-overlay__text">{{ __('Read more', 'base-camp') }}</div>
+            </div>
+        </div>
     </a>
 
     <h2 class="blog__item-title">
@@ -15,7 +17,7 @@
         <time class="timestamp"><i class="fa fa-calendar" aria-hidden="true"></i> <span>{{ post.date }}</span></time>
     </div>
 
-    <p class="content">{{ post.preview.length(30).force }}</p>
+    <p class="content">{{ post.preview.length(100).force.read_more('') }}</p>
 
     <ul class="article-tags">
         {% for tag in post.tags %}

diff --git a/resources/views/components/social-media.twig b/resources/views/components/social-media.twig
@@ -1,40 +1,38 @@
 <section class="social-media-share-icons">
 
   {# TUMBLR #}
-  <a target="_blank" title="tumblr" href="https://www.tumblr.com/share/link?url={{ post.link }}&name={{ post.title }}&description={{ post.post_excerpt }}">
+  {# <a target="_blank" title="tumblr" href="https://www.tumblr.com/share/link?url={{ post.link }}&name={{ post.title }}&description={{ post.post_excerpt }}">
     <i class="fa fa-tumblr-square tumblr" aria-hidden="true"></i>
-  </a>
+  </a> #}
 
   {# FACEBOOK #}
   <a target="_blank" title="Facebook" href="http://www.facebook.com/sharer.php?u={{ post.link }}">
     <i class="fa fa-facebook-square facebook" aria-hidden="true"></i>
   </a>
 
   {# LINKEDIN #}
-  <a target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?url={{ post.link }}&title={{ post.title }}">
+  {# <a target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?url={{ post.link }}&title={{ post.title }}">
     <i class="fa fa-linkedin-square linkedin" aria-hidden="true"></i>
-  </a>
+  </a> #}
 
   {# TWITTER #}
   <a target="_blank" title="Twitter" href="https://twitter.com/share?url={{ post.link }}&text={{ post.title }}&hashtags={{ function('implode', ',', post.tags) }}">
     <i class="fa fa-twitter-square twitter" aria-hidden="true"></i>
   </a>
 
   {# PINTEREST #}
-  <a target="_blank" title="Pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{ post.thumbnail }}&url={{ post.link }}&description={{ post.title }}">
+  {# <a target="_blank" title="Pinterest" href="https://pinterest.com/pin/create/bookmarklet/?media={{ post.thumbnail }}&url={{ post.link }}&description={{ post.title }}">
     <i class="fa fa-pinterest-square pinterest" aria-hidden="true"></i>
-  </a>
+  </a> #}
 
   {# GOOGLE PLUS #}
   <a target="_blank" title="Google+" href="https://plus.google.com/share?url={{ post.link }}">
     <i class="fa fa-google-plus-square google-plus" aria-hidden="true"></i>
   </a>
 
   {# REDDIT #}
-  <a target="_blank" title="Reddit" href="https://reddit.com/submit?url={{ post.link }}&title={{ post.title }}">
+  {# <a target="_blank" title="Reddit" href="https://reddit.com/submit?url={{ post.link }}&title={{ post.title }}">
     <i class="fa fa-reddit-square reddit" aria-hidden="true"></i>
-  </a>
-
+  </a> #}
 </section>
 
-<hr />
diff --git a/resources/views/front-page.twig b/resources/views/front-page.twig
@@ -98,7 +98,7 @@
                                     <a href="{{ post.link }}">{{ post.title }}</a></div>
 
                                     <div class="latest-articles__item-copy">
-                                        {{ post.preview.length(25).force }}
+                                        {{ post.preview.length(30).force.read_more('') }}
                                     </div>
                             </div>
                         </div>

diff --git a/resources/views/index.twig b/resources/views/index.twig
@@ -3,11 +3,17 @@
 {% block content %}
     <section class="blog section">
         <div class="container">
-            <div class="columns">
-                {% for post in posts %}
-                    {% include 'components/article.twig' %}
-                {% endfor %}
+            <div class="columns is-desktop">
+                <div class="column is-8-desktop is-7-widescreen">
+                    {% for post in posts %}
+                        {% include 'components/article.twig' %}
+                    {% endfor %}
+                </div>
+                <div class="column is-3-desktop is-offset-1-desktop is-3-widescreen is-offset-2-widescreen">
+                    {{ main_sidebar }}
+                </div>
             </div>
+
         </div>
     </section>
 

diff --git a/resources/views/single.twig b/resources/views/single.twig
@@ -4,41 +4,38 @@
 
 <article class="main-article section">
   <div class="container">
-    <div class="columns">
-      <div class="column is-three-quarters-desktop">
-        {% set post_thumb = TimberImage(post.thumbnail) %}
+    <div class="columns is-desktop">
+      <div class="column is-8-desktop is-7-widescreen">
         <h1 class="main-article__title">{{ post.title }}</h1>
-        <h5 class="subtitle is-5">
-          <time class="timestamp">
-            <small>{{ post.date }}</small>
-          </time>
-        </h5>
-        <div class="is-background-cover" style="height: 450px; margin-bottom:24px; background-image: url('{{ post_thumb.src|resize(1320)}}')"></div>
-        <p>
+        <div class="blog__item-meta article-meta">
+            <time class="timestamp"><i class="fa fa-calendar" aria-hidden="true"></i> <span>{{ post.date }}</span></time>
+        </div>
+        <div class="is-background-cover" style="height: 450px; margin-bottom:24px; background-image: url('{{ post.thumbnail.src|resize(1320)}}')"></div>
           {{ post.content }}
-        </p>
+          {# Social media share buttons #}
+          {% include 'components/social-media.twig' %}   
+          <br />
+          <hr />
+          <section class="comment-box">
+            <div class="comments">
+              {% if post.comments is not empty %}
+                <h3 class="title is-3">{{ messages.single.comments }}</h3>
+                {% for comment in post.comments %}
+                  {% include "comment.twig" %}
+                {% endfor %}
+              {% endif %}
+            </div>
+
+            {% if post.comment_status == "open" %}
+              {% include "comment-form.twig" %}
+            {% endif %}
+          </section>                 
+      </div>
+      <div class="column is-3-desktop is-offset-1-desktop is-3-widescreen is-offset-2-widescreen">
+          {{ main_sidebar }}
       </div>
     </div>
   </div>
 </article>
 
-{# Social media share buttons #}
-{% include 'components/social-media.twig' %}
-
-<section class="comment-box section">
-  <div class="container">
-  <div class="comments">
-    {% if post.comments is not empty %}
-      <h3 class="title is-3">{{ messages.single.comments }}</h3>
-      {% for comment in post.comments %}
-        {% include "comment.twig" %}
-      {% endfor %}
-    {% endif %}
-  </div>
-
-  {% if post.comment_status == "open" %}
-    {% include "comment-form.twig" %}
-  {% endif %}
-  </div>
-</section>
 {% endblock %}
diff --git a/screenshot.jpg b/screenshot.jpg
diff --git a/static/css/app.fa1a6ecafb29de06ef14.css → static/css/app.e6d2117009d723fb708f.css b/static/css/app.fa1a6ecafb29de06ef14.css → static/css/app.e6d2117009d723fb708f.css
diff --git a/static/js/app.e1560597174ea83fd0b0.js → static/js/app.3d2051f3a6b6031a3fc4.js b/static/js/app.e1560597174ea83fd0b0.js → static/js/app.3d2051f3a6b6031a3fc4.js
diff --git a/static/manifest.json b/static/manifest.json
@@ -1,6 +1,6 @@
 {
-  "app.css": "css/app.fa1a6ecafb29de06ef14.css",
-  "app.js": "js/app.e1560597174ea83fd0b0.js",
+  "app.css": "css/app.e6d2117009d723fb708f.css",
+  "app.js": "js/app.3d2051f3a6b6031a3fc4.js",
   "login.css": "css/login.71ed53cd0e88d1c80893.css",
   "login.js": "js/login.b32645115f5cac2adff0.js",
   "admin.css": "css/admin.655f125314322babd44f.css",