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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grayscale CSS</title>
<link rel="stylesheet" href="../src/grayscale.css" />
<style>
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;
}
</style>
<link rel="stylesheet" id="grayscale" href="../src/grayscale.css" />
<link rel="stylesheet" href="css/styles.css" />
<style id="dynamic"></style>
</head>
<body>
<main>

11
example/js/example.js
View File

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