first working version

.gitignore

@@ -0,0 +1,7 @@
+.node-local/
+node_modules/
+bin/
+yarn/
+data/
+build/
+vendor/

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Gus Esquivel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Makefile

@@ -0,0 +1,76 @@
+# This makefile should run download all necessary dependencies (including Node itself).
+# It will create local ./npm and ./node executables that can be used so you don't need
+# to pollute your global system.
+
+OS := $(shell uname | tr '[:upper:]' '[:lower:]')
+SITE_NAME="slate"
+
+NODE_VERSION=v7.9.0
+NODE_PLATFORM=${OS}-x64
+
+YARN_VERSION=0.23.2
+
+NODE_DOWNLOAD=http://nodejs.org/dist/$(NODE_VERSION)/node-$(NODE_VERSION)-$(NODE_PLATFORM).tar.gz
+NODE_HOME=.node-local
+NODE_INSTALLED=$(NODE_HOME)/.installed-$(NODE_VERSION)-$(NODE_PLATFORM)
+
+HUGO_DOWNLOAD=https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}
+YARN_DOWNLOAD=https://yarnpkg.com/downloads/${YARN_VERSION}/yarn-v${YARN_VERSION}.tar.gz
+
+VERSION=$(shell git describe --always --tags)
+DIRTY=$(shell test -n "`git status --porcelain`" && echo "+CHANGES" || true)
+
+BUILD_DIR=bin
+
+DIST:=find * -type d -exec
+
+default: build
+
+.PHONY: help
+help:
+	@echo 'Management commands for $(SITE_NAME):'
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "  \033[36m%-30s\033[0m %s\n", $$1, $$2}'
+
+## Download and peform local install of Node (will not affect anything else on the system)
+.PHONY: install-node
+install-node: $(NODE_INSTALLED)
+bin/node bin/npm $(NODE_INSTALLED):
+	@echo
+	@echo === Downloading Node $(NODE_VERSION)... ===
+	rm -rf $(NODE_HOME)
+	mkdir -p $(NODE_HOME)
+	curl $(NODE_DOWNLOAD) | tar xzf - --strip-components=1 --directory $(NODE_HOME)
+	rm -rf ./bin
+	mkdir -p ./bin
+	ln -f -s ../$(NODE_HOME)/bin/node ./bin/
+	ln -f -s ../$(NODE_HOME)/bin/npm  ./bin/
+	touch $(NODE_INSTALLED)
+
+# Install Node library deps
+.PHONY: deps
+deps: node_modules/.uptodate ## Install all dependencies
+node_modules/.uptodate: bin/npm bin/yarn
+	@echo
+	@echo === Installing libraries via Yarn... ===
+	./bin/yarn
+	ln -f -s ../node_modules/gulp/bin/gulp.js ./bin/gulp
+	touch $@
+
+bin/yarn:
+	@echo
+	@echo === Installing Yarn ===
+	rm -rf yarn
+	mkdir -p yarn
+	curl -L ${YARN_DOWNLOAD} | tar xzf - --strip-components=1 --directory yarn
+	ln -f -s ../yarn/bin/yarn.js ./bin/yarn
+
+.PHONY: clean
+clean: ## Clean up all dependencies and compiled code
+	rm -rf .node-local bin node_modules dist data/hash
+
+.PHONY: build
+build: install-node deps site ## Compile the website
+
+.PHONY: site
+site: ## Only make the site
+	./bin/gulp build

archetypes/default.md

@@ -0,0 +1,2 @@
++++
++++

gulpfile.js

