directly include icons as svgs
This commit is contained in:
Niklas Buschmann
parent
56ce3fcba0
commit
d1ebe75f4e
14
README.md
14
README.md
@ -15,7 +15,7 @@ at the top of the file.
|
|||||||
|
|
||||||
## Sidebar
|
## 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:
|
An example `config.yaml` section could look like this:
|
||||||
|
|
||||||
@ -23,17 +23,17 @@ An example `config.yaml` section could look like this:
|
|||||||
params:
|
params:
|
||||||
sidebar: true
|
sidebar: true
|
||||||
show_excerpts: true
|
show_excerpts: true
|
||||||
fontawesome: true
|
|
||||||
description: 'Made by <a href="">Blog Author</a>'
|
description: 'Made by <a href="">Blog Author</a>'
|
||||||
|
|
||||||
menu:
|
menu:
|
||||||
main:
|
main:
|
||||||
- {name: "Home", url: "/", identifier: "home", weight: 1, pre: "<span class='fas fa-home hidden'></span>"}
|
- {name: "Home", url: "/", identifier: "home", weight: 1}
|
||||||
- {name: "About", url: "/about/", identifier: "address-card", weight: 2, pre: "<span class='fas fa-address-card hidden'></span>"}
|
- {name: "About", url: "/about/", identifier: "address-card", weight: 2}
|
||||||
remote:
|
remote:
|
||||||
- {name: "Mail", url: "mailto:", identifier: "envelope", weight: 3, pre: "<span class='fas fa-envelope hidden'></span>"}
|
- {name: "Mail", url: "mailto:", identifier: "envelope", weight: 3}
|
||||||
- {name: "Github", url: "https://github.com/", identifier: "github", weight: 4, pre: "<span class='fab fa-github hidden'></span>"}
|
- {name: "Github", url: "https://github.com/", identifier: "github", weight: 4}
|
||||||
- {name: "Subscribe", url: "/index.xml", identifier: "rss", weight: 5, pre: "<span class='fas fa-rss hidden'></span>"}
|
- {name: "Subscribe", url: "/index.xml", identifier: "rss", weight: 5}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|||||||
@ -7,9 +7,6 @@
|
|||||||
<meta name="description" content="{{ .Description | default .Site.Params.description }}">
|
<meta name="description" content="{{ .Description | default .Site.Params.description }}">
|
||||||
{{- end }}
|
{{- end }}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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/index.css">
|
||||||
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/classes.css">
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/classes.css">
|
||||||
{{- if .Site.Params.sidebar }}
|
{{- if .Site.Params.sidebar }}
|
||||||
@ -21,16 +18,23 @@
|
|||||||
{{ partial "math.html" . }}
|
{{ partial "math.html" . }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
||||||
|
{{ $font_awesome := getJSON "themes/contrast-hugo/static/font-awesome/icons.json" }}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header class="icons">
|
||||||
{{ if not (gt (len .Site.Menus) 1) }}
|
{{ if not (gt (len .Site.Menus) 1) }}
|
||||||
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
|
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ range .Site.Menus }}
|
{{ range $menu, $items := .Site.Menus }}
|
||||||
<nav>
|
<nav>
|
||||||
{{ range . }}
|
{{ range $items }}
|
||||||
<a href="{{ .URL }}" {{ if (eq $.RelPermalink .URL) }}class="selected"{{ end }}>{{ .Pre }}{{ .Name }}{{ .Post }}</a>
|
{{ $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 }}
|
{{ end }}
|
||||||
</nav>
|
</nav>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
|
|
||||||
@ -29,6 +29,11 @@
|
|||||||
text-decoration: inherit;
|
text-decoration: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa, .fab, .fad, .fal, .far, .fas {
|
.icons svg {
|
||||||
margin-right: 1.2em;
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
fill: currentColor;
|
||||||
|
transition: .2s color;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-bottom: .15em;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -51,6 +51,10 @@ article header h1 {
|
|||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icons svg {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
margin: 2em 0;
|
margin: 2em 0;
|
||||||
}
|
}
|
||||||
|
|||||||
34
static/font-awesome/LICENSE.txt
Normal file
34
static/font-awesome/LICENSE.txt
Normal 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
56376
static/font-awesome/icons.json
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user