add awesome social likes buttons

vast · Apr 28, 2016 · 5fa4684 · 5fa4684
1 parent f4e51ae
commit 5fa4684
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,6 +12,7 @@
     {% endif %}
   </title>
   <link rel="stylesheet" href="/css/application.css" media="screen, projection" />
+  <link rel="stylesheet" href="https://npmcdn.com/social-likes-next/dist/social-likes_birman.css">
   <link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 980px)" />
   <link rel="profile" href="http://microformats.org/profile/hcard" />
   <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
@@ -60,6 +61,12 @@ <h2 class="post-title">{{ page.title }} </h2>
           {% endcase %}
           {{ page.date | date: "%Y" }}
         </small>
+
+        <div class="social-likes">
+          <div data-service="twitter" data-via="vazilla" title="Поделиться ссылкой в Твитере">Твитнуть</div>
+          <div data-service="facebook" title="Поделиться ссылкой на Фейсбуке">Поделиться</div>
+          <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Поделиться</div>
+        </div>
       </footer>
     </article>
   </div>
@@ -78,13 +85,14 @@ <h2>Из недавнего</h2>
       </aside>
 
       <footer id="footer">
-        <span style="margin-left: -1.22em">&copy; Василий Половнёв, 2014—{{ site.time | date: '%Y' }}</span><br />
+        <span style="margin-left: -1.22em">&copy; Василий Половнёв, 2014—{{ site.time | date: '%Y' }}</span>,<br />
         <span id="funny-title" class="title" onmouseenter="javascript:trulyRandom();">фронтенд-шмонтенд разработчик, успешный брограммист</span>
       </footer>
     </div>
   </div>
 
   <script src="/js/typography.js"></script>
+  <script src="https://npmcdn.com/social-likes-next/dist/social-likes.min.js"></script>
   <script>typographer.kickit('.post-contents, .post-title')</script>
   <script>
     var funnyTitles = [

diff --git a/_sass/core/_settings.scss b/_sass/core/_settings.scss
@@ -3,6 +3,7 @@ $base-font: Georgia, serif;
 
 $text-color: rgba(0, 0, 0, .8);
 $text-color-fallback: #414141;
+$minor-color: #f5f5f5;
 
 $link-color: rgba(0, 0, 0, .8);
 $link-color-fallback: #414141;

diff --git a/_sass/modules/_footer.scss b/_sass/modules/_footer.scss
@@ -1,6 +1,6 @@
 .bottom-contents {
   font-size: 88%;
-  background: #f5f5f5;
+  background: $minor-color;
 }
 
 .related {

diff --git a/_sass/modules/_posts.scss b/_sass/modules/_posts.scss
@@ -4,6 +4,7 @@
 
 .post-date {
   display: block;
+  font-family: Helvetica Neue, Arial, sans-serif;
   color: lighten($text-color, 50%);
 }
 
@@ -50,6 +51,10 @@
 // INBOX
 //
 
+.social-likes {
+  margin: .75rem -.3em 0!important;
+}
+
 .related-posts {
   -webkit-columns: 3;
   columns: 3;
@@ -68,7 +73,7 @@
 
 .my_presence {
   display: inline-block;
-  background: rgba(0, 0, 0, .03);
+  background: $minor-color;
   padding: 1em 0 1.1em 1.5em;
   border-radius: 4px;
   margin: 0 -1.5em;