From e25e11cbf28fe311d47978a9e1bc212dd3d3ae5a Mon Sep 17 00:00:00 2001 From: Gus Esquivel Date: Tue, 16 May 2017 15:25:01 -0500 Subject: [PATCH] add readme --- README.md | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..8a2cb25 --- /dev/null +++ b/README.md @@ -0,0 +1,147 @@ +# slate theme for hugo + + +slate is a single-page speed dial theme for [Hugo](http://gohugo.io/). + +![slate hugo theme screenshot](https://raw.githubusercontent.com/gesquive/slate/master/images/screenshot.png) + +# Features + - Rotating image background + - Image and text tile display mode + + +# Installation + +## Installing this theme + + mkdir themes + cd themes + git clone https://github.com/gesqyuve/slate + +## Build with this theme + + hugo server -t slate + +# Configuration + +**config.toml** + +``` toml +baseURL = "http://example.org/" +languageCode = "en-us" +title = "My New Hugo Site" +theme = "slate" + +[ params ] +# optional image background rotation +BackgroundImages = [ + "bg/b1920-000.jpg", + "bg/b1920-001.jpg", + "bg/b1920-002.jpg", + "bg/b1920-003.jpg", + "bg/b1920-004.jpg" +] +# optional background style (valid css only) +BackgroundStyle = "background: #000000;" + +# list of nav tags +[[ params.nav ]] +name = "favorites" # display name +tag = "favorite" # url/tag name +icon = "star" # font-awesome icon name + +``` + +Example : [config.toml](https://github.com/gesquive/slate/blob/master/config.toml) + +## Links + +All links are defined in the `data/links.yml` data file. + +Example of link definitions in the data file. + +``` yml +tiles: +- + name: 'google' + url: 'https://google.com' + img: 'google.svg' + tags: ['favorite', 'search'] +- + name: 'bing' + url: 'https://bing.com' + img: 'bing.svg' + txt_color: '#ffffff' + bg_color: '#ffb900' + tags: ['search'] +- + name: 'amazon' + url: 'https://amazon.com' + img: 'amazon.svg' + bg_color: '#ffffff' + txt_color: '#ff9900' + tags: ['favorite', 'shopping'] +- + name: 'reddit' + url: 'https://reddit.com' + img: 'reddit.svg' + bg_color: '#5f99cf' + txt_color: '#ffffff' +- + name: 'spotify' + url: 'https://web.spotify.com' + img: 'spotify.svg' + bg_color: '#191414' + txt_color: '#1db954' + tags: ['favorite', 'music'] +- + name: 'google music' + url: 'https://play.google.com/music/listen' + img: 'google-music.png' + bg_color: '#ffffff' + txt_color: '#ff5722' + tags: ['music'] +- + name: 'pandora' + url: 'https://pandora.com' + img: 'pandora.svg' + bg_color: '#005483' + txt_color: '#ffffff' + # tags: ['music'] + +``` + +## Navigation + +Along the left side of the screen is a navigation bar that can be used to filter the links. The filtering occurs on the tag attribute of the links. For example, when the 'favorite' tag is selected, only the links with the 'favorite' tag attribute will be shown. + +A nav filter is defined as: +- **name**: The name displayed in the UI +- **tag**: the tag name to filter links with +- **icon**: the [font-awesome](http://fontawesome.io/icons/) name of the icon to display + +Example of a menu definition in main config file. + + +``` toml +[[ params.nav ]] +name = "favorites" +tag = "favorite" +icon = "star" + +[[ params.nav ]] +name = "search" +tag = "search" +icon = "search" + +[[ params.nav ]] +name = "shopping" +tag = "shopping" +icon = "shopping-basket" + +[[ params.nav ]] +name = "music" +tag = "music" +icon = "headphones" + +```