@@ -0,0 +1,87 @@
+/* File: gulpfile.js */
+/* jshint node: true */
+'use strict';
+
+// grab our packages
+var gulp   = require('gulp');
+var jshint = require('gulp-jshint');
+var uglify = require('gulp-uglify');
+var concat = require('gulp-concat');
+var rename = require('gulp-rename');
+var autoprefixer = require('gulp-autoprefixer');
+var runSequence = require('run-sequence');
+var sass = require('gulp-sass');
+var cleanCss = require('gulp-clean-css');
+var hash = require('gulp-hash');
+var webserver = require('gulp-webserver');
+var del = require('del');
+var util = require('gulp-util');
+
+
+var src = './src',
+    vnd = './vendor',
+    dst = './static',
+    scssSrc = src + '/scss',
+    scssVnd = vnd + '/scss',
+    scssDst = dst + '/css',
+    jsSrc = src + '/js',
+    jsVnd = vnd + '/js',
+    jsDst = dst + '/js',
+    fontDst = dst + '/fonts';
+
+// define the default task and add the watch task to it
+gulp.task('default', ['build']);
+
+gulp.task('build', function(callback) {
+    runSequence('vendor', 'pack-css', 'pack-js');
+});
+
+gulp.task('pack-js', function () {
+    return gulp.src([jsVnd + '/**/*.js', jsSrc + '/**/*.js'])
+        .pipe(concat('slate.js'))
+        .pipe(util.env.debug ? util.noop() : uglify())
+        .pipe(gulp.dest(jsDst));
+});
+
+gulp.task('pack-css', function () {
+    return gulp.src([scssVnd + '/**/*.[s]?css', scssSrc + '/**/*.[s]?css'])
+        .pipe(sass({
+          outputStyle: 'compressed',
+          errLogToConsole: true
+        }))
+        .pipe(concat('slate.css'))
+        .pipe(cleanCss())
+   .pipe(gulp.dest(scssDst));
+});
+
+gulp.task('vendor', function () {
+    // del([scssDst + '/font-awesome.*', fontDst]);
+    gulp.src(['./node_modules/font-awesome/css/font-awesome.css'])
+        .pipe(gulp.dest(scssVnd));
+
+    gulp.src(['./node_modules/font-awesome/fonts/*'])
+        .pipe(gulp.dest(fontDst));
+
+    gulp.src(['./node_modules/shufflejs/dist/shuffle.js'])
+        .pipe(gulp.dest(jsVnd));
+
+    gulp.src(['./node_modules/tinycolor2/tinycolor.js'])
+        .pipe(gulp.dest(jsVnd));
+});
+
+// configure which files to watch and what tasks to use on file changes
+gulp.task('watch', function() {
+    runSequence('pack-css', 'pack-js');
+    gulp.watch(scssSrc + '/**/*css', ['pack-css']);
+    gulp.watch(jsSrc + '/**/*.js', ['pack-js']);
+});
+
+gulp.task('serve', ['watch'], function() {
+    gulp.src(dst)
+        .pipe(webserver({
+            livereload: true,
+            directoryListing: false,
+            open: true,
+            fallback: 'index.html'
+        }));
+});

layouts/_default/single.html

@@ -0,0 +1,43 @@
+<html>
+<head>
+<link rel="stylesheet" href="css/slate.css">
+<title>slate</title>
+</head>
+
+<body>
+
+<div class="nav-panel">
+    <nav>
+        <ul>
+            <li class="tag"><a href="#"><i class="icon fa fa-chevron-right" aria-hidden="true"></i></a></li>
+            <li><a href="#"><i class="icon fa fa-star" aria-hidden="true"></i></a></li>
+            <li><a href="#"><i class="icon fa fa-dot-circle-o" aria-hidden="true"></i></a></li>
+        </ul>
+    </nav>
+</div>
+
+<div class="container">
+    <div class="tile-container">
+        <a class="tile tile-link" href="#one">
+            <div class="tile-box">One</div>
+            <div class="tile-title">One</div>
+        </a>
+        <a class="tile tile-link" href="#two">
+            <div class="tile-box">Two</div>
+            <div class="tile-title">Two</div>
+        </a>
+        <a class="tile tile-link" href="#">
+            <div class="tile-box">Three</div>
+            <div class="tile-title">Three</div>
+        </a>
+        <a class="tile tile-link" href="#">
+            <div class="tile-box">Four</div>
+            <div class="tile-title">Four</div>
+        </a>
+    </div>
+</div>
+
+</body>
+<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
+<script src="js/slate.js"></script>
+</html>

layouts/index.html

@@ -0,0 +1,23 @@
+<html>
+<head>
+    <title>slate</title>
+    <link rel="stylesheet" href="css/slate.css">
+</head>
+
+<body>
+
+{{ partial "nav.html" . }}
+
+<div class="container">{{ partial "tile_slate.html" . }}
+</div>
+
+{{ if .Site.Data.page.backgrounds -}}
+<background data-backgrounds='{{ range .Site.Data.page.backgrounds }}
+            {{ . }},{{ end }}
+            '>
+{{- end }}
+
+</body>
+<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
+<script src="js/slate.js"></script>
+</html>

layouts/partials/nav.html

@@ -0,0 +1,8 @@
+<div class="nav-panel">
+    <nav>
+        <ul>
+            <li class="tag"><a data-tooltip="all" href="#"><i class="icon fa fa-th" aria-hidden="true"></i></a></li>
+{{ range .Site.Data.nav.tags }}            {{ partial "nav_item.html" . }}{{- end }}
+        </ul>
+    </nav>
+</div>

layouts/partials/nav_item.html

@@ -0,0 +1 @@
+<li class="tag"><a data-tooltip="{{ .name }}" href="#{{ .name | urlize }}"><i class="icon fa fa-{{ .icon }}" aria-hidden="true"></i></a></li>

layouts/partials/tile.html

@@ -0,0 +1,10 @@
+<a class="tile tile-link" href="{{ .url }}" data-groups='{{ if .tags }}{{ delimit .tags "," }}{{ end }}'>
+    <div class="tile-box"
+        data-title='{{ .name }}'
+        data-url='{{ .url }}'
+        {{ if .bg_color }}data-bg-color='{{ .bg_color }}'{{ end -}}
+        {{ if .txt_color }}data-txt-color='{{ .txt_color }}'{{ end -}}
+        {{ if .img }}data-img='{{ .img }}'{{ end -}}>
+        {{ if .img }}<img class="logo" src="{{ .img }}"></img>{{ else }}{{ .name }}{{ end }}</div>
+    <div class="tile-title">{{ .name }}</div>
+</a>

layouts/partials/tile_slate.html

@@ -0,0 +1,3 @@
+<div class="tile-container">{{ range .Site.Data.links.tiles }}
+{{ partial "tile.html" . }}{{ end }}
+</div>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "slate",
+  "version": "1.0.0",
+  "description": "A speed-dial like site",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Gus Esquivel",
+  "license": "MIT",
+  "devDependencies": {
+    "del": "^2.2.2",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.1",
+    "gulp-clean-css": "^3.0.4",
+    "gulp-concat": "^2.6.1",
+    "gulp-hash": "^4.1.1",
+    "gulp-jshint": "^2.0.4",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^3.1.0",
+    "gulp-uglify": "^2.1.2",
+    "gulp-util": "^3.0.8",
+    "gulp-webserver": "^0.9.1",
+    "jshint": "^2.9.4",
+    "jshint-stylish": "^2.2.1",
+    "run-sequence": "^1.2.2"
+  },
+  "dependencies": {
+    "font-awesome": "^4.7.0",
+    "shufflejs": "^4.1.1",
+    "tinycolor2": "^1.4.1"
+  }
+}

src/js/slate.js

