Browse Source

Add support for social link icons in footer

This uses https://github.com/drinchev/monosocialiconsfont font
for the icons.
master
John Ku 9 years ago
parent
commit
5d3954c9c7
  1. 5
      CHANGELOG.md
  2. 4
      README.md
  3. 13
      exampleSite/config.toml
  4. 16
      layouts/partials/footer.html
  5. 3
      layouts/partials/head.html
  6. 8
      layouts/partials/social.html
  7. 36
      static/css/monosocialiconsfont.css
  8. 6
      static/css/style.css
  9. BIN
      static/fonts/MonoSocialIconsFont-1.10.eot
  10. BIN
      static/fonts/MonoSocialIconsFont-1.10.otf
  11. 1013
      static/fonts/MonoSocialIconsFont-1.10.svg
  12. BIN
      static/fonts/MonoSocialIconsFont-1.10.ttf
  13. BIN
      static/fonts/MonoSocialIconsFont-1.10.woff

5
CHANGELOG.md

@ -1,5 +1,10 @@
# Changelog
### 2015/7/12
#### Social link icons
Social links with icons can be enabled replacing the copyright field in footer. Configure the style and links in `config.toml`.
### 2015/26/11
Hugo v0.15 is required in order to run the theme with the changes listed below:

4
README.md

@ -41,6 +41,10 @@ Use the about page to introduce yourself to your visitors. You can customize the
This theme features a comment system powered by Disqus too. Just add your Disqus-shortname to the [`config.toml`](//github.com/digitalcraftsman/hugo-cactus-theme/blob/dev/exampleSite/config.toml) and let readers respond to your blog posts.
## Social link icons
You can add a social link panel in the footer by adding entries to the [`config.toml`](//github.com/digitalcraftsman/hugo-cactus-theme/blob/dev/exampleSite/config.toml). The icons uses fonts from the [mono social icons](https://github.com/drinchev/monosocialiconsfont) project. There are 3 styles of icon - circle, rounded, or default(empty).
## Nearly finished
In order to see your site in action, run Hugo's built-in local server.

13
exampleSite/config.toml

@ -34,4 +34,15 @@ disqusShortname = "spf13"
share = ""
# 404 page
title404 = ""
subtitle404 = ""
subtitle404 = ""
# Social icons style - circle, rounded, or empty
socialIconStyle = "circle"
# Add additional social link entries underneath
[social]
twitter = "http://www.twitter.com/"
facebook = "http://www.facebook.com/"
github = "http://www.github.com/"
dribble = "http://www.dribbble.com/"

16
layouts/partials/footer.html

@ -1,7 +1,13 @@
<footer id="footer">
<p class="small">{{ with .Site.Params.copyright }}
{{ . | markdownify }}
{{ if .Site.Social }}
{{ partial "social.html" . }}
{{ else }}
© Copyright {{.Now.Format "2006"}} {{ .Site.Params.name }}
{{ end }}</p>
</footer>
<p class="small">
{{ with .Site.Params.copyright }}
{{ . | markdownify }}
{{ else }}
© Copyright {{.Now.Format "2006"}} {{ .Site.Params.name }}
{{ end }}
</p>
{{ end }}
</footer>

3
layouts/partials/head.html

@ -11,7 +11,8 @@
<link rel="shortcut icon" href="{{ .Site.BaseURL }}images/favicon.ico">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/monosocialiconsfont.css">
{{ if .Site.Params.enableRSS }}
<link href="{{ .Site.RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
{{ end }}
</head>
</head>

8
layouts/partials/social.html

@ -0,0 +1,8 @@
{{ $iconStyle := .Site.Params.socialIconStyle }}
<div id="social">
{{ range $key, $val := .Site.Social }}
<a class="symbol" href="{{$val}}">
{{ $iconStyle }}{{ if eq $key "twitter" }}twitterbird{{ else }}{{ $key }}{{ end }}
</a>
{{ end }}
</div>

36
static/css/monosocialiconsfont.css

@ -0,0 +1,36 @@
@font-face {
font-family: 'Mono Social Icons Font';
src: url('../fonts/MonoSocialIconsFont-1.10.eot');
src: url('../fonts/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('../fonts/MonoSocialIconsFont-1.10.woff') format('woff'),
url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('../fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('../fonts/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
a.symbol {
color: #cdd4da;
font-size: 2rem;
text-decoration: none;
margin-right: 0.3rem;
}
a.symbol:hover {
color: #BCD4DA;
}

6
static/css/style.css

@ -622,6 +622,12 @@ h2.month {
margin-left: 2px;
}
#social {
display: flex;
flex-direction: row;
justify-content: center;
}
/* Media Queries */
@media screen and (max-width: 540px) {
#wrapper { padding:20px 20px 20px 20px;}

BIN
static/fonts/MonoSocialIconsFont-1.10.eot

BIN
static/fonts/MonoSocialIconsFont-1.10.otf

1013
static/fonts/MonoSocialIconsFont-1.10.svg
File diff suppressed because it is too large
View File

BIN
static/fonts/MonoSocialIconsFont-1.10.ttf

BIN
static/fonts/MonoSocialIconsFont-1.10.woff

Loading…
Cancel
Save