steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00
Code Activity

Improve background handling

Browse source
This commit is contained in:
Steffo 2022-12-28 18:12:40 +01:00
parent f9c5582a27
commit 4bea32df62
Signed by: steffo
GPG key ID: 6965406171929D01
5 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
examples/Space_Default.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.1 MiB

BIN
examples/anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
examples/fabrice-nerfin-puHQJZd3MDg-unsplash.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 790 KiB

8
examples/index.html
View file

@ -2,6 +2,8 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="preload" href="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg" as="image" />
<link rel="preload" href="anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg" as="image" />
<title>Bluelib</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Bluelib" />
@ -28,7 +30,7 @@
<title>Bluelib</title>
</head>
<body id="body" class="theme-bluelib">
<img id="background" alt="" src="Space_Default.jpg">
<img id="background" alt="" src="fabrice-nerfin-puHQJZd3MDg-unsplash.jpg">
<main>
<article>
<h1>
@ -205,11 +207,11 @@
<dt>Colors</dt>
<dd>
<dl>
<dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root')"> Royal Blue</label></dt>
<dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root', 'fabrice-nerfin-puHQJZd3MDg-unsplash.jpg')"> Royal Blue</label></dt>
<dd>
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
</dd>
<dt><label class="fade"><input type="radio" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root')"> Gestione Amber</label></dt>
<dt><label class="fade"><input type="radio" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root', 'anastasiia-chepinska-lcfH0p6emhw-unsplash-edited.jpg')"> Gestione Amber</label></dt>
<dd>
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
</dd>

7
examples/index.js
View file

@ -35,6 +35,7 @@ const enabledByDefault = [
let lessStyles = undefined
let lessColors = undefined
let lessFonts = undefined
let background = undefined
async function enableChanges() {
@ -70,6 +71,9 @@ async function enableChanges() {
)
console.debug("Found Less fonts:", lessFonts)
background = document.querySelector("#background")
console.debug("Found background:", background)
for(const [k, v] of Object.entries(lessStyles)) {
v.disabled = !enabledByDefault.includes(k)
}
@ -97,7 +101,7 @@ function toggleStyle(name) {
}
function selectColor(name) {
function selectColor(name, bgsrc) {
if(lessColors === undefined) {
console.error("Less stylesheets are not yet available.")
return
@ -114,6 +118,7 @@ function selectColor(name) {
}
style.disabled = false
background.src = bgsrc
}