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
@@ -6,6 +6,7 @@ | |||||
{{ "<!-- Tumble theme for Hugo: https://github.com/adrianshort/tumble -->" | safeHTML }} | {{ "<!-- Tumble theme for Hugo: https://github.com/adrianshort/tumble -->" | safeHTML }} | ||||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||
<link rel="stylesheet" href="{{ relURL "/css/main.css" }}"> | <link rel="stylesheet" href="{{ relURL "/css/main.css" }}"> | ||||
<script src="https://use.fontawesome.com/8ef49d4a0a.js"></script> | |||||
{{- with .Type -}} | {{- with .Type -}} | ||||
<link rel="stylesheet" href="{{ relURL "/css/" }}{{ . }}.css"> | <link rel="stylesheet" href="{{ relURL "/css/" }}{{ . }}.css"> | ||||
@@ -27,18 +28,11 @@ | |||||
</head> | </head> | ||||
<body> | <body> | ||||
<h1 id="site-title"><a href="{{ relURL "/" }}">{{ .Site.Title }}</a></h1> | <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> |
@@ -3,6 +3,6 @@ body { | |||||
color: black; | 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; | color: #eee; | ||||
} | } |
@@ -14,15 +14,8 @@ a:visited { | |||||
color: #777; | 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 { | .quote { | ||||
@@ -122,7 +115,7 @@ article h1 { | |||||
} | } | ||||
#site-title { | #site-title { | ||||
margin: 70px 0; | |||||
margin: 50px 0 15px 0; | |||||
} | } | ||||
#site-title a, #site-title a:visited { | #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; | text-decoration: none; | ||||
} | } | ||||
.fa { | |||||
margin: 0 15px 0 0; | |||||
color: white; | |||||
} | |||||
@media screen and (max-width: 599px) { | @media screen and (max-width: 599px) { | ||||
body { | body { | ||||
width: 90%; | width: 90%; | ||||
@@ -8,6 +8,6 @@ h1, h2, h3 { | |||||
text-transform: none; | 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; | color: #ccc; | ||||
} | } |