TnSb
/
contrast-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

directly include icons as svgs

This commit is contained in:
Niklas Buschmann 2020-02-18 17:55:14 +01:00
parent 56ce3fcba0
commit d1ebe75f4e
7 changed files with 56439 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -15,7 +15,7 @@ at the top of the file.
## Sidebar
Instead of the horizontal menu, a sidebar can be enabled with `sidebar: true`. See [here](https://niklasbuschmann.github.io/contrast/) for an example of the sidebar in action. Adding a `hidden` class to the icon tag will hide the icon on mobile devices.
Instead of the horizontal menu, a sidebar can be enabled with `sidebar: true`. See [here](https://niklasbuschmann.github.io/contrast/) for an example of the sidebar in action.
An example `config.yaml` section could look like this:
@ -23,17 +23,17 @@ An example `config.yaml` section could look like this:
params:
sidebar: true
show_excerpts: true
fontawesome: true
description: 'Made by <a href="">Blog Author</a>'
menu:
main:
- {name: "Home", url: "/", identifier: "home", weight: 1, pre: "<span class='fas fa-home hidden'></span>"}
- {name: "About", url: "/about/", identifier: "address-card", weight: 2, pre: "<span class='fas fa-address-card hidden'></span>"}
- {name: "Home", url: "/", identifier: "home", weight: 1}
- {name: "About", url: "/about/", identifier: "address-card", weight: 2}
remote:
- {name: "Mail", url: "mailto:", identifier: "envelope", weight: 3, pre: "<span class='fas fa-envelope hidden'></span>"}
- {name: "Github", url: "https://github.com/", identifier: "github", weight: 4, pre: "<span class='fab fa-github hidden'></span>"}
- {name: "Subscribe", url: "/index.xml", identifier: "rss", weight: 5, pre: "<span class='fas fa-rss hidden'></span>"}
- {name: "Mail", url: "mailto:", identifier: "envelope", weight: 3}
- {name: "Github", url: "https://github.com/", identifier: "github", weight: 4}
- {name: "Subscribe", url: "/index.xml", identifier: "rss", weight: 5}
```
## Features

18
layouts/_default/baseof.html
View File

@ -7,9 +7,6 @@
<meta name="description" content="{{ .Description | default .Site.Params.description }}">
{{- end }}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{- if .Site.Params.fontawesome }}
{{ partial "font-awesome.html" . }}
{{- end }}
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/index.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/classes.css">
{{- if .Site.Params.sidebar }}
@ -21,16 +18,23 @@
{{ partial "math.html" . }}
{{- end }}
{{ $font_awesome := getJSON "themes/contrast-hugo/static/font-awesome/icons.json" }}
<body>
<header>
<header class="icons">
{{ if not (gt (len .Site.Menus) 1) }}
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
{{ end }}
{{ range .Site.Menus }}
{{ range $menu, $items := .Site.Menus }}
<nav>
{{ range . }}
<a href="{{ .URL }}" {{ if (eq $.RelPermalink .URL) }}class="selected"{{ end }}>{{ .Pre }}{{ .Name }}{{ .Post }}</a>
{{ range $items }}
{{ $icon := index $font_awesome .Identifier }}
{{ $svg := $icon.svg.solid | default $icon.svg.regular | default $icon.svg.brands }}
<a href="{{ .URL }}" {{ if (eq $.RelPermalink .URL) }}class="selected"{{ end }}>
<span {{ if eq $menu "main" }}class="hidden"{{ end }}>{{ safeHTML $svg.raw }}</span>
<span {{ if not (eq $menu "main") }}class="hidden"{{ end }}>{{ .Name }}</span>
</a>
{{ end }}
</nav>
{{ end }}

1
layouts/partials/font-awesome.html
View File

@ -1 +0,0 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">

9
static/css/classes.css
View File

@ -29,6 +29,11 @@
text-decoration: inherit;
}
.fa, .fab, .fad, .fal, .far, .fas {
margin-right: 1.2em;
.icons svg {
height: 1em;
width: 1em;
fill: currentColor;
transition: .2s color;
vertical-align: middle;
margin-bottom: .15em;
}

4
static/css/sidebar.css
View File

@ -51,6 +51,10 @@ article header h1 {
font-size: 2em;
}
.icons svg {
margin-right: 1rem;
}
.description {
margin: 2em 0;
}

34
static/font-awesome/LICENSE.txt Normal file
View File

@ -0,0 +1,34 @@
Font Awesome Free License
-------------------------
Font Awesome Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
Full Font Awesome Free license: https://fontawesome.com/license/free.
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
packaged as SVG and JS file types.
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
In the Font Awesome Free download, the SIL OFL license applies to all icons
packaged as web and desktop font files.
# Code: MIT License (https://opensource.org/licenses/MIT)
In the Font Awesome Free download, the MIT license applies to all non-font and
non-icon files.
# Attribution
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
Awesome Free files already contain embedded comments with sufficient
attribution, so you shouldn't need to do anything additional when using these
files normally.
We've kept attribution comments terse, so we ask that you do not actively work
to remove them from files, especially code. They're a great way for folks to
learn about Font Awesome.
# Brand Icons
All brand icons are trademarks of their respective owners. The use of these
trademarks does not indicate endorsement of the trademark holder by Font
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
to represent the company, product, or service to which they refer.**

56376
static/font-awesome/icons.json Normal file
View File

File diff suppressed because one or more lines are too long