steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +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"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <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> <title>Bluelib</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Bluelib" /> <meta property="og:title" content="Bluelib" />
@ -28,7 +30,7 @@
<title>Bluelib</title> <title>Bluelib</title>
</head> </head>
<body id="body" class="theme-bluelib"> <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> <main>
<article> <article>
<h1> <h1>
@ -205,11 +207,11 @@
<dt>Colors</dt> <dt>Colors</dt>
<dd> <dd>
<dl> <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> <dd>
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors. <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
</dd> </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> <dd>
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look. <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
</dd> </dd>

7
examples/index.js
View file

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