geoff
/
grayscale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve out custom css is written back to example

This commit is contained in:
Geoff Doty 2021-10-16 01:14:51 -04:00
parent 11496a9beb
commit 217e05d603
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
example/css/styles.css Normal file
View File

@ -0,0 +1,14 @@
html {
min-width: 540px
}
.box {
height: 1.5em;
min-width: 1.5em;
line-height: 1.5em;
margin: 1px;
display: inline-block;
font-weight: bold;
letter-spacing: .2em;
color: #FAFAFA;
}

17
example/example.html
View File

@ -5,20 +5,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grayscale CSS</title> <title>Grayscale CSS</title>
<link rel="stylesheet" href="../src/grayscale.css" /> <link rel="stylesheet" id="grayscale" href="../src/grayscale.css" />
<style> <link rel="stylesheet" href="css/styles.css" />
html {min-width: 540px} <style id="dynamic"></style>
.box {
height: 1.5em;
min-width: 1.5em;
line-height: 1.5em;
margin: 1px;
display: inline-block;
font-weight: bold;
letter-spacing: .2em;
color: #FAFAFA;
}
</style>
</head> </head>
<body> <body>
<main> <main>

11
example/js/example.js
View File

@ -68,8 +68,7 @@ function update() {
const rgb = HEXToRGB(form.elements['theme'].value); const rgb = HEXToRGB(form.elements['theme'].value);
const hsl = RGBToHSL(rgb.r, rgb.g, rgb.b); const hsl = RGBToHSL(rgb.r, rgb.g, rgb.b);
const style = document.createElement('style'); const theme = String(`
style.innerHTML = `
:root { :root {
--Hsl: ${hsl.h}; --Hsl: ${hsl.h};
--hSl: ${hsl.s}%; --hSl: ${hsl.s}%;
@ -79,8 +78,12 @@ function update() {
--space: ${form.elements['spacing'].value}rem; --space: ${form.elements['spacing'].value}rem;
--line: ${form.elements['line'].value}; --line: ${form.elements['line'].value};
--radius: ${form.elements['radius'].value}rem; --radius: ${form.elements['radius'].value}rem;
} }`).replace(/\s/g, '');
`;
$('#dynamic').innerHTML = theme;
return theme;
}
$('head').appendChild(style); $('head').appendChild(style);
} }