diff --git a/README.md b/README.md
index af09573..0b23db8 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ This project uses:
- jQuery
- Bootstrap CSS
- Mousetrap.js
+- Trianglify
- Font Awesome
- Unsplash
@@ -22,7 +23,7 @@ Copy the config.sample.json file and rename to config.json. Be sure to update th
- 'items' => The menu will scale to the amount of items you want to display. Insert any link you'd like, or {{cur}} for the current URL of the page. Choose icons from [Font Awesome](http://fontawesome.io/icons/)
### Unsplash Background Images
-- 'unsplash_client_id' => Get Unsplash client ID from [Unsplash](https://unsplash.com/developers)
+- 'unsplash_client_id' => Get Unsplash client ID from [Unsplash](https://unsplash.com/developers) Leave this blank if you want to use Trianglify!
- 'credits' => Whether you want to give credits to the artists, or not.
### Custom Background Images
diff --git a/config.sample.json b/config.sample.json
index be8e9c5..cdd4a7d 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -4,7 +4,7 @@
"custom_url" : "",
"custom_url_selector" : "",
"custom_url_headers" : [],
- "unsplash_client_id" : "Make yourself an Unsplash Account here: https://unsplash.com/developers",
+ "unsplash_client_id" : "",
"items" : [
{
"alt" : "Facebook",
diff --git a/hp_assets/css/main.css b/hp_assets/css/main.css
index 24b460c..62bc0ff 100644
--- a/hp_assets/css/main.css
+++ b/hp_assets/css/main.css
@@ -1,5 +1,5 @@
html {height: 100%; width: 100%;}
-body {font-family: sans-serif; background: url("../img/sayagata-400px.png") repeat; z-index: 1; height: 100%; width: 100%; background-position: center; background-attachment: fixed;}
+body {font-family: sans-serif; z-index: 1; height: 100%; width: 100%; background-position: center; background-attachment: fixed;}
.hidden {display: none;}
.menu-item {display: none; z-index: 3;}
@@ -23,8 +23,15 @@ body.menu-shown #bg-overlay {opacity: 0.3;}
#mobile-menu-wrap {z-index: 3; position: absolute; top: 15px; left: 15px;}
#mobile-menu-wrap a {font-size: 20px;}
-.bg {border-radius: 5px; background-color: rgba(0, 0, 0, .5); padding: 20px;}
-.bg a {color: #fff;}
+.bg {
+ border-radius: 5px;
+ background-color: rgba(0, 0, 0, .5);
+ padding: 20px;
+}
+
+.bg a {
+ color: #fff;
+}
#links-wrap {
font-size: 80px;
@@ -49,8 +56,8 @@ body.menu-shown #bg-overlay {opacity: 0.3;}
#links-wrap a {transition: .3s all;}
#links-wrap a:hover {color: #d3d3d3;}
#links-wrap .link {display: inline-block; width: 33%; float: left; text-align: center;}
+#links-wrap::-webkit-scrollbar {width: 10px; background-color: transparent;}
+#links-wrap::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.4); background-color: rgba(255,255,255,.2);}
#pic-info-wrap {color: #fff; font-size: 16px; position: absolute; bottom: 15px; left: 15px;}
#pic-info-wrap a:hover, #pic-info-wrap a:active {color: #fff; text-decoration: none;}
-
-#clock-wrap {color: #fff; font-size: 30px; position: absolute; top: 15px; right: 15px;}
diff --git a/hp_assets/js/trianglify.min.js b/hp_assets/js/trianglify.min.js
new file mode 100644
index 0000000..5f81ce9
--- /dev/null
+++ b/hp_assets/js/trianglify.min.js
@@ -0,0 +1 @@
+(function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;f="undefined"==typeof window?"undefined"==typeof global?"undefined"==typeof self?this:self:global:window,f.Trianglify=e()}})(function(){var e,f=Math.max,d=Math.sqrt,a=Math.abs,n=Math.floor;return function d(c,e,n){function f(i,o){if(!e[i]){if(!c[i]){var r="function"==typeof require&&require;if(!o&&r)return r(i,!0);if(t)return t(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var s=e[i]={exports:{}};c[i][0].call(s.exports,function(d){var e=c[i][1][d];return f(e?e:d)},s,s.exports,d,c,e,n)}return e[i].exports}for(var t="function"==typeof require&&require,a=0;a