Merge pull request #37 from huyb1991/hotfix/sharing-icons-on-post

Hotfix Sharing icons on post
huyb1991 · Mar 25, 2019 · 1079a5b · 1079a5b
2 parents 8474e08 + ed982d3
commit 1079a5b
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 19 deletions.
diff --git a/docs/guide.md b/docs/guide.md
@@ -41,14 +41,14 @@ I changed from icon font to SVG for website follow [SVG symbol a Good Choice for
 ```
 Replace `SVG symbol id` by yourself (above is `icon-rss`)
 
-2. Add this code into (layouts/partials/svg-icons.html)[https://github.com/huyb1991/hugo-lamp/blob/master/layouts/partials/svg-icons.html]
+2. Add this code into [layouts/partials/svg-icons.html](https://github.com/huyb1991/hugo-lamp/blob/master/layouts/partials/svg-icons.html)
 
 3. Call icon name by `SVG symbol id` at you define above follow this syntax:
 ```html
 <svg fill="currentColor"><use xlink:href="#icon-rss" /></svg>
 ```
 
-Example for icon on (layouts/partials/social.html)[https://github.com/huyb1991/hugo-lamp/blob/master/layouts/partials/social.html]
+Example for icon on [layouts/partials/social.html](https://github.com/huyb1991/hugo-lamp/blob/master/layouts/partials/social.html)
 
 ### Customize Theme
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -25,6 +25,7 @@
     {{ partial "head.html" . }}
   </head>
   <body>
+    {{ partial "svg-icons.html" . }}
     {{ partial "sidebar.html" . }}
     {{ block "main" . }}{{ end }}
   </body>

diff --git a/layouts/index.html b/layouts/index.html
@@ -1,5 +1,4 @@
 {{ define "main" }}
-  {{ partial "svg-icons.html" . }}
   {{ partial "header.html" . }}
   <section class="main entry-list">
     {{ $paginator := .Paginate (where .Data.Pages "Type" "post") (index .Site.Params "paginate" | default 10) }}

diff --git a/layouts/partials/sharing.html b/layouts/partials/sharing.html
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
@@ -2,78 +2,78 @@
   {{ if isset .Site.Params "email" }}
   <li class="social-item">
     <a href="mailto:{{ .Site.Params.email }}" title="Email">
-      <svg class="icon icon-email" fill="currentColor"><use xlink:href="#icon-email" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-email" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "github" }}
   <li class="social-item">
     <a href="//github.com/{{ .Site.Params.github }}" title="GitHub">
-      <svg class="icon icon-github" fill="currentColor"><use xlink:href="#icon-github" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-github" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "twitter" }}
   <li class="social-item">
     <a href="//twitter.com/{{ .Site.Params.twitter }}" title="Twitter">
-      <svg class="icon icon-twitter" fill="currentColor"><use xlink:href="#icon-twitter" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-twitter" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "linkedin" }}
   <li class="social-item">
     <a href="//www.linkedin.com/in/{{ .Site.Params.linkedin }}" title="Linkedin">
-      <svg class="icon icon-linkedin" fill="currentColor"><use xlink:href="#icon-linkedin" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-linkedin" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "facebook" }}
   <li class="social-item">
     <a href="//www.facebook.com/{{ .Site.Params.facebook }}" title="Facebook">
-      <svg class="icon icon-facebook" fill="currentColor"><use xlink:href="#icon-facebook" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-facebook" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "google" }}
   <li class="social-item">
     <a href="//plus.google.com/{{ .Site.Params.google }}" title="Google+">
-      <svg class="icon icon-google" fill="currentColor"><use xlink:href="#icon-googleplus" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-googleplus" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "instagram" }}
   <li class="social-item">
     <a href="//www.instagram.com/{{ .Site.Params.instagram }}" title="Instagram">
-      <svg class="icon icon-instagram" fill="currentColor"><use xlink:href="#icon-instagram" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-instagram" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "youtube" }}
   <li class="social-item">
     <a href="//www.youtube.com/user/{{ .Site.Params.youtube }}" title="YouTube">
-      <svg class="icon icon-youtube" fill="currentColor"><use xlink:href="#icon-youtube" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-youtube" /></svg>
     </a>
   </li>
   {{ end }}
 
   {{ if isset .Site.Params "dribbble" }}
   <li class="social-item">
     <a href="//dribbble.com/{{ .Site.Params.dribbble }}" title="Dribbble">
-      <svg class="icon icon-dribbble" fill="currentColor"><use xlink:href="#icon-dribbble" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-dribbble" /></svg>
     </a>
   </li>
   {{ end }}
 
   <li class="social-item">
     <a href="/index.xml" title="RSS">
-      <svg class="icon icon-rss" fill="currentColor"><use xlink:href="#icon-rss" /></svg>
+      <svg class="icon" fill="currentColor"><use xlink:href="#icon-rss" /></svg>
     </a>
   </li>
 </ul>
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
diff --git a/layouts/partials/svg-icons.html b/layouts/partials/svg-icons.html
@@ -41,9 +41,9 @@
 </svg>
 
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="icon-facebook" viewBox="0 0 24 24">
+  <symbol id="icon-facebook" viewBox="0 0 60 60">
     <title>Facebook</title>
-    <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0" />
+    <path d="M42.8,23.8h-7.4v-4.8c0-1.8,1.2-2.2,2.1-2.2c0.8,0,5.2,0,5.2, 0v-8l-7.2,0c-8,0-9.8,6-9.8,9.8v5.3 h-4.6V32h4.6c0,10.6,0,23.3,0,23.3h9.7c0,0,0-12.9,0-23.3H42L42.8,23.8z" />
   </symbol>
 </svg>
 

diff --git a/layouts/post/summary.html b/layouts/post/summary.html
@@ -18,13 +18,13 @@ <h3 class="entry-title"><a href="{{ .Permalink }}" title="{{ .Title }}" class="e
     <p class="entry-meta"><span class="entry-time">{{ .Date.Format "Jan 2, 2006" }}</span> {{ .ReadingTime }} min read</p>
     <div class="sharing">
       <a class="share share-facebook" target="_blank" href="https://facebook.com/sharer/sharer.php?u={{ .Permalink }}" title="Share on Facebook">
-        <svg class="icon icon-facebook" fill="currentColor"><use xlink:href="#icon-facebook" /></svg>
+        <svg class="icon" fill="currentColor"><use xlink:href="#icon-facebook" /></svg>
       </a>
       <a class="share share-twitter" target="_blank" href="https://twitter.com/intent/tweet/?text={{ .Title }}&amp;url={{ .Permalink }}" title="Share on Twitter">
-        <svg class="icon icon-twitter" fill="currentColor"><use xlink:href="#icon-twitter" /></svg>
+        <svg class="icon share-twitter-icon" fill="currentColor"><use xlink:href="#icon-twitter" /></svg>
       </a>
       <a class="share share-google" target="_blank" href="https://plus.google.com/share?url={{ .Title }}&amp;url={{ .Permalink }}" title="Share on Google+">
-        <svg class="icon icon-google" fill="currentColor"><use xlink:href="#icon-googleplus" /></svg>
+        <svg class="icon" fill="currentColor"><use xlink:href="#icon-googleplus" /></svg>
       </a>
     </div>
   </footer>

diff --git a/styles/partials/icons.scss b/styles/partials/icons.scss
@@ -26,6 +26,10 @@
 
   &-twitter {
     background-color: $color-twitter;
+
+    &-icon {
+      margin: 5px 0 0 1px;
+    }
   }
 
   &-facebook {