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;}

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>