From e5517ee98a9829eb251dce063e48d9624f04885d Mon Sep 17 00:00:00 2001 From: Adrian Short Date: Sat, 2 Sep 2017 16:40:29 +0100 Subject: [PATCH] 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. --- layouts/partials/header.html | 24 +++++++++--------------- static/css/image.css | 2 +- static/css/main.css | 18 ++++++++---------- static/css/post.css | 2 +- 4 files changed, 19 insertions(+), 27 deletions(-) diff --git a/layouts/partials/header.html b/layouts/partials/header.html index d67cbbc..41a67a6 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -6,6 +6,7 @@ {{ "" | safeHTML }} + {{- with .Type -}} @@ -27,18 +28,11 @@

{{ .Site.Title }}

- + +
+ {{ range .Site.Params.social}} + + + + {{ end }} +
diff --git a/static/css/image.css b/static/css/image.css index e259150..d8a764c 100644 --- 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; } diff --git a/static/css/main.css b/static/css/main.css index 223a767..a5132e6 100644 --- 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%; diff --git a/static/css/post.css b/static/css/post.css index 2ea9cd0..e1c3879 100644 --- 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; }