Merge pull request #302 from ePages-de/develop

Release v0.6.0

_data/authors.yml

@@ -0,0 +1,5 @@
+- id: uabrisketa
+  name: Unai A.
+  full_name: Unai Abrisketa
+  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  image: male_avatar.jpg

_includes/components/authors.html

@@ -0,0 +1,28 @@
+{% for author in page.about_authors %}
+  {% assign author_data = site.data.authors | where:"id", author | first %}
+  {% unless author_data %}
+    {% assign no_author = true %}
+  {% endunless %}
+{% endfor %}
+
+{% if no_author %}
+  <hr class="separator">
+{% else %}
+  <div class="authors">
+    <h2 class="author__title">About the author{% if page.about_authors.size > 1 %}s{% endif %}</h2>
+
+    <div class="author__container">
+      {% for author in page.about_authors %}
+        {% assign author_data = site.data.authors | where:"id", author | first %}
+        <div class="author__card  author__card--{{ page.about_authors.size }}">
+          <a class="author__image  author__image--{{ page.about_authors.size }}" href="/assets/img/pages/blog/authors/{{ author_data.image }}" data-lightbox="/assets/img/authors/{{ author_data.image }}">
+            <img src="/assets/img/pages/blog/authors/{{ author_data.image }}">
+          </a>
+          <div class="author__description">
+            <strong>{{ author_data.full_name }}</strong> {{ author_data.description }}
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}

_includes/components/tags.html

@@ -4,7 +4,6 @@
 {% assign tags = page.tags | strip %}
 {% if tags != '[]' %}
   <div class="tags">
-    <hr>
     <div class="tags-wrapper">
       {% for tag in page.tags %}
         <div class="tags__tag">

_layouts/post.html

@@ -10,8 +10,9 @@
       <div class="content-wrapper">
         <div class="card  card--markdown">
           {{ content }}
-          {% include components/post-share.html %}
+          {% include components/authors.html %}
           {% include components/tags.html %}
+          {% include components/post-share.html %}
         </div>
         {% include components/cross-reading.html %}
       </div>

_sass/2-components/_all-components.sass

@@ -16,3 +16,5 @@
 @import 'scroll-top'
 @import 'search-bar'
 @import 'slider'
+@import 'authors'
+@import 'separators'

_sass/2-components/_authors.sass

@@ -0,0 +1,64 @@
+.author
+
+  &s
+    margin-top: $card-margin-mobile
+
+    +grid-media($grid-medium)
+      margin-top: $card-margin-desktop
+
+  &__container
+    +grid-collapse
+    +grid-container
+
+  &__card
+    +grid-column(12)
+    background: #eee
+    padding: $card-margin-mobile
+    box-sizing: border-box
+    display: flex
+    flex-direction: column
+    align-items: center
+    margin-bottom: $card-margin-mobile
+
+    +grid-media($grid-medium)
+      padding: calc(#{$card-margin-desktop} / 2) $card-margin-desktop
+
+    &--1, &--2
+      flex-direction: row
+      align-items: center
+
+    &--2
+
+      +grid-media($grid-medium)
+        +grid-column(6)
+        margin-bottom: 0
+
+    &--3
+
+      +grid-media($grid-large)
+        +grid-column(4)
+        margin-bottom: 0
+
+  &__image
+    border-radius: 100%
+    overflow: hidden
+    margin-bottom: 2rem
+
+    &--1
+      +size(10rem)
+      min-height: 10rem
+      min-width: 10rem
+
+    &--1, &--2
+      margin-bottom: 0
+
+    &--2, &--3
+      +size(5.6rem)
+      min-height: 5.6rem
+      min-width: 5.6rem
+
+    img
+      +size(100%)
+
+  &__description
+    margin: 0 2rem

_sass/2-components/_cards.sass

@@ -44,7 +44,7 @@ $widths: 5,10,15,20,25,30,35,40,45,50,100
       li
         margin-left: 1em
 
-    div:not(.custom-image) img:not(.icon-share), P img:not(.icon-share)
+    div:not(.custom-image .author__image) img:not(.icon-share), P img:not(.icon-share)
       margin: 2rem 0
       margin-left: -$card-margin-mobile
       width: calc(100% + #{$card-margin-mobile} * 2)

_sass/2-components/_separators.sass

@@ -0,0 +1,5 @@
+.separator
+  margin-bottom: 4rem 0
+  border: $base-border
+  border-color: darken($whitesmoke, 2%)
+  width: 75%

_sass/2-components/_tags.sass

@@ -4,13 +4,6 @@
   +grid-media($grid-medium)
     margin: 4rem $card-margin-desktop 2rem
 
-  hr
-    margin-top: 0
-    margin-bottom: 4rem
-    border: $base-border
-    border-color: darken($whitesmoke, 2%)
-    width: 75%
-
   .tags-wrapper
     display: flex
     justify-content: center