Use Font Awesome icons for social links

Inspired by @mgjohansen's Hucore theme: https://themes.gohugo.io/hucore/ This is a flexible approach that lets the user use any FA icons with whatever links they like. Better than forcing them to stick to a predefined set of social networks.
il y a 6 ans · e5517ee98a
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -6,6 +6,7 @@
    {{ "<!-- Tumble theme for Hugo: https://github.com/adrianshort/tumble -->" | safeHTML }}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ relURL "/css/main.css" }}">
    <script src="https://use.fontawesome.com/8ef49d4a0a.js"></script>

    {{- with .Type -}}
      <link rel="stylesheet" href="{{ relURL "/css/" }}{{ . }}.css">
@@ -27,18 +28,11 @@
  </head>
  <body>
    <h1 id="site-title"><a href="{{ relURL "/" }}">{{ .Site.Title }}</a></h1>
    <ul id="site-social">
        {{- with .Site.Params.email -}}
        <li><a href="mailto:{{ . }}">{{ . }}</a></li>
        {{- end -}}
        {{- with .Site.Params.twitter -}}
        <li><a href="https://twitter.com/{{ . }}">Twitter</a></li>
        {{- end -}}
        {{- with .Site.Params.medium -}}
        <li><a href="https://medium.com/@{{ . }}">Medium</a></li>
        {{- end -}}
        {{- with .Site.Params.github -}}
        <li><a href="https://github.com/{{ . }}">GitHub</a></li>
        {{- end -}}
        
    </ul>

    <div id="site-social">
    {{ range .Site.Params.social}}
      <a href="{{ .url }}" title="{{ .title }}">
        <i class="fa {{ .fa_icon }}"></i>
      </a>
    {{ end }}
    </div>
--- a/static/css/image.css
+++ b/static/css/image.css
@@ -3,6 +3,6 @@ body {
  color: black;
 }

 h1#site-title a, h1#site-title a:visited, h1#site-title a:hover {
 h1#site-title a, h1#site-title a:visited, h1#site-title a:hover, .fa {
  color: #eee;
 }
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -14,15 +14,8 @@ a:visited {
  color: #777;
 }

 ul#site-social {
  margin: 0;
 }

 ul#site-social li {
  list-style-type: none;
  display: inline;
  margin: 0 10px 0 0;
  color: #fff;
 #site-social {
  font-size: 1.3rem;
 }

 .quote {
@@ -122,7 +115,7 @@ article h1 {
 }

 #site-title {
  margin: 70px 0;
  margin: 50px 0 15px 0;
 }

 #site-title a, #site-title a:visited {
@@ -193,6 +186,11 @@ ul.tag-cloud li a, ul.tag-cloud li a:visited {
  text-decoration: none;
 }

 .fa {
  margin: 0 15px 0 0;
  color: white;
 }

@media screen and (max-width: 599px) {
    body {
      width: 90%;
--- a/static/css/post.css
+++ b/static/css/post.css
@@ -8,6 +8,6 @@ h1, h2, h3 {
  text-transform: none;
 }

 h1#site-title a, h1#site-title a:visited, h1#site-title a:hover {
 h1#site-title a, h1#site-title a:visited, h1#site-title a:hover, .fa {
  color: #ccc;
 }