adrianshort
/
tumble
mirror of https://github.com/adrianshort/tumble.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

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.
master
Adrian Short 7 years ago
parent
8096748c7d
commit
e5517ee98a
4 changed files with 19 additions and 27 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -15
      layouts/partials/header.html
  2. +1
    -1
      static/css/image.css
  3. +8
    -10
      static/css/main.css
  4. +1
    -1
      static/css/post.css

+ 9
- 15
layouts/partials/header.html View File

@@ -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>

+ 1
- 1
static/css/image.css View File

@@ -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;
}

+ 8
- 10
static/css/main.css View File

@@ -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%;


+ 1
- 1
static/css/post.css View File

@@ -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;
}

Write Preview
Loading…
Cancel
Save