Better Scrollbar, Added Trianglify as default Background

Better Scrollbar, Added Trianglify as default Background

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

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",

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 {
-.bg a {color: #fff;}
+	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;}

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<n.length;a++)f(n[a]);return f}({"./lib/trianglify.js":[function(e,f){function d(e){function f(e,f,d){return(e-f[0])*(d[1]-d[0])/(f[1]-f[0])+d[0]}function d(e){return{x:(e[0][0]+e[1][0]+e[2][0])/3,y:(e[0][1]+e[1][1]+e[2][1])/3}}function s(){if(e.palette instanceof Array)return e.palette[n(b()*e.palette.length)];var f=Object.keys(e.palette);return e.palette[f[n(b()*f.length)]]}var b;if(e=function(e,f){var d={};for(var a in e)d[a]=e[a];for(a in f)if(e.hasOwnProperty(a))d[a]=f[a];else throw new Error(a+" is not a configuration option for Trianglify. Check your spelling?");return d}(c,e),b=t(e.seed),"random"===e.x_colors&&(e.x_colors=s()),"random"===e.y_colors&&(e.y_colors=s()),"match_x"===e.y_colors&&(e.y_colors=e.x_colors),!(0<e.width&&0<e.height))throw new Error("Width and height must be numbers greater than 0");if(2>e.cell_size)throw new Error("Cell size must be greater than 2.");var h;if(e.color_function)h=function(f,d){return o(e.color_function(f,d))};else{var u=o.scale(e.x_colors).mode(e.color_space),g=o.scale(e.y_colors).mode(e.color_space);h=function(f,d){return o.interpolate(u(f),g(d),0.5,e.color_space)}}for(var p=e.width,m=e.height,y=n((p+4*e.cell_size)/e.cell_size),x=n((m+4*e.cell_size)/e.cell_size),_=(y*e.cell_size-p)/2,k=(x*e.cell_size-m)/2,w=e.cell_size*e.variance/2,j=function(e){return f(e,[-_,p+_],[0,1])},v=function(e){return f(e,[-k,m+k],[0,1])},z=e.points||r(p,m,_,k,e.cell_size,w,b),B=new a(z).triangles,S=[],G=function(e){return z[e]},P=0;P<B.length;P+=3){var i=[B[P],B[P+1],B[P+2]].map(G),R=d(i),A=h(j(R.x),v(R.y)).hex();S.push([A,i])}return l(S,e)}var a=e("delaunator"),t=e("seedrandom"),o=e("chroma-js"),i=e("./colorbrewer"),r=e("./points"),l=e("./pattern"),c={width:600,height:400,cell_size:75,variance:0.75,seed:null,x_colors:"random",y_colors:"match_x",palette:i,color_space:"lab",color_function:null,stroke_width:1.51,points:void 0};d.colorbrewer=i,d.defaults=c,f.exports=d},{"./colorbrewer":"/home/fmauneko/code/trianglify/lib/colorbrewer.js","./pattern":"/home/fmauneko/code/trianglify/lib/pattern.js","./points":"/home/fmauneko/code/trianglify/lib/points.js","chroma-js":"/home/fmauneko/code/trianglify/node_modules/chroma-js/chroma.js",delaunator:"/home/fmauneko/code/trianglify/node_modules/delaunator/index.js",seedrandom:"/home/fmauneko/code/trianglify/node_modules/seedrandom/index.js"}],"/home/fmauneko/code/trianglify/lib/colorbrewer.js":[function(e,f){f.exports={YlGn:["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"],YlGnBu:["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"],GnBu:["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],BuGn:["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"],PuBuGn:["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"],PuBu:["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"],BuPu:["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"],RdPu:["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"],PuRd:["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"],OrRd:["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"],YlOrRd:["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"],YlOrBr:["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"],Purples:["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"],Blues:["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"],Greens:["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"],Oranges:["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"],Reds:["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"],Greys:["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"],PuOr:["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6",Line truncated

index.php

@@ -24,6 +24,7 @@
 		<link rel="stylesheet" type="text/css" href="hp_assets/css/font-awesome.min.css" />
 		<link rel="stylesheet" type="text/css" href="hp_assets/css/bootstrap.min.css" />
 		<link rel="stylesheet" type="text/css" href="hp_assets/css/main.css" />
+		
 		<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
 	</head>
 
@@ -48,7 +49,6 @@
 				echo '</p></center>';
 			?>
 		</div>
-
 		<?php
 			if ($config['credits'] == true) {
 				echo '<div id="pic-info-wrap" class="menu-item hidden bg">';
@@ -57,6 +57,7 @@
 			}
 		?>
 
+		
 		<script type="text/javascript" src="hp_assets/js/jquery.min.js"></script>
 		<script type="text/javascript" src="hp_assets/js/mousetrap.min.js"></script>
 		<script type="text/javascript" src="hp_assets/js/main.js"></script>
@@ -64,5 +65,41 @@
 		<script type="text/javascript">
 			setMenuVisibility(true);
 		</script>
+		
+		<script src="hp_assets/js/trianglify.min.js"></script>
+		<script>
+			function addTriangleTo(target) {
+				var dimensions = target.getClientRects()[0];
+				var pattern = Trianglify({
+					<?php
+						if ($config['unsplash_client_id'] != "") {
+							echo 'x_colors: \'Greys\',';
+							echo 'y_colors: \'match_x\',';
+						}
+					?>
+					width: dimensions.width,
+					height: dimensions.height
+				});
+				target.style['background-image'] = 'url(' + pattern.png() + ')';
+				target.style['background-size'] = 'cover';
+				target.style['-webkit-background-size'] = 'cover';
+				target.style['-moz-background-size'] = 'cover';
+				target.style['-o-background-size'] = 'cover';
+			}
+			
+			var resizeTimer;
+			$(window).on('resize', function(e) {
+			  clearTimeout(resizeTimer);
+			  resizeTimer = setTimeout(function() {
+				<?php
+					if ($config['unsplash_client_id'] == "") {
+						echo 'addTriangleTo(homepage)';
+					}
+				?>
+			  }, 400);
+			});
+			
+			addTriangleTo(homepage);
+		</script>
 	</body>
 </html>