From 1ce48d057348479d26b84e117d0e16d731be0d3c Mon Sep 17 00:00:00 2001
From: kitian616 <kitian616@outlook.com>
Date: Sun, 23 Dec 2018 15:46:37 +0800
Subject: [PATCH] feat: update clickable, lintk, button and article-list

---
 _includes/article-list.html           | 14 +++++++++-----
 _sass/common/_classes.scss            |  7 ++++---
 _sass/common/_reset.scss              | 10 ----------
 _sass/common/_variables.scss          |  8 +++-----
 _sass/common/classes/_clickable.scss  |  9 +++++++++
 _sass/common/classes/_link.scss       |  9 +++++++++
 _sass/common/components/_button.scss  |  5 +----
 _sass/common/components/_card.scss    |  4 ++--
 _sass/common/components/_gallery.scss |  6 +++++-
 _sass/common/components/_item.scss    |  2 +-
 _sass/components/_article-list.scss   |  7 +++++++
 _sass/components/_lightbox.scss       |  2 +-
 _sass/components/_search.scss         |  2 +-
 docs/landing.html                     |  2 +-
 docs/samples.html                     | 18 +++++++++---------
 15 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/_includes/article-list.html b/_includes/article-list.html
index 5b5b606ba9a..592350e4b5a 100644
--- a/_includes/article-list.html
+++ b/_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>
diff --git a/_sass/common/_classes.scss b/_sass/common/_classes.scss
index 311543fc37d..a31d2c376e0 100644
--- a/_sass/common/_classes.scss
+++ b/_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"
 ;
\ No newline at end of file
diff --git a/_sass/common/_reset.scss b/_sass/common/_reset.scss
index 622dc438398..b7657d344da 100644
--- a/_sass/common/_reset.scss
+++ b/_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 {
diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss
index b6051089440..fdd9eeeb85c 100644
--- a/_sass/common/_variables.scss
+++ b/_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
 );
\ No newline at end of file
diff --git a/_sass/common/classes/_clickable.scss b/_sass/common/classes/_clickable.scss
index ee9b269530e..0b023266fc9 100644
--- a/_sass/common/classes/_clickable.scss
+++ b/_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 {
diff --git a/_sass/common/classes/_link.scss b/_sass/common/classes/_link.scss
index 719c84d55d2..4f10fe3968b 100644
--- a/_sass/common/classes/_link.scss
+++ b/_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);
 }
\ No newline at end of file
diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
index 51a7bc99545..692e9b156e6 100644
--- a/_sass/common/components/_button.scss
+++ b/_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;
diff --git a/_sass/common/components/_card.scss b/_sass/common/components/_card.scss
index fc09bdf849c..2431461ef42 100644
--- a/_sass/common/components/_card.scss
+++ b/_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 {
diff --git a/_sass/common/components/_gallery.scss b/_sass/common/components/_gallery.scss
index 496e659a1cb..774d3afe6a9 100644
--- a/_sass/common/components/_gallery.scss
+++ b/_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;
 }
\ No newline at end of file
diff --git a/_sass/common/components/_item.scss b/_sass/common/components/_item.scss
index 3b2942a4a54..67a5b808f67 100644
--- a/_sass/common/components/_item.scss
+++ b/_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);
 }
 
diff --git a/_sass/components/_article-list.scss b/_sass/components/_article-list.scss
index acb020b86c8..d096ae8d4a7 100644
--- a/_sass/components/_article-list.scss
+++ b/_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);
diff --git a/_sass/components/_lightbox.scss b/_sass/components/_lightbox.scss
index 0e05431303a..6058390e311 100644
--- a/_sass/components/_lightbox.scss
+++ b/_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));
 }
\ No newline at end of file
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
index b11007d31c6..a67a3dc949e 100644
--- a/_sass/components/_search.scss
+++ b/_sass/components/_search.scss
@@ -159,7 +159,7 @@
         }
       }
       @include active() {
-        @include transition(map-get($link, transition));
+        @include transition(map-get($clickable, transition));
       }
     }
   }
diff --git a/docs/landing.html b/docs/landing.html
index 15746d596a5..6ad9360a5bf 100644
--- a/docs/landing.html
+++ b/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
diff --git a/docs/samples.html b/docs/samples.html
index 6851440b0dc..95f109eed94 100644
--- a/docs/samples.html
+++ b/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>
\ No newline at end of file