change dark styling, add more backgrounds

This commit is contained in:
User 2019-04-19 06:24:22 +02:00
parent e75df5b2df
commit 83fb1230b5
7 changed files with 16 additions and 13 deletions

View File

@ -4,7 +4,7 @@ html {
body {
margin: 0;
background-image: url('../img/bg-winter.jpg');
background-image: url('../img/bg-spring.jpg');
background-position: center;
background-size: cover;
}
@ -16,6 +16,14 @@ details {
background: rgba(255,255,255,0.8);
}
.dark details {
background: rgba(0,0,0,0.8);
}
summary {
cursor: pointer;
}
summary h2 {
display: inline;
font-size: 1.2em;

BIN
web/img/bg-autumn.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
web/img/bg-spring.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

BIN
web/img/bg-summer-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

BIN
web/img/bg-summer.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
web/img/bg-winter-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

View File

@ -11,16 +11,11 @@ document.addEventListener('DOMContentLoaded', (event) => {
setMap()
// For custom (dark) CSS themes, set the <details> background to the inverse of
// the text colour.
// For custom (dark) CSS themes that don't recognize the <details> background, set it to black.
const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
const dumpColour = (col) => `rgba(${col.join(',')})`
const textColour = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
const sheet = document.styleSheets[0]
sheet.insertRule(`
details {
background-color: ${dumpColour(invertedColour)} !important;
}`
)
const luminance = ([r,g,b]) => 0.2126*r + 0.7152*g + 0.0722*b
const textCol = window.getComputedStyle(document.body).getPropertyValue('color')
if (luminance(parseColour(textCol)) > 0.5)
document.body.classList.add('dark')
})