/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_custom-ONWPVx */
*, *:before, *:after {
box-sizing: inherit;
}
html body {
box-sizing: border-box;
height: 100%;
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-size: 18px;
}
.background {
min-height: 100%;
min-width: 100%;
position: absolute;
}
.background #background_canvas {
margin: 0px;
padding: 0px;
}
.content {
position: relative;
}
.content #content_navbar {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
padding: 15px 20px 15px 20px;
background-image: linear-gradient(to right, #860c0c, #ce7777);
box-shadow: 1px 1px 1px rgba(97, 0, 0, 0.5);
}
.content #content_navbar a {
text-decoration: none;
color: black;
background-color: #a66088;
padding: 10px;
border-radius: 8px;
-webkit-box-shadow: 1px 1px 1px #14002c;
-moz-box-shadow: 1px 1px 1px #14002c;
box-shadow: 1px 1px 1px #14002c;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.content #content_navbar a:active {
-webkit-box-shadow: 0.5px 0.5px 0.5px #14002c;
-moz-box-shadow: 0.5px 0.5px 0.5px #14002c;
box-shadow: 0.5px 0.5px 0.5px #14002c;
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.content #content_navbar .setting {
margin-left: auto;
}
.content #content_navbar .link {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.content #content_body .content_body_entry {
background-color: #dbdbdb;
margin: 20px;
padding: 10px 20px 10px 20px;
}
.content #content_body .content_body_entry p {
background-color: white;
color: black;
padding: 15px;
}
/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_custom-ONWPVx */
(function() {
var color1 = "white";
var color2 = "grey";
function drawBackground() {
var canvas_tile = document.createElement('canvas');
var ctx_tile = canvas_tile.getContext('2d');
// Define the aspects of the canvas
ctx_tile.canvas.width = document.documentElement.clientWidth;
ctx_tile.canvas.height = document.documentElement.clientHeight;
ctx_tile.lineWidth = 15;
//Draw the picture
var grd = ctx_tile.createLinearGradient(0, 0, document.documentElement.clientHeight, document.documentElement.clientWidth);
grd.addColorStop(0, color1);
grd.addColorStop(1, color2);
ctx_tile.fillStyle = grd;
ctx_tile.fillRect(0, 0, document.documentElement.clientWidth,
document.documentElement.clientHeight);
// save canvas image as data url (png format by default)
var tile_URL = canvas_tile.toDataURL();
var tile = new Image();
tile.onload = function() {
// I'm not sure if this is actually necessary in this case
};
tile.src = tile_URL;
document.body.style.background = "url("+ tile.src + ") no-repeat center center fixed";
}
document.getElementById('background-random').addEventListener(
"click", function() {
color1 = randomColor();
color2 = randomColor();
drawBackground();
});
document.getElementById('background-reset').addEventListener(
"click", function() {
color1 = "white";
color2 = "grey";
drawBackground();
});
window.addEventListener(
"resize", function() {
drawBackground();
});
drawBackground();
}());