@@ -0,0 +1,301 @@
+
+
+
+String.prototype.hashCode = function(){
+    // djb2 hash algorithm
+    var hash = 5381;
+    for (i = 0; i < this.length; i++) {
+        char = this.charCodeAt(i);
+        hash = ((hash << 5) + hash) + char; /* hash * 33 + c */
+    }
+    return hash >>> 0;
+};
+
+var Color = tinycolor;
+
+
+var Shuffle = window.shuffle;
+
+var shuffle = new Shuffle(document.querySelector('.tile-container'), {
+  group: shuffle.ALL_ITEMS,
+  itemSelector: '.tile',
+  gutterWidth: 16,
+  columnWidth: 188,
+  buffer: 1,
+  delimeter: ",",
+  useTransforms: false,
+});
+
+var filterTiles = function(tag) {
+    shuffle.filter(location.hash.slice(1));
+};
+
+window.onhashchange = filterTiles;
+
+var getUrlParts = function(baseUrl) {
+    var urlParts = {
+        domain: "",
+        before: "",
+        after: ""
+    };
+    var url = new URL(baseUrl);
+    var host = url.host;
+    urlParts.domain = host.replace(/^www\./i, "");
+
+    if (host.match(/^\d+\.\d+\.\d+\.\d+$/)) {
+            urlParts.domain = host;
+        return urlParts;
+    } else if (host.match(/^(\d+\.\d+\.\d+\.\d+)(:(\d+))?$/)) {
+        hostParts = host.match(/^(\d+\.\d+\.\d+\.\d+)(:(\d+))?$/);
+        urlParts.domain = hostParts[1];
+        urlParts.after = hostParts[3];
+        return urlParts;
+    }
+
+    var hostParts = urlParts.domain.split(".");
+    var longestPartIndex = 0;
+    for (var i = 1; i < hostParts.length - 1; i++) {
+        if (hostParts[i].length > hostParts[longestPartIndex].length) {
+            longestPartIndex = i;
+        }
+    }
+
+    urlParts.domain = hostParts[longestPartIndex];
+    urlParts.before = hostParts.slice(0, longestPartIndex).join(".");
+    urlParts.after = hostParts.slice(longestPartIndex + 1).join(".");
+
+    if(!urlParts.domain && url.pathname) {
+      urlParts.domain = url.pathname.split("/").filter(Boolean).pop();
+    }
+    return urlParts;
+};
+
+var fitText = function(text, boxWidth, boxHeight) {
+    var resizer = document.createElement("div");
+    resizer.style.visibility = "hidden";
+    resizer.style.position = "absolute";
+    document.body.appendChild(resizer);
+
+    var size = 40;
+
+    resizer.innerHTML = text;
+    resizer.style.fontSize = size;
+    while (resizer.offsetWidth > boxWidth) {
+        size = size - 1;
+        resizer.style.fontSize = size;
+    }
+
+    var textInfo = {
+        size: size,
+        width: resizer.offsetWidth,
+        height: resizer.offsetHeight
+    };
+    resizer.remove();
+    return textInfo;
+};
+
+
+var getTileColor = function(domain) {
+    var colorMap = [
+  "#B42424",
+  "#C83D1D",
+  "#BB7231",
+  "#E06B00",
+  "#55931F",
+  "#1C941B",
+  "#189365",
+  "#189196",
+  "#2D85A4",
+  "#2B6C90",
+  "#205396",
+  "#39448F",
+  "#55338E",
+  "#683089",
+  "#963A97",
+  "#A43343",
+  "#982F2F",
+  "#D30000",
+  "#E54C29",
+  "#DA7E2C",
+  // "#F0C92C",
+  "#73B43A",
+  "#3AB43A",
+  "#3AB487",
+  "#3AB0B4",
+  "#47A6C7",
+  "#3A88B4",
+  "#3A6FB4",
+  "#3A4AB4",
+  "#673AB4",
+  "#863AB4",
+  "#C846C9",
+  "#C44A5B",
+  "#AA4444",
+  "#E84545",
+  "#FF6946",
+  "#EC9344",
+  // "#F4D34F",
+  // "#8BD34B",
+  // "#4AD449",
+  // "#6FDFB5",
+  // "#45D3D9",
+  // "#5CC4E8",
+  "#3CA4DF",
+  "#3A83E3",
+  "#4056E3",
+  "#9058F0",
+  "#B467E2",
+  "#DF7CDF",
+  "#E5576B",
+  "#D35A5A",
+  // "#FF9C44",
+  // "#F2B722",
+  // "#4DCC7B",
+  "#3DC53D",
+  "#2DBBB1",
+  "#5E95D5",
+  // "#41BBF5",
+  "#5E5BE7",
+  "#1B7EFF",
+  "#5F74FF",
+  "#8A45FF",
+  "#B856F3",
+  "#DD66DD"
+];
+
+    return colorMap[domain.hashCode() % colorMap.length];
+
+};
+
+var renderImgTile = function(tile) {
+    tile.innerHTML = "";
+
+    var bgColor = tile.getAttribute("data-bg-color");
+    if (!bgColor) {
+        bgColor = "rgba(255,255,255,.8)";
+    }
+    bgColor = Color(bgColor);
+    bgColor.setAlpha(0.8);
+    tile.style.backgroundColor = bgColor;
+
+    var img = new Image();
+    img.src = tile.getAttribute("data-img");
+    img.className = "logo";
+    tile.appendChild(img);
+};
+
+var renderPlainTile = function(tile) {
+    var urlParts = getUrlParts(tile.getAttribute("data-url"));
+    tile.innerHTML = "";
+
+    var bgColor = tile.getAttribute("data-bg-color");
+    if (!bgColor) {
+        bgColor = "rgba(255,255,255,.8)";
+    }
+    bgColor = Color(bgColor);
+    bgColor.setAlpha(0.8);
+    tile.style.backgroundColor = bgColor;
+
+    var txtColor = tile.getAttribute("data-txt-color");
+    if (!txtColor) {
+        txtColor = getTileColor(urlParts.domain);
+        if (bgColor.isDark()) {
+            tile.style.color = "white";
+        }
+    }
+    txtColor = Color(txtColor);
+    tile.style.color = txtColor;
+
+    var boxWidth = 188, boxHeight = 120;
+    var margin = 8;
+
+    var textInfo = fitText(urlParts.domain, boxWidth-margin*2, boxHeight);
+
+    var domainDiv = document.createElement("div");
+    domainDiv.style.fontSize = textInfo.size;
+    domainDiv.style.position = "absolute";
+    tile.appendChild(domainDiv);
+
+    var beforeDiv = document.createElement("div");
+    beforeDiv.innerHTML = urlParts.before;
+    // original forumla is 7/18*size-10
+    beforeDiv.style.top = 0.35*textInfo.size-10;
+    beforeDiv.className = "pre-domain";
+    beforeDiv.style.textShadow = "-1px 0 "+bgColor+",0 1px "+bgColor+",1px 0 "+bgColor+",0 -1px "+bgColor;
+
+    var afterDiv = document.createElement("div");
+    afterDiv.innerHTML = urlParts.after;
+    afterDiv.style.top = textInfo.size-0.05*textInfo.size;
+    afterDiv.className = "post-domain";
+    afterDiv.style.textShadow = "-1px 0 "+bgColor+",0 1px "+bgColor+",1px 0 "+bgColor+",0 -1px "+bgColor;
+
+
+    domainDiv.appendChild(beforeDiv);
+    domainDiv.append(urlParts.domain);
+    domainDiv.appendChild(afterDiv);
+
+    var top = (boxHeight + margin)/2 - domainDiv.clientHeight/2;
+    var left = (boxWidth + margin)/2 + margin - domainDiv.clientWidth/2;
+    domainDiv.style.top = top;
+    domainDiv.style.left = left;
+
+    // console.log(urlParts.domain+"="+urlParts.domain.hashCode().toString());
+};
+
+var renderTiles = function() {
+    var tiles = document.getElementsByClassName("tile-box");
+    for(var i = 0; i < tiles.length; i++)
+    {
+        try {
+            if (tiles.item(i).getAttribute("data-img")) {
+                renderImgTile(tiles.item(i));
+            } else {
+                renderPlainTile(tiles.item(i));
+            }
+        }
+        catch(err) {
+            console.log("err:"+err);
+        }
+    }
+};
+
+renderTiles();
+
+var getBackgroundImages = function() {
+    var backgrounds = document.getElementsByTagName("background");
+    var images = [];
+    if (backgrounds.length > 0) {
+        var imgString = backgrounds[0].getAttribute("data-backgrounds");
+        images = imgString.split(/[\s,]+/).filter(Boolean);
+    }
+    return images;
+};
+
+var preloadBackgrounds = function() {
+    var images = getBackgroundImages();
+    for(var i = 0; i < images.length; i++)
+    {
+        // caches images, avoiding white flash between background replacements
+        new Image().src = images[i];
+    }
+};
+
+var rotateBackground = function(count) {
+    if (count === undefined || count === null) {
+        count = 0;
+    }
+
+    var images = getBackgroundImages();
+    if (images.length > 0) {
+        count = (count+1) % images.length;
+        // console.log("rotating background to "+count);
+
+        document.body.style.background = 'url("' + images[count] +'")';
+        document.body.style.backgroundSize = "cover";
+        if (images.length > 1) {
+            setTimeout(rotateBackground.bind(null, count), 30000);
+        }
+    }
+};
+preloadBackgrounds();
+rotateBackground();

src/scss/slate.scss

@@ -0,0 +1,271 @@
+// Slate CSS
+
+$tile-width: 188px;
+$tile-height: 120px;
+$tile-spacing: 16px;
+$title-height: 16px;
+$transition-time: .3s;
+
+$menu-bar-width: 50px;
+
+$background: #bdbdbd;
+$text-color: #000;
+$text-title-color: #fff;
+
+
+body {
+    user-select: none;
+    margin: 0;
+    padding: 0;
+    font-family: 'Exo', sans-serif;
+    font-weight: bold;
+    background-color: $background;
+    margin-left: 50px;
+    color: $text-color;
+}
+
+.container {
+    box-sizing: border-box;
+    min-height: 10px;
+    padding: 48px 0;
+    position: relative;
+    text-align: center;
+    justify-content: center;
+}
+
+@mixin min-width($width) {
+    @media screen and (min-width: $width) {
+        @content;
+    }
+}
+
+.tile-container {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-flow: row wrap;
+    flex-flow: row wrap;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 80%;
+    margin: auto;
+    min-width: calc(#{$tile-width} + #{$tile-spacing});
+
+    @for $i from 1 through 12 {
+        @include min-width((($tile-width + $tile-spacing) * ($i + 1))) {
+            width: (($tile-width + $tile-spacing) * $i);
+        }
+    }
+}
+
+.tile {
+    width: $tile-width;
+    max-width: $tile-width;
+    padding: 8px;
+    -webkit-flex: 0 0 188px;
+	flex: 0 0 188px;
+    transition: top 0.3s, left 0.3s, opacity 0.3s;
+}
+
+.tile-box {
+    height: $tile-height;
+    max-height: $tile-height;
+    width: $tile-width;
+    max-width: $tile-width;
+    border-radius: 2px;
+    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.2);
+    box-sizing: border-box;
+    background: rgba(255,255,255,.8);
+    font-size: 28px;
+    vertical-align: middle;
+    text-align: center;
+    display: table-cell;
+}
+
+.tile-link {
+    color: $text-color;
+    text-decoration: none;
+}
+
+.tile-title {
+    display: block;
+    width: $tile-width;
+    background-color: transparent;
+    box-sizing: border-box;
+    color: $text-title-color;
+    display: block;
+    height: 32px;
+    line-height: 16px;
+    overflow: hidden;
+    padding: 8px;
+    text-align: center;
+    text-overflow: ellipsis;
+    transition: color 0.3s;
+    white-space: nowrap;
+}
+
+.logo {
+    max-width:170;
+    max-height:100px;
+    width: auto;
+    height: auto;
+}
+
+// ===========================================================================
+// nav menu
+
+.nav-panel {
+    /*background-image: linear-gradient(hsla(0, 0%, 0%, .2), hsla(0, 0%, 0%, .2));*/
+    background: rgba(0,0,0,.1);
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    /*transition: background-image 3s;*/
+	transition: all 0.8s ease-in-out;
+    transition-delay: 1s;
+    width: 50px;
+}
+
+.nav-panel:hover {
+    /*background-image: linear-gradient(hsla(0, 0%, 0%, .5), hsla(0, 0%, 0%, .5));*/
+    background: rgba(0,0,0,.5);
+    transition: background .5s ease-in-out;
+}
+
+nav {
+    box-sizing: border-box;
+    display: block;
+    height: 100%;
+    padding: 7px 4px 4px;
+    width: 50px;
+    -webkit-user-select: none;
+    color: #fff;
+
+    ul {
+        display: flex;
+        flex-flow: column;
+        height: 100%;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    ul::after {
+        content: '';
+        display: list-item;
+        flex: 1;
+        order: 2;
+    }
+
+    li {
+        height: 40px;
+        padding: 10px 0 0 0;
+        position: relative;
+        order: 1;
+        transition: height $transition-time;
+        text-align: center;
+
+        a {
+            color: #FFF;
+            text-decoration: none;
+        }
+    }
+}
+
+.icon {
+  display: block;
+  opacity: .6;
+  transition: background-color $transition-time,
+              opacity $transition-time,
+              -webkit-mask-size $transition-time;
+  -webkit-mask-position: 50% 15px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 23px;
+}
+
+.icon:hover {
+    opacity: 1;
+}
+
+// ===========================================================================
+// text tile parts
+
+.pre-domain, .post-domain {
+    font-size: 10px;
+    position: absolute;
+    text-shadow:
+       -1px 0 rgba(255,255,255,.8),
+        0 1px rgba(255,255,255,.8),
+        1px 0 rgba(255,255,255,.8),
+        0 -1px rgba(255,255,255,.8);
+}
+
+.pre-domain {
+    top: 5px;
+    left: 0px;
+}
+
+.post-domain {
+    top: 40px;
+    right: 0px;
+}
+
+// ===========================================================================
+// nav menu tooltips
+
+*[data-tooltip] {
+    position: relative;
+}
+
+*[data-tooltip]::after {
+    content: attr(data-tooltip);
+
+    position: absolute;
+    top: -20px;
+    left: 30px;
+
+    pointer-events: none;
+    opacity: 0;
+    -webkit-transition: opacity .15s ease-in-out;
+    -moz-transition: opacity .15s ease-in-out;
+    -ms-transition: opacity .15s ease-in-out;
+    -o-transition: opacity .15s ease-in-out;
+    transition: opacity .15s ease-in-out;
+
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 2px 2px;
+    border: 1px solid rgba(0, 0, 0, 0.8);
+    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
+    color: white;
+}
+
+*[data-tooltip]:hover::after {
+    opacity: 1;
+}
+
+// ===========================================================================
+// background image rotation
+
+body {
+	background-repeat: no-repeat;
+	background-position: center top;
+	background-size: cover;
+    background-blend-mode: darken;
+	-webkit-transition: background 1.4s linear;
+	-moz-transition: background 1.4s linear;
+	-ms-transition: background 1.4s linear;
+	-o-transition: background 1.4s linear;
+	transition: background 1.4s linear;
+    background-position-x: center;
+    background-position-y: center;
+    background-repeat-x: no-repeat;
+    background-repeat-y: no-repeat;
+    background-attachment: fixed;
+}
+
+.hidden {
+    display: none;
+}

theme.toml

@@ -0,0 +1,13 @@
+
+name = "Slate"
+license = "MIT"
+licenselink = "https://github.com/gesquive/slate/blob/master/LICENSE.md"
+description = "A speed dial theme"
+homepage = "http://github.com/gesquive/slate"
+tags = []
+features = []
+min_version = "0.20"
+
+[author]
+  name = "Gus Esquivel"
+  homepage = "https://github.com/gesquive"