1 files changed, 432 insertions, 8 deletions

diff --git a/assets/css/_partial/_share-icon.scss b/assets/css/_partial/_share-icon.scss
index 2a2495d..b7fcd1d 100644
--- a/assets/css/_partial/_share-icon.scss
+++ b/assets/css/_partial/_share-icon.scss
@@ -1,27 +1,40 @@
 .post-info-share {
   text-align: center;
   padding: 40px 0 40px 0;
+}
 
+.post-share {
   a.share-icon {
     border-bottom: none;
     color: white;
   }
 
   a.share-icon:hover {
-    padding: 3px 8px;;
     background: white;
-    color: #2c678d;
     border: solid 2px #2c678d;
-    @include transition(all 0.4s ease);
+    @include transition(background 0.2s ease);
+
+    .svg-social-icon {
+      background-image: url(/img/icon/sprite-social-color.svg);
+    }
   }
 }
 
+.share-link {
+  margin-top: 15px;
+  margin-right: 8px;
+  font-size: 20px;
+  display: inline-block;
+}
+
+.share-text {
+  font-size: 30px;
+  margin-bottom: 10px;
+}
+
 .share-icon {
-  color: white;
-  padding: 3px 8px;
-  margin-right: 3px;
-  border-radius: 5px;
-  font-size: 16px;
+  border-radius: 6px;
+  padding: 8px 16px 6px 16px;
 }
 
 .share-telegram {
@@ -162,4 +175,415 @@
 .share-mix {
   background: #FF8126;
   border: solid 2px #FF8126;
+}
+
+.share-hackernews {
+  background: #FF8126;
+  border: solid 2px #FF8126;
+}
+
+.svg-social-icon {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-image: url(/img/icon/sprite-social.svg);
+}
+.svg-social-icon-color {
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-image: url(/img/icon/sprite-social-color.svg);
+}
+.icon-rss {
+  width: 20px;
+  height: 20px;
+  background-position: 0 0;
+}
+.icon-mail-dot-ru {
+  width: 20px;
+  height: 20px;
+  background-position: -25px 0;
+}
+.icon-udemy {
+  width: 20px;
+  height: 20px;
+  background-position: -50px 0;
+}
+.icon-discord {
+  width: 20px;
+  height: 20px;
+  background-position: -75px 0;
+}
+.icon-docker {
+  width: 20px;
+  height: 20px;
+  background-position: -100px 0;
+}
+.icon-matrix {
+  width: 20px;
+  height: 20px;
+  background-position: -125px 0;
+}
+.icon-xmpp {
+  width: 20px;
+  height: 20px;
+  background-position: -150px 0;
+}
+.icon-gitea {
+  width: 20px;
+  height: 20px;
+  background-position: -175px 0;
+}
+.icon-mastodon {
+  width: 20px;
+  height: 20px;
+  background-position: -200px 0;
+}
+.icon-researchgate {
+  width: 20px;
+  height: 20px;
+  background-position: -225px 0;
+}
+.icon-google {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -25px;
+}
+.icon-vine {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -25px;
+}
+.icon-wordpress {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -25px;
+}
+.icon-dribbble {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -25px;
+}
+.icon-behance {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -25px;
+}
+.icon-deviantart {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -25px;
+}
+.icon-jsfiddle {
+  width: 20px;
+  height: 20px;
+  background-position: -150px -25px;
+}
+.icon-angellist {
+  width: 20px;
+  height: 20px;
+  background-position: -175px -25px;
+}
+.icon-zhihu {
+  width: 20px;
+  height: 20px;
+  background-position: -200px -25px;
+}
+.icon-strava {
+  width: 20px;
+  height: 20px;
+  background-position: -225px -25px;
+}
+.icon-twitch {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -50px;
+}
+.icon-steam {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -50px;
+}
+.icon-patreon {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -50px;
+}
+.icon-kickstarter {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -50px;
+}
+.icon-foursquare {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -50px;
+}
+.icon-last-dot-fm {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -50px;
+}
+.icon-goodreads {
+  width: 20px;
+  height: 20px;
+  background-position: -150px -50px;
+}
+.icon-500px {
+  width: 20px;
+  height: 20px;
+  background-position: -175px -50px;
+}
+.icon-paypal {
+  width: 20px;
+  height: 20px;
+  background-position: -200px -50px;
+}
+.icon-bandcamp {
+  width: 20px;
+  height: 20px;
+  background-position: -225px -50px;
+}
+.icon-spotify {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -75px;
+}
+.icon-soundcloud {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -75px;
+}
+.icon-snapchat {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -75px;
+}
+.icon-xing {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -75px;
+}
+.icon-flickr {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -75px;
+}
+.icon-stackoverflow {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -75px;
+}
+.icon-bitbucket {
+  width: 20px;
+  height: 20px;
+  background-position: -150px -75px;
+}
+.icon-freecodecamp {
+  width: 20px;
+  height: 20px;
+  background-position: -175px -75px;
+}
+.icon-codepen {
+  width: 20px;
+  height: 20px;
+  background-position: -200px -75px;
+}
+.icon-pinterest {
+  width: 20px;
+  height: 20px;
+  background-position: -225px -75px;
+}
+.icon-keybase {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -100px;
+}
+.icon-quora {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -100px;
+}
+.icon-tumblr {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -100px;
+}
+.icon-youtube {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -100px;
+}
+.icon-gitlab {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -100px;
+}
+.icon-medium {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -100px;
+}
+.icon-instagram {
+  width: 20px;
+  height: 20px;
+  background-position: -150px -100px;
+}
+.icon-linkedin {
+  width: 20px;
+  height: 20px;
+  background-position: -175px -100px;
+}
+.icon-github {
+  width: 20px;
+  height: 20px;
+  background-position: -200px -100px;
+}
+.icon-mixer {
+  width: 20px;
+  height: 20px;
+  background-position: -225px -100px;
+}
+.icon-trello {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -125px;
+}
+.icon-skype {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -125px;
+}
+.icon-evernote {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -125px;
+}
+.icon-odnoklassniki {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -125px;
+}
+.icon-baidu {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -125px;
+}
+.icon-blogger {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -125px;
+}
+.icon-myspace {
+  width: 20px;
+  height: 20px;
+  background-position: -150px -125px;
+}
+.icon-renren {
+  width: 20px;
+  height: 20px;
+  background-position: -175px -125px;
+}
+.icon-sinaweibo {
+  width: 20px;
+  height: 20px;
+  background-position: -200px -125px;
+}
+.icon-flipboard {
+  width: 20px;
+  height: 20px;
+  background-position: -225px -125px;
+}
+.icon-digg {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -150px;
+}
+.icon-pocket {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -150px;
+}
+.icon-instapaper {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -150px;
+}
+.icon-line {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -150px;
+}
+.icon-xing1 {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -150px;
+}
+.icon-buffer {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -150px;
+}
+.icon-reddit {
+  width: 20px;
+  height: 20px;
+  background-position: -150px -150px;
+}
+.icon-tumblr1 {
+  width: 20px;
+  height: 20px;
+  background-position: -175px -150px;
+}
+.icon-pinterest1 {
+  width: 20px;
+  height: 20px;
+  background-position: -200px -150px;
+}
+.icon-viber {
+  width: 20px;
+  height: 20px;
+  background-position: -225px -150px;
+}
+.icon-linkedin1 {
+  width: 20px;
+  height: 20px;
+  background-position: 0 -175px;
+}
+.icon-telegram {
+  width: 20px;
+  height: 20px;
+  background-position: -25px -175px;
+}
+.icon-whatsapp {
+  width: 20px;
+  height: 20px;
+  background-position: -50px -175px;
+}
+.icon-facebook {
+  width: 20px;
+  height: 20px;
+  background-position: -75px -175px;
+}
+.icon-vk {
+  width: 20px;
+  height: 20px;
+  background-position: -100px -175px;
+}
+.icon-twitter {
+  width: 20px;
+  height: 20px;
+  background-position: -125px -175px;
+}
+.icon-leanpub {
+  width: 23px;
+  height: 20px;
+  background-position: 0 -200px;
+}
+.icon-hacker-news {
+  width: 17px;
+  height: 20px;
+  background-position: -50px -200px;
+}
+.icon-stumbleupon {
+  width: 21px;
+  height: 20px;
+  background-position: -75px -200px;
 }
\ No newline at end of file