From f224b45928ebe0241bf6a37a0ee332f74b853b19 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sun, 25 Nov 2018 13:07:56 +0800
Subject: Update Docs SEO

---
 docs/components/avatars.html | 47 +++++++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

(limited to 'docs/components/avatars.html')

diff --git a/docs/components/avatars.html b/docs/components/avatars.html
index 34f3ee7..5e7d9b5 100644
--- a/docs/components/avatars.html
+++ b/docs/components/avatars.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/avatars.html">
+    <meta property="og:title" content="Avatars - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
@@ -206,18 +212,18 @@
             <p>Avatars are user profile pictures. </p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
-                <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
-                <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure>
-                <figure class="avatar avatar-sm"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
-                <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
+                <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
+                <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
+                <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
+                <figure class="avatar avatar-xs mr-2"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
               </div>
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl" data-initial="YZ"></figure>
-                <figure class="avatar avatar-lg" data-initial="YZ"></figure>
-                <figure class="avatar" data-initial="YZ"></figure>
-                <figure class="avatar avatar-sm" data-initial="YZ"></figure>
-                <figure class="avatar avatar-xs" data-initial="YZ"></figure>
+                <figure class="avatar avatar-xl mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-lg mr-2" data-initial="YZ"></figure>
+                <figure class="avatar mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-sm mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-xs mr-2" data-initial="YZ"></figure>
               </div>
             </div>
             <p>Add the <code>avatar</code> class to &lt;img&gt; element.
@@ -241,12 +247,13 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
 </code></pre>
+            <h4 class="s-subtitle" id="avatars-icons">Avatar icons<a class="anchor" href="#avatars-icons" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
-                <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
-                <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
-                <figure class="avatar avatar-sm"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
+                <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
                 <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-1.png" alt="Avatar"></figure>
               </div>
             </div>
@@ -258,11 +265,11 @@
             <h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl" data-initial="YZ"><i class="avatar-presence online"></i></figure>
-                <figure class="avatar avatar-lg" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
-                <figure class="avatar" data-initial="YZ"><i class="avatar-presence away"></i></figure>
-                <figure class="avatar avatar-sm" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
-                <figure class="avatar avatar-xs" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+                <figure class="avatar avatar-xl mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+                <figure class="avatar avatar-lg mr-2" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
+                <figure class="avatar mr-2" data-initial="YZ"><i class="avatar-presence away"></i></figure>
+                <figure class="avatar avatar-sm mr-2" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
+                <figure class="avatar avatar-xs mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
               </div>
             </div>
             <p>
-- 
cgit v1.3.1-23-gd82d