Better Scrollbar, Added Trianglify as default Background
Better Scrollbar, Added Trianglify as default Background
This commit is contained in:
Kukielka
parent
a53f1528e8
commit
6248a4dc78
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
51
index.php
51
index.php
|
|
@ -17,14 +17,15 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<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/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" />
|
||||
<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>
|
||||
|
||||
<body id="homepage">
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue