feat: update clickable, lintk, button and article-list

_includes/article-list.html

@@ -18,7 +18,11 @@
 {%- elsif include.type == 'brief' -%}
 <div class="article-list items">
 {%- elsif include.type == 'grid' -%}
-<div class="article-list grid grid--p-3">
+  {%- if include.size == 'sm' -%}
+  <div class="article-list grid gird--sm grid--p-3">
+  {%- else -%}
+  <div class="article-list grid grid--p-3">
+  {%- endif -%}
 {%- endif -%}
 
   {%- for _article in _sorted_list -%}
@@ -51,7 +55,7 @@
           </div>
         {%- endif -%}
         <div class="item__content">
-          <header><h2 itemprop="headline" class="item__header"><a href="{{ _article_url }}">{{ _article.title }}</a></h2></header>
+          <header><a href="{{ _article_url }}"><h2 itemprop="headline" class="item__header">{{ _article.title }}</h2></a></header>
           <div class="item__description">
             {%- if _article.excerpt and include.show_excerpt -%}
               <div class="article__content" itemprop="description articleBody">
@@ -106,13 +110,13 @@
     {%- elsif include.type == 'grid' -%}
       {%- if include.size == 'sm' -%}
         <div class="cell cell--12 cell--md-4 cell--lg-3">
-          <div class="card">
+          <div class="card card--flat">
             {%- if _article.cover -%}
               <div class="card__image">
                 <img class="image" src="{{ _article_cover }}" />
                 <div class="overlay overlay--bottom">
                   <header>
-                    <a class="card__header" href="{{ _article_url }}">{{ _article.title }}</a>
+                    <a href="{{ _article_url }}"><h2 class="card__header">{{ _article.title }}</h2></a>
                   </header>
                 </div>
               </div>
@@ -128,7 +132,7 @@
             {%- endif -%}
               <div class="card__content">
                 <header>
-                  <h2 class="card__header"><a href="{{ _article_url }}">{{ _article.title }}</a></h2>
+                  <a href="{{ _article_url }}"><h2 class="card__header">{{ _article.title }}</h2></a>
                 </header>
               </div>
           </div>

_sass/common/_classes.scss

@@ -2,6 +2,10 @@
 
 @import
   "common/classes/animation",
+  "common/classes/transform",
+  "common/classes/transition",
+  "common/classes/user-select",
+
   "common/classes/clearfix",
   "common/classes/media",
   "common/classes/clickable",
@@ -15,8 +19,5 @@
   "common/classes/shadow",
   "common/classes/spacing",
   "common/classes/split-line",
-  "common/classes/transform",
-  "common/classes/transition",
-  "common/classes/user-select",
   "common/classes/grid"
 ;

_sass/common/_reset.scss

