clean up repo
This commit is contained in:
parent
3eb50dc7e0
commit
a99963e50d
|
|
@ -1,4 +1,4 @@
|
||||||
/* Grayscale CSS v:0.8 | MIT LICENSE | https://github.com/n2geoff/grayscale */
|
/* Grayscale CSS v:0.8.1 | MIT LICENSE | https://github.com/n2geoff/grayscale */
|
||||||
:root {
|
:root {
|
||||||
--Hsl: 207;
|
--Hsl: 207;
|
||||||
--hSl: 50%;
|
--hSl: 50%;
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
/* Grayscale CSS v:0.8 | MIT LICENSE | https://github.com/n2geoff/grayscale */
|
/* Grayscale CSS v:0.8.1 | MIT LICENSE | https://github.com/n2geoff/grayscale */
|
||||||
:root{--Hsl:207;--hSl:50%;--hsL:50%;--theme:hsl(var(--Hsl), var(--hSl), var(--hsL));--font:Arial, Helvetica, san-serif;--line:1.5;--weight:400;--size:20px;--radius:0rem;--space:1rem}:root:not([data-theme=dark]),[data-theme=light]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--gray:hsl(var(--Hsl), 15%, 75%);--hint:hsl(var(--Hsl), 35%, 70%);--bg:hsl(var(--Hsl), 0%, 95%);--fg:hsl(var(--Hsl), 0%, 5%)}[data-theme=dark]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--gray:hsl(var(--Hsl), 15%, 15%);--hint:hsl(var(--Hsl), 35%, 30%);--bg:hsl(var(--Hsl), 50%, 5%);--fg:hsl(var(--Hsl), 20%, 90%)}*,:after,:before,body,html{box-sizing:border-box}body,html{background:var(--bg);color:var(--fg);margin:0;font-family:var(--font);font-size:var(--size);font-weight:var(--weight);line-height:var(--line);padding:0}::placeholder{color:var(--hint)}:disabled::placeholder{color:gray}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}main{margin:0 auto;height:100vh;max-width:1140px}table{background-color:var(--bg);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme)}th{text-align:left;color:var(--dark)}td,th{padding:calc(var(--space)/2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover,input,label{color:var(--fg)}blockquote{margin:var(--space) 0;border-left:calc(var(--space)/2) solid var(--dark);background:hsl(var(--Hsl) var(--hSl) var(--hsL));color:var(--bg)}code{margin:0 calc(var(--space)/4);padding:0 calc(var(--space)/4);background:var(--bg)}article,blockquote,main,pre>code{padding:var(--space)}pre>code{display:block;width:100%}hr{border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--size)*2);color:var(--dark)}h2,hr{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--gray)}section{margin-bottom:var(--space)}article{background-color:var(--light)}input,label{font-size:var(--size)}label{font-weight:600;text-transform:capitalize;margin:0 calc(var(--size)/2)}input{display:block;outline:0;box-sizing:border-box;background-color:var(--bg);width:100%;height:calc(var(--size)*3);border:1px solid var(--theme);border-radius:var(--radius);padding:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}input:disabled{background:var(--gray);color:var(--bg);cursor:not-allowed}input:focus,select:focus,textarea:focus{border:2px solid var(--theme)}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}button{color:var(--theme);background-color:var(--bg)}input[type=reset],input[type=submit]{background-color:var(--theme);color:var(--bg)}button,input[type=reset],input[type=submit],select{border:1px solid var(--theme);cursor:pointer}button,input[type=reset],input[type=submit],select,textarea{display:inline-block;outline:0;font-family:var(--font);font-size:var(--size);height:calc(var(--size)*3);width:100%;border-radius:var(--radius);padding:0 var(--space);margin-bottom:var(--space)}select,textarea{background-color:var(--bg)}select,textarea{padding:clamp(.5rem,var(--space),2rem);color:var(--fg)}select{background:var(--bg) no-repeat 100%;appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>")}textarea{overflow:auto;resize:vertical;border:1px solid var(--theme);height:calc(var(--line)*6rem);cursor:text}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
|
:root{--Hsl:207;--hSl:50%;--hsL:50%;--theme:hsl(var(--Hsl), var(--hSl), var(--hsL));--font:Arial, Helvetica, san-serif;--line:1.5;--weight:400;--size:20px;--radius:0rem;--space:1rem}:root:not([data-theme=dark]),[data-theme=light]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--gray:hsl(var(--Hsl), 15%, 75%);--hint:hsl(var(--Hsl), 35%, 70%);--bg:hsl(var(--Hsl), 0%, 95%);--fg:hsl(var(--Hsl), 0%, 5%)}[data-theme=dark]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--gray:hsl(var(--Hsl), 15%, 15%);--hint:hsl(var(--Hsl), 35%, 30%);--bg:hsl(var(--Hsl), 50%, 5%);--fg:hsl(var(--Hsl), 20%, 90%)}*,:after,:before,body,html{box-sizing:border-box}body,html{background:var(--bg);color:var(--fg);margin:0;font-family:var(--font);font-size:var(--size);font-weight:var(--weight);line-height:var(--line);padding:0}::placeholder{color:var(--hint)}:disabled::placeholder{color:gray}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}main{margin:0 auto;height:100vh;max-width:1140px}table{background-color:var(--bg);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme)}th{text-align:left;color:var(--dark)}td,th{padding:calc(var(--space)/2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover,input,label{color:var(--fg)}blockquote{margin:var(--space) 0;border-left:calc(var(--space)/2) solid var(--dark);background:hsl(var(--Hsl) var(--hSl) var(--hsL));color:var(--bg)}code{margin:0 calc(var(--space)/4);padding:0 calc(var(--space)/4);background:var(--bg)}article,blockquote,main,pre>code{padding:var(--space)}pre>code{display:block;width:100%}hr{border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--size)*2);color:var(--dark)}h2,hr{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--gray)}section{margin-bottom:var(--space)}article{background-color:var(--light)}input,label{font-size:var(--size)}label{font-weight:600;text-transform:capitalize;margin:0 calc(var(--size)/2)}input{display:block;outline:0;box-sizing:border-box;background-color:var(--bg);width:100%;height:calc(var(--size)*3);border:1px solid var(--theme);border-radius:var(--radius);padding:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}input:disabled{background:var(--gray);color:var(--bg);cursor:not-allowed}input:focus,select:focus,textarea:focus{border:2px solid var(--theme)}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}button{color:var(--theme);background-color:var(--bg)}input[type=reset],input[type=submit]{background-color:var(--theme);color:var(--bg)}button,input[type=reset],input[type=submit],select{border:1px solid var(--theme);cursor:pointer}button,input[type=reset],input[type=submit],select,textarea{display:inline-block;outline:0;font-family:var(--font);font-size:var(--size);height:calc(var(--size)*3);width:100%;border-radius:var(--radius);padding:0 var(--space);margin-bottom:var(--space)}select,textarea{background-color:var(--bg)}select,textarea{padding:clamp(.5rem,var(--space),2rem);color:var(--fg)}select{background:var(--bg) no-repeat 100%;appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>")}textarea{overflow:auto;resize:vertical;border:1px solid var(--theme);height:calc(var(--line)*6rem);cursor:text}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,206 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" data-theme="dark">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<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" id="grayscale" href="../src/grayscale.css" />
|
|
||||||
<link rel="stylesheet" href="css/styles.css" />
|
|
||||||
<style id="dynamic"></style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<section>
|
|
||||||
<section class="grid">
|
|
||||||
<div>
|
|
||||||
<div class="box" style="background: var(--fg);"> </div>
|
|
||||||
<div class="box" style="background: var(--dark);"> </div>
|
|
||||||
<div class="box" style="background: var(--theme);"> </div>
|
|
||||||
<div class="box" style="background: var(--light);"> </div>
|
|
||||||
<div class="box" style="background: var(--gray);"> </div>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<div class="box" style="background: var(--bg); color: var(--theme)">
|
|
||||||
GRAYSCALE
|
|
||||||
</div>
|
|
||||||
<div class="box" style="background:var(--theme); padding: 0 .5em 0 .5em;">CSS</div>
|
|
||||||
</div>
|
|
||||||
<div style="text-align: right;">
|
|
||||||
<em>CSS For Minimalists</em>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<article>
|
|
||||||
<section>
|
|
||||||
<h2>Customize CSS</h2>
|
|
||||||
<form id="settings" name="settings" style="background: var(--bg); padding: 1rem;">
|
|
||||||
<div>
|
|
||||||
<label for="theme">Theme Color <small>(default: steelblue)</small></label>
|
|
||||||
<span style="float: right">
|
|
||||||
<input type="checkbox" name="mode" id="mode" checked>
|
|
||||||
<label for="mode">
|
|
||||||
Dark Mode
|
|
||||||
</label>
|
|
||||||
</span>
|
|
||||||
<input type="color" id="theme" name="theme" value="#4086bf">
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<div>
|
|
||||||
<label for="font">Font Family</label>
|
|
||||||
<input type="text" id="font" name="font" value="Arial, Helvetica, san-serif">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<div>
|
|
||||||
<label for="size">Font Size</label>
|
|
||||||
<input type="number" id="size" name="size" value="20" min="8" max="40">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="line">Line Height</label>
|
|
||||||
<input type="range" id="line" name="line" value="1.5" min="0" max="3" step="0.5">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid">
|
|
||||||
<div>
|
|
||||||
<label for="radius">Border Radius</label>
|
|
||||||
<input type="range" name="radius" id="radius" min="0" max="2" step="0.05" value="0" list="tickmarks">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="spacing">Element Spacing</label>
|
|
||||||
<input type="range" id="spacing" name="spacing" min="0" max="2" step="0.05" value="1" list="tickmarks">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<input type="submit" value="Download">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<h2>Element examples</h2>
|
|
||||||
<p>
|
|
||||||
This is supposed to be a demo page so we need more elements!
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Form elements</h3>
|
|
||||||
<form>
|
|
||||||
<div>
|
|
||||||
<label for='email'>Email</label>
|
|
||||||
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='id'>User id (read only)</label>
|
|
||||||
<input readonly name='id' id='id' value='04D6H89Z'>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='disabled'>Random disabled input</label>
|
|
||||||
<input disabled name='disabled' id='disabled' placeholder='Because why not?'>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='selected'>Select Item</label>
|
|
||||||
<select name="selected" id="">
|
|
||||||
<option value="">Choose One</option>
|
|
||||||
<option value="yes">Yes</option>
|
|
||||||
<option value="no">No</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label for='about'>About me</label>
|
|
||||||
<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<input type='checkbox' name='remember' id='remember' checked>
|
|
||||||
<label for='remember'>Remember me</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<button>Cancel</button>
|
|
||||||
<input type='submit'>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<h3>Code</h3>
|
|
||||||
<p>
|
|
||||||
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
|
|
||||||
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
|
|
||||||
</p>
|
|
||||||
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
|
|
||||||
|
|
||||||
<h3>Other</h3>
|
|
||||||
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
|
|
||||||
<img src='http://via.placeholder.com/408x287' alt='Example image'>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>And here's a nicely marked up table!</p>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Quantity</th>
|
|
||||||
<th>Price</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Godzilla</td>
|
|
||||||
<td>2</td>
|
|
||||||
<td>$299.99</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Mozilla</td>
|
|
||||||
<td>10</td>
|
|
||||||
<td>$100,000.00</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Quesadilla</td>
|
|
||||||
<td>1</td>
|
|
||||||
<td>$2.22</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<h3>Typography</h3>
|
|
||||||
<blockquote>
|
|
||||||
This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed
|
|
||||||
egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique.
|
|
||||||
</blockquote>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
|
|
||||||
ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare
|
|
||||||
accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus
|
|
||||||
et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu
|
|
||||||
mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non
|
|
||||||
fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
|
|
||||||
per inceptos himenaeos.
|
|
||||||
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is
|
|
||||||
emphasized!</em> And heck, <a href='/'>here</a>'s a link.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>Unordered list item 1</li>
|
|
||||||
<li>Unordered list item 2</li>
|
|
||||||
<li>Unordered list item 3</li>
|
|
||||||
</ul>
|
|
||||||
<ol>
|
|
||||||
<li>Ordered list item 1</li>
|
|
||||||
<li>Ordered list item 2</li>
|
|
||||||
<li>Ordered list item 3</li>
|
|
||||||
</ol>
|
|
||||||
<h1>Heading 1</h1>
|
|
||||||
<h2>Heading 2</h2>
|
|
||||||
<h3>Heading 3</h3>
|
|
||||||
<h4>Heading 4</h4>
|
|
||||||
<h5>Heading 5</h5>
|
|
||||||
<h6>Heading 6</h6>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="js/theme-builder.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 314 KiB |
|
|
@ -1,148 +0,0 @@
|
||||||
///////////////////////////////////////////////
|
|
||||||
// Grayscale Theme Builder
|
|
||||||
///////////////////////////////////////////////
|
|
||||||
|
|
||||||
// query helper
|
|
||||||
const $ = document.querySelector.bind(document);
|
|
||||||
|
|
||||||
function HEXToRGB(hex) {
|
|
||||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
||||||
return result ? {
|
|
||||||
r: parseInt(result[1], 16),
|
|
||||||
g: parseInt(result[2], 16),
|
|
||||||
b: parseInt(result[3], 16)
|
|
||||||
} : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function RGBToHSL(r,g,b) {
|
|
||||||
// Make r, g, and b fractions of 1
|
|
||||||
r /= 255;
|
|
||||||
g /= 255;
|
|
||||||
b /= 255;
|
|
||||||
|
|
||||||
// Find greatest and smallest channel values
|
|
||||||
let cmin = Math.min(r,g,b),
|
|
||||||
cmax = Math.max(r,g,b),
|
|
||||||
delta = cmax - cmin,
|
|
||||||
h = 0,
|
|
||||||
s = 0,
|
|
||||||
l = 0;
|
|
||||||
|
|
||||||
// Calculate hue
|
|
||||||
// No difference
|
|
||||||
if (delta == 0)
|
|
||||||
h = 0;
|
|
||||||
// Red is max
|
|
||||||
else if (cmax == r)
|
|
||||||
h = ((g - b) / delta) % 6;
|
|
||||||
// Green is max
|
|
||||||
else if (cmax == g)
|
|
||||||
h = (b - r) / delta + 2;
|
|
||||||
// Blue is max
|
|
||||||
else
|
|
||||||
h = (r - g) / delta + 4;
|
|
||||||
|
|
||||||
h = Math.round(h * 60);
|
|
||||||
|
|
||||||
// Make negative hues positive behind 360°
|
|
||||||
if (h < 0)
|
|
||||||
h += 360;
|
|
||||||
|
|
||||||
// Calculate lightness
|
|
||||||
l = (cmax + cmin) / 2;
|
|
||||||
|
|
||||||
// Calculate saturation
|
|
||||||
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
|
||||||
|
|
||||||
// Multiply l and s by 100
|
|
||||||
s = +(s * 100).toFixed(0);
|
|
||||||
l = +(l * 100).toFixed(0);
|
|
||||||
|
|
||||||
return {
|
|
||||||
h,s,l
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// refresh current page theme
|
|
||||||
function refresh() {
|
|
||||||
const form = $('#settings');
|
|
||||||
|
|
||||||
// convert hex-to-rbg-to-hsl
|
|
||||||
const rgb = HEXToRGB(form.elements['theme'].value);
|
|
||||||
const hsl = RGBToHSL(rgb.r, rgb.g, rgb.b);
|
|
||||||
|
|
||||||
// build theme string
|
|
||||||
const theme = String(`
|
|
||||||
:root {
|
|
||||||
--Hsl: ${hsl.h};
|
|
||||||
--hSl: ${hsl.s}%;
|
|
||||||
--hsL: ${hsl.l}%;
|
|
||||||
--font: ${form.elements['font'].value};
|
|
||||||
--size: ${form.elements['size'].value}px;
|
|
||||||
--space: ${form.elements['spacing'].value}rem;
|
|
||||||
--line: ${form.elements['line'].value};
|
|
||||||
--radius: ${form.elements['radius'].value}rem;
|
|
||||||
}`).replace(/\s/g, '');
|
|
||||||
|
|
||||||
// override :root to update page theme
|
|
||||||
$('#dynamic').innerHTML = theme;
|
|
||||||
|
|
||||||
return theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
// download custom grayscaled theme
|
|
||||||
function download(css) {
|
|
||||||
const filename = `grayscaled.css`;
|
|
||||||
|
|
||||||
let el = document.createElement('a');
|
|
||||||
el.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(css));
|
|
||||||
el.setAttribute('download', filename);
|
|
||||||
el.style.display = 'none';
|
|
||||||
el.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
// page download button
|
|
||||||
$('input[type="submit"]').addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
// get current theme
|
|
||||||
const theme = refresh();
|
|
||||||
|
|
||||||
// get style rules as text
|
|
||||||
function getText(x) {
|
|
||||||
// exclude :root theme vars
|
|
||||||
if(x.selectorText !== ':root') {
|
|
||||||
return x.cssText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// get grayscale stylesheet as dom object
|
|
||||||
var css = $('#grayscale');
|
|
||||||
|
|
||||||
// convert stylesheet dom object to string
|
|
||||||
var style = Array.prototype.map.call(css.sheet.cssRules, getText).join('\n');
|
|
||||||
|
|
||||||
// build custom grayscaled theme & minify
|
|
||||||
const grayscaled = `${theme}${style}`.replace(/\s/g, '');
|
|
||||||
|
|
||||||
download(grayscaled);
|
|
||||||
});
|
|
||||||
|
|
||||||
// toggle light / dark mode
|
|
||||||
$('#mode').addEventListener('click', () => {
|
|
||||||
const attr = $('html').getAttribute('data-theme');
|
|
||||||
|
|
||||||
if(attr && attr === 'dark') {
|
|
||||||
$('html').setAttribute('data-theme', 'light');
|
|
||||||
} else {
|
|
||||||
$('html').setAttribute('data-theme', 'dark');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// refresh page theme on changes
|
|
||||||
$('#radius').addEventListener('click', refresh);
|
|
||||||
$('#font').addEventListener('click', refresh);
|
|
||||||
$('#size').addEventListener('click', refresh);
|
|
||||||
$('#spacing').addEventListener('click', refresh);
|
|
||||||
$('#line').addEventListener('click', refresh);
|
|
||||||
$('#theme').addEventListener('change', refresh);
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "grayscale-css",
|
"name": "grayscale-css",
|
||||||
"version": "0.8.0",
|
"version": "0.8.1",
|
||||||
"description": "css for minimalists",
|
"description": "css for minimalists",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
|
|
||||||
|
|
@ -1,217 +0,0 @@
|
||||||
@theme-h: 207;
|
|
||||||
@theme-s: 50%;
|
|
||||||
@theme-l: 50%;
|
|
||||||
|
|
||||||
@theme: color(hsl(@theme-h, @theme-s, @theme-l));
|
|
||||||
@font-family: sans-serif, "Roboto";
|
|
||||||
@line-height: 1.5;
|
|
||||||
@font-weight: 400;
|
|
||||||
@font-size: 20px;
|
|
||||||
@border-radius: 0rem;
|
|
||||||
@border-width: 1px;
|
|
||||||
@spacing: 1rem;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--theme: color(hsl(@theme-h, @theme-s, @theme-l));
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="light"],
|
|
||||||
:root:not([data-theme="dark"]) {
|
|
||||||
--bg: color(hsl(@theme-h, 0%, 95%));
|
|
||||||
--fg: color(hsl(@theme-h, 0%, 5%));
|
|
||||||
--light: hsl(@theme-h, @theme-s, calc(@theme-l + 35%));
|
|
||||||
--dark: hsl(@theme-h, @theme-s, calc(@theme-l - 35%));
|
|
||||||
--gray: color(hsl(@theme-h, 15%, 75%));
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="dark"] {
|
|
||||||
--bg: color(hsl(@theme-h, 50%, 5%));
|
|
||||||
--fg: color(hsl(@theme-h, 20%, 90%));
|
|
||||||
--light: hsl(@theme-h, @theme-s, calc(@theme-l - 35%));
|
|
||||||
--dark: hsl(@theme-h, @theme-s, calc(@theme-l + 35%));
|
|
||||||
--gray: color(hsl(@theme-h, 15%, 15%));
|
|
||||||
}
|
|
||||||
|
|
||||||
*, *:before, *:after { box-sizing: border-box; }
|
|
||||||
|
|
||||||
html,body {
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--fg);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: @font-family;
|
|
||||||
font-size: @font-size;
|
|
||||||
font-weight: @font-weight;
|
|
||||||
line-height: @line-height;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,embed,iframe,object,audio,video {
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5);
|
|
||||||
padding: @spacing;
|
|
||||||
height:100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: --bg;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody {
|
|
||||||
border-top: 2px solid @theme;
|
|
||||||
border-top: 2px solid @theme;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {text-align: left;color: var(--dark)}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
padding: calc(@spacing / 2);
|
|
||||||
border-bottom: 1px solid color(@theme)
|
|
||||||
}
|
|
||||||
|
|
||||||
a {color: @theme}
|
|
||||||
a:hover {color: var(--fg)}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: @spacing 0;
|
|
||||||
border-left: calc(@spacing / 2) solid var(--dark);
|
|
||||||
background: color(hsl(@theme-h, @theme-s, @theme-l));
|
|
||||||
color: --bg;
|
|
||||||
padding: @spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, code, kbd {
|
|
||||||
font-family: monospace;
|
|
||||||
display: inline-block;
|
|
||||||
white-space: pre;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
margin: 0 calc(@spacing / 4);
|
|
||||||
padding: 0 calc(@spacing / 4);
|
|
||||||
background: --bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
color: @theme;
|
|
||||||
border: 1px solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {text-transform: capitalize;}
|
|
||||||
h1 {font-size: calc(@font-size * 2); color: var(--dark)}
|
|
||||||
h2 {color: color(@theme)}
|
|
||||||
h3 {border-bottom: 1px solid color(@theme);}
|
|
||||||
|
|
||||||
small {color: var(--gray)}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin-bottom: @spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
padding: @spacing;
|
|
||||||
background-color: var(--light);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-size: @font-size;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: capitalize;
|
|
||||||
color: var(--fg);
|
|
||||||
margin: 0 calc(@spacing / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
outline: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: @font-size;
|
|
||||||
background-color: --bg;
|
|
||||||
color: var(--fg);
|
|
||||||
width: 100%;
|
|
||||||
height: calc(@font-size * 3);
|
|
||||||
border: 1px solid @theme;
|
|
||||||
border-radius: @border-radius;
|
|
||||||
padding: @spacing;
|
|
||||||
margin-bottom: @spacing;
|
|
||||||
margin-right: @spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:disabled {
|
|
||||||
background: var(--gray);
|
|
||||||
color: var(--bg);
|
|
||||||
cursor:not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
width: @spacing;
|
|
||||||
height: @spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
font-size: @font-size;
|
|
||||||
height: calc(@font-size * 3);
|
|
||||||
padding: @spacing calc(@spacing / 2);
|
|
||||||
margin: @spacing 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
background-color: color(@theme);
|
|
||||||
color: var(--bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
button, select, textarea {
|
|
||||||
display: inline-block;
|
|
||||||
outline: none;
|
|
||||||
font-family: @font-family;
|
|
||||||
font-size: @font-size;
|
|
||||||
height: calc(@font-size * 3);
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid color(@theme);
|
|
||||||
color: color(@theme);
|
|
||||||
background-color: var(--bg);
|
|
||||||
border-radius: @border-radius;
|
|
||||||
padding: @spacing;
|
|
||||||
margin-bottom: @spacing;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background: var(--bg) no-repeat 100%;
|
|
||||||
color: var(--fg);
|
|
||||||
appearance: none;
|
|
||||||
background-size: 1ex;
|
|
||||||
background-origin: content-box;
|
|
||||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
resize: vertical;
|
|
||||||
border: 1px solid color(@theme);
|
|
||||||
height: calc(@line-height * 6rem);
|
|
||||||
cursor: text;
|
|
||||||
color: var(--fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
gap: @spacing;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
/* Grayscale CSS v:0.8 | MIT LICENSE | https://github.com/n2geoff/grayscale */
|
/* Grayscale CSS v:0.8.1 | MIT LICENSE | https://github.com/n2geoff/grayscale */
|
||||||
:root {
|
:root {
|
||||||
--Hsl: 207;
|
--Hsl: 207;
|
||||||
--hSl: 50%;
|
--hSl: 50%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue