Prettier blog list

docs/_layouts/post.html

@@ -5,27 +5,29 @@ route: blog
 
 {% include blog-hero.html %}
 
-<section class="section is-medium">
+<section class="section">
   <div class="container">
     <div class="columns">
       <div class="column is-offset-2 is-8">
         <div class="article-image is-single is-{{ page.color }}">
           <span class="article-overlay"></span>
           <span class="article-icon">
-            <span class="icon">
+            <i class="fa fa-{{ page.icon }}"></i>
-              <i class="fa fa-{{ page.icon }}"></i>
-            </span>
           </span>
-          <strong class="article-title">
+          <strong class="article-info">
-            {{ page.name }}
+            <span>
+              <time class="article-date" datetime="{{ page.date | date_to_xmlschema }}">
+                {{ page.date | date_to_string }}
+              </time>
+              <strong class="article-title">
+                {{ page.name }}
+              </strong>
+            </span>
           </strong>
         </div>
         <p class="subtitle is-6">
           <a class="article-back" href="{{ site.url }}/blog">Back</a>
         </p>
-        <p class="subtitle is-4">
-          {{ page.date | date_to_string }}
-        </p>
         <h1 class="title is-2">
           {{ page.title }}
         </h1>

docs/_sass/specific.sass

@@ -53,7 +53,6 @@
   height: 240px
   margin-left: auto
   margin-right: auto
-  width: 320px
   position: relative
   text-align: center
   @each $name, $pair in $colors
@@ -66,15 +65,14 @@
     .article-overlay
       opacity: 0.25
     .article-icon
-      transform: scale(1.1)
+      transform: scale(1.4)
-    .article-title
+    .article-date
       transform: scale(0.9)
+    .article-title
+      transform: scale(1.1)
   &.is-single
     margin-bottom: 2rem
     width: 100%
-  +mobile
-    height: 180px
-    width: 240px
 
 .article-overlay
   +overlay
@@ -85,11 +83,15 @@
   transition-timing-function: $easing
 
 .article-icon,
-.article-title
+.article-info
   +overlay
   align-items: center
   display: flex
   justify-content: center
+
+.article-icon,
+.article-date,
+.article-title
   transition-duration: $speed
   transition-property: transform
   transition-timing-function: $easing
@@ -97,14 +99,25 @@
 .article-icon
   color: $black
   opacity: 0.25
+  & > span
+    display: block
   .fa
     font-size: 56px
 
+.article-info
+  padding: 20px
+
+.article-date
+  color: rgba(#000, 0.5)
+  display: block
+
 .article-title
   color: $white
+  display: block
   font-size: 2.5rem
   font-weight: $weight-bold
   line-height: 1.25
+  padding: 0 20px
 
 .emoji
   margin-right: 0.5em

docs/blog.html

@@ -7,43 +7,27 @@ route: blog
 
   <section class="section">
     <div class="container">
-      {% for post in site.posts %}
+      <div class="columns is-multiline">
-        <article class="box article">
+        {% for post in site.posts %}
-          <div class="columns">
+          <article class="column is-4">
-            <div class="column is-narrow">
+            <a class="article-image is-{{ post.color }}" href="{{ post.url }}">
-              <a class="article-image is-{{ post.color }}" href="{{ post.url }}">
+              <span class="article-overlay"></span>
-                <span class="article-overlay"></span>
+              <span class="article-icon">
-                <span class="article-icon">
+                <i class="fa fa-{{ post.icon }}"></i>
-                  <span class="icon">
+              </span>
-                    <i class="fa fa-{{ post.icon }}"></i>
+              <strong class="article-info">
-                  </span>
+                <span>
-                </span>
+                  <time class="article-date" datetime="{{ post.date | date_to_xmlschema }}">
-                <strong class="article-title">
-                  {{ post.name }}
-                </strong>
-              </a>
-            </div>
-            <div class="column">
-              <div class="columns">
-                <div class="column">
-                  <p class="subtitle">
                     {{ post.date | date_to_string }}
-                  </p>
+                  </time>
-                  <h2 class="title">
+                  <strong class="article-title">
-                    <a href="{{ post.url }}">
+                    {{ post.name }}
-                      {{ post.title }}
+                  </strong>
-                    </a>
+                </span>
-                  </h2>
+              </strong>
-                </div>
+            </a>
-                <div class="column">
+          </article>
-                  <div class="content is-medium">
+        {% endfor %}
-                    {{ post.introduction | markdownify }}
+      </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </article>
-      {% endfor %}
     </div>
   </section>

docs/css/bulma-docs.css

@@ -551,6 +551,18 @@ table th {
   text-align: right !important;
 }
 
+.is-capitalized {
+  text-transform: capitalize !important;
+}
+
+.is-lowercase {
+  text-transform: lowercase !important;
+}
+
+.is-uppercase {
+  text-transform: uppercase !important;
+}
+
 .has-text-white {
   color: white !important;
 }
@@ -10213,7 +10225,6 @@ html.route-index #carbon {
   height: 240px;
   margin-left: auto;
   margin-right: auto;
-  width: 320px;
   position: relative;
   text-align: center;
 }
@@ -10263,13 +10274,18 @@ html.route-index #carbon {
 }
 
 .article-image:hover .article-icon {
-  -webkit-transform: scale(1.1);
+  -webkit-transform: scale(1.4);
-          transform: scale(1.1);
+          transform: scale(1.4);
+}
+
+.article-image:hover .article-date {
+  -webkit-transform: scale(0.9);
+          transform: scale(0.9);
 }
 
 .article-image:hover .article-title {
-  -webkit-transform: scale(0.9);
+  -webkit-transform: scale(1.1);
-          transform: scale(0.9);
+          transform: scale(1.1);
 }
 
 .article-image.is-single {
@@ -10277,13 +10293,6 @@ html.route-index #carbon {
   width: 100%;
 }
 
-@media screen and (max-width: 768px) {
-  .article-image {
-    height: 180px;
-    width: 240px;
-  }
-}
-
 .article-overlay {
   bottom: 0;
   left: 0;
@@ -10301,7 +10310,7 @@ html.route-index #carbon {
 }
 
 .article-icon,
-.article-title {
+.article-info {
   bottom: 0;
   left: 0;
   position: absolute;
@@ -10316,6 +10325,11 @@ html.route-index #carbon {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+}
+
+.article-icon,
+.article-date,
+.article-title {
   -webkit-transition-duration: 86ms;
           transition-duration: 86ms;
   -webkit-transition-property: -webkit-transform;
@@ -10331,15 +10345,30 @@ html.route-index #carbon {
   opacity: 0.25;
 }
 
+.article-icon > span {
+  display: block;
+}
+
 .article-icon .fa {
   font-size: 56px;
 }
 
+.article-info {
+  padding: 20px;
+}
+
+.article-date {
+  color: rgba(0, 0, 0, 0.5);
+  display: block;
+}
+
 .article-title {
   color: white;
+  display: block;
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.25;
+  padding: 0 20px;
 }
 
 .emoji {