@@ -115,17 +115,7 @@ h6 {
 
 a {
   font-weight: map-get($base, font-weight-bold);
-  @include plain() {
-    text-decoration: none;
-  }
-  @include hover() {
-    text-decoration: underline;
-  }
-  @include active() {
-    text-decoration: none;
-  }
   @include link-colors($main-color-1);
-  @include transition(map-get($link, transition));
 }
 
 pre, code {

_sass/common/_variables.scss

@@ -104,7 +104,7 @@ $animation: (
   timing-function:        ease-in-out
 );
 
-$link: (
+$clickable: (
   transition:             all .2s ease-in-out
 );
 
@@ -134,9 +134,7 @@ $button: (
   circle-diameter-sm:     $button-height-sm,
   circle-diameter-xs:     $button-height-xs,
 
-  font-weight:            map-get($base, font-weight-bold),
-
-  transition:             all .2s ease-in-out
+  font-weight:            map-get($base, font-weight-bold)
 );
 
 $image: (
@@ -148,6 +146,6 @@ $image: (
 );
 
 $menu: (
-  horizontal-spacer:      1,
+  horizontal-spacer: 1,
   horizontal-item-vertical-spacer: 1
 );

_sass/common/classes/_clickable.scss

@@ -22,6 +22,15 @@
     $ignore-path: true;
   }
 
+  @include transition(map-get($clickable, transition));
+  @if $ignore-path == false {
+    svg {
+      path {
+        @include transition(map-get($clickable, transition));
+      }
+    }
+  }
+
   // hover
   @if $hover-clr == default {
     @if $hover-bg-clr == null {

_sass/common/classes/_link.scss

@@ -1,3 +1,12 @@
 @mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default, $ignore-path: false) {
+  @include plain() {
+    text-decoration: none;
+  }
+  @include hover() {
+    text-decoration: underline;
+  }
+  @include active() {
+    text-decoration: none;
+  }
   @include clickable($clr, null, $hover-clr, null, $active-clr, null, $focus-clr, null, $theme, $ignore-path);
 }

_sass/common/components/_button.scss

@@ -3,16 +3,13 @@
   font-weight: map-get($button, font-weight);
   line-height: 1 !important;
   text-decoration: none !important;
+  white-space: nowrap;
   cursor: pointer;
   outline: none;
   @include user-select(none);
-  @include transition(map-get($button, transition));
   svg {
     width: 1rem;
     height: 1rem;
-    path {
-      @include transition(map-get($button, transition));
-    }
   }
   @include disabled() {
     cursor: not-allowed;

_sass/common/components/_card.scss

@@ -24,7 +24,7 @@
   padding: map-get($spacers, 2) map-get($spacers, 3);
 }
 
-a.card__header, .card__header > a {
+.card__header, .card__header > a {
   @include link-colors($text-color-d, $main-color-1);
 }
 
@@ -86,7 +86,7 @@ a.card__header, .card__header > a {
       }
     }
   }
-  @include transition(map-get($link, transition));
+  @include transition(map-get($clickable, transition));
 }
 
 .card--flat {

_sass/common/components/_gallery.scss

@@ -8,10 +8,14 @@
   @include flex(1);
 }
 
-.gallery-item{
+.gallery-item {
   @include flexbox();
   @include align-items(center);
   @include justify-content(center);
   height: 100%;
   overflow: hidden;
+}
+
+.gallery-item__main {
+  display: block;
 }

_sass/common/components/_item.scss

@@ -25,7 +25,7 @@
   min-width: 0;
 }
 
-a.item__header, .item__header > a {
+a > .item__header, a.item__header, .item__header > a {
   @include link-colors($text-color-d, $main-color-1);
 }
 

_sass/components/_article-list.scss

@@ -5,6 +5,13 @@
     font-size: map-get($base, font-size-sm);
     white-space: nowrap;
   }
+  &.gird--sm {
+    .card__header {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
 }
 .article-list__group-header {
   margin-top: map-get($spacers, 3);

_sass/components/_lightbox.scss

@@ -3,5 +3,5 @@
   @include hover() {
     @include box-shadow(2);
   }
-  @include transition(map-get($link, transition));
+  @include transition(map-get($clickable, transition));
 }

_sass/components/_search.scss

@@ -159,7 +159,7 @@
         }
       }
       @include active() {
-        @include transition(map-get($link, transition));
+        @include transition(map-get($clickable, transition));
       }
     }
   }

docs/landing.html

@@ -48,7 +48,7 @@
         style: "max-width: 1000px;"
     - title: Enhanced User Experience
       children:
-        - title: Additional styles
+        - title: Additional Styles
           excerpt: TeXt offer some CSS classes for your page, including alert, tag, image, button, etc.
           actions:
             - text: Learn More

docs/samples.html

@@ -4,18 +4,18 @@
 permalink: /samples.html
 ---
 <div class="layout--articles">
-  <div class="my-5">
-    <h2 id="page-layout">Page Layout</h2>
+  <section class="my-5">
+    <header><h2 id="page-layout">Page Layout</h2></header>
     {%- include article-list.html articles=site.page type='grid' -%}
-  </div>
+  </section>
 
-  <div class="my-5">
-    <h2 id="articles-layout">Articles(Home) Layout</h2>
+  <section class="my-5">
+    <header><h2 id="articles-layout">Articles(Home) Layout</h2></header>
     {%- include article-list.html articles=site.articles type='grid' -%}
-  </div>
+  </section>
 
-    <div class="my-5">
-    <h2 id="languages">Languages</h2>
+  <section class="my-5">
+    <header><h2 id="languages">Languages</h2></header>
     {%- include article-list.html articles=site.languages type='grid' -%}
-  </div>
+  </section>
 </div>