From 29fddfb9be0f638ec151bbb5c3a86b27e7bb3077 Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Sat, 23 Feb 2019 17:28:05 +0900
Subject: [PATCH] docs: add share buttons

---
 docs/index.html | 20 ++++++++++++++++----
 docs/script.js  | 14 ++++++++++++++
 docs/style.css  | 17 ++++++++++++++---
 3 files changed, 44 insertions(+), 7 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index f877207..fb9471f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -40,9 +40,21 @@
   <body>
     <div id="nescss" class="wrapper">
       <header>
-        <h1><i class="snes-jp-logo brand"></i>NES.css</h1>
-        <p>NES-style CSS Framework.</p>
+        <div class="brand">
+          <h1><i class="snes-jp-logo brand-logo"></i>NES.css</h1>
+          <p>NES-style CSS Framework.</p>
+        </div>
+
+        <div class="social-buttons">
+          <p>Share on SNS</p>
+          <div class="share">
+            <a @click="share('twitter')"><i class="nes-icon twitter"></i></a>
+            <a @click="share('facebook')"><i class="nes-icon facebook"></i></a>
+            <a @click="share('linkedin')"><i class="nes-icon linkedin"></i></a>
+          </div>
+        </div>
       </header>
+
       <main>
         <a class="github-link" href="https://github.com/nostalgic-css/NES.css" target="_blank" @mouseover="startAnimate" @mouseout="stopAnimate">
           <p class="nes-balloon from-right">Fork me<br />on GitHub</p>
@@ -146,7 +158,7 @@
         </section>
 
         <!-- Articles -->
-        <section class="articles">
+        <section class="topic">
             <h2 id="articles"><a href="#articles">#</a>Articles</h2>
             <article v-for="article in articles">
               <h3><a :href="article.url" target="_blank"><i class="nes-icon" :class="article.icon"></i>{{ article.title }}</a></h3>
@@ -157,7 +169,7 @@
 
       <footer>
         <p>
-          <a href="https://kuroeveryday.blogspot.com/" target="_blank">Black Everyday Company</a>
+          <a href="https://kuroeveryday.blogspot.com/" target="_blank">&copy;2018 Black Everyday Company</a>
           <span>-</span>
           <a href="https://twitter.com/bc_rikko" target="_blank">@bc_rikko</a>
         </p>
diff --git a/docs/script.js b/docs/script.js
index d55ea0e..f864403 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -541,6 +541,20 @@ new Vue({
     });
   },
   methods: {
+    share(media) {
+      const url = (() => {
+        switch (media) {
+          case 'twitter':
+            return 'http://twitter.com/share?text=NES.css%EF%BD%9CNES-style%20CSS%20Framework%20%40bc_rikko&url=https://nostalgic-css.github.io/NES.css/';
+          case 'facebook':
+            return 'http://www.facebook.com/sharer.php?u=https://nostalgic-css.github.io/NES.css/&t=NES.css%EF%BD%9CNES-style%20CSS%20Framework';
+          case 'linkedin':
+            return 'https://www.linkedin.com/shareArticle?url=https%3A//nostalgic-css.github.io/NES.css/&title=NES.css%EF%BD%9CNES-style%20CSS%20Framework';
+        }
+      })();
+
+      window.open(url, '');
+    },
     copy(event, id) {
       this.showCopiedBalloon(event.pageY, event.pageX);
 
diff --git a/docs/style.css b/docs/style.css
index 416ee4c..668342f 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -8,10 +8,22 @@ body {
   margin: 0 auto;
 }
 
-header i.brand {
+header {
+  display: flex;
+  align-items: baseline;
+  border-bottom: 4px solid #D3D3D3;
+}
+header > .brand i.brand-logo {
   margin-right: 1rem;
 }
 
+header > .social-buttons {
+  margin-left: 2rem;
+}
+header > .social-buttons > p {
+  margin-bottom: 0;
+}
+
 footer {
   margin-top: 3rem;
   text-align: center;
@@ -26,7 +38,7 @@ h2 > a {
 }
 
 .topic {
-  margin-bottom: 3rem;
+  margin-top: 3rem;
 }
 
 /* github link */
@@ -192,4 +204,3 @@ h3.topic-title > i {
 }
 
 /* Articles */
-
