JuanCanham/simpler-dash
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Better Scrollbar, Added Trianglify as default Background

Browse Source 
Better Scrollbar, Added Trianglify as default Background
This commit is contained in:
Kukielka 2018-04-13 13:04:09 +02:00
parent a53f1528e8
commit 6248a4dc78
5 changed files with 60 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -7,6 +7,7 @@ This project uses:
- jQuery - jQuery
- Bootstrap CSS - Bootstrap CSS
- Mousetrap.js - Mousetrap.js
- Trianglify
- Font Awesome - Font Awesome
- Unsplash - 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/) - '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 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. - 'credits' => Whether you want to give credits to the artists, or not.
### Custom Background Images ### Custom Background Images

2
config.sample.json
View File

@ -4,7 +4,7 @@
"custom_url" : "", "custom_url" : "",
"custom_url_selector" : "", "custom_url_selector" : "",
"custom_url_headers" : [], "custom_url_headers" : [],
"unsplash_client_id" : "Make yourself an Unsplash Account here: https://unsplash.com/developers", "unsplash_client_id" : "",
"items" : [ "items" : [
{ {
"alt" : "Facebook", "alt" : "Facebook",

17
hp_assets/css/main.css
View File

@ -1,5 +1,5 @@
html {height: 100%; width: 100%;} 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;} .hidden {display: none;}
.menu-item {display: none; z-index: 3;} .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 {z-index: 3; position: absolute; top: 15px; left: 15px;}
#mobile-menu-wrap a {font-size: 20px;} #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 { #links-wrap {
font-size: 80px; font-size: 80px;
@ -49,8 +56,8 @@ body.menu-shown #bg-overlay {opacity: 0.3;}
#links-wrap a {transition: .3s all;} #links-wrap a {transition: .3s all;}
#links-wrap a:hover {color: #d3d3d3;} #links-wrap a:hover {color: #d3d3d3;}
#links-wrap .link {display: inline-block; width: 33%; float: left; text-align: center;} #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 {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;} #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;}

1
hp_assets/js/trianglify.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

51
index.php
View File

@ -17,14 +17,15 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title><?= $config['title']; ?></title> <title><?= $config['title']; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="hp_assets/css/font-awesome.min.css" /> <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/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="hp_assets/css/main.css" /> <link rel="stylesheet" type="text/css" href="hp_assets/css/main.css" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head> </head>
<body id="homepage"> <body id="homepage">
@ -48,7 +49,6 @@
echo '</p></center>'; echo '</p></center>';
?> ?>
</div> </div>
<?php <?php
if ($config['credits'] == true) { if ($config['credits'] == true) {
echo '<div id="pic-info-wrap" class="menu-item hidden bg">'; 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/jquery.min.js"></script>
<script type="text/javascript" src="hp_assets/js/mousetrap.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> <script type="text/javascript" src="hp_assets/js/main.js"></script>
@ -64,5 +65,41 @@
<script type="text/javascript"> <script type="text/javascript">
setMenuVisibility(true); setMenuVisibility(true);
</script> </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> </body>
</html> </html>