mirror of https://github.com/n2geoff/stylelite.git
new stylelite, simpiler, smaller, powerful
This commit is contained in:
parent
586ee19473
commit
99655ce656
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,378 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Example</title>
|
||||
<link rel="stylesheet" href="../src/main.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
|
||||
<script src="../src/components/theme-toggle.js"></script>
|
||||
<style>
|
||||
.fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.no-margin {margin:0}
|
||||
</style>
|
||||
</head>
|
||||
<body >
|
||||
<article class="container">
|
||||
<header>
|
||||
<section class="no-margin">
|
||||
<nav class="underline">
|
||||
<strong class="text-primary brand">
|
||||
STYLELITE
|
||||
<span class="text-secondary">CSS</span>
|
||||
</strong>
|
||||
<ul>
|
||||
<li><a href="#type">Typography</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#table">Tables</a></li>
|
||||
<li><a href="#components">Components</a></li>
|
||||
<li><theme-toggle /></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>
|
||||
<div class="grid space">
|
||||
<div class="primary"> </div>
|
||||
<div class="default"> </div>
|
||||
<div class="border"> </div>
|
||||
</div>
|
||||
</p>
|
||||
<hr>
|
||||
</section>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<a name="overview"></a>
|
||||
<h2 class="underline">Overview</h2>
|
||||
<div>
|
||||
<p>
|
||||
<kbd>DIV</kbd> is not the only tag available to your designs.
|
||||
<abbr title="progressive classless css">Stylelite</abbr> mimics traditional <kbd>.container</kbd> class by just using a <kbd>MAIN</kbd> tag,
|
||||
which by default centers your content to an <strong>1140px</strong> width.
|
||||
</p>
|
||||
<p>
|
||||
Need to divide major sections of your code, eh...use <kbd>SECTION</kbd> tag.
|
||||
Need little extra content flair, wrap in an <kbd>ARTICLE</kbd> tag.
|
||||
</p>
|
||||
<p>
|
||||
Use <i>AS-IS</i> or <a href="#customize">Customize</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a name="type"></a>
|
||||
<h2 class="underline">Typography</h2>
|
||||
<div>
|
||||
<blockquote>
|
||||
The alternative to good design is always bad design. there is no such thing as no design.
|
||||
Simplicity carried to an extreme, becomes elegance.
|
||||
<cite>-- Adam Judge</cite>
|
||||
</blockquote>
|
||||
<p>
|
||||
<kbd>P</kbd>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu,
|
||||
eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante,
|
||||
id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in
|
||||
odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
<kbd>STRONG</kbd>
|
||||
<strong id="generated">Generated 1 paragraph, 52 words, 354 bytes of
|
||||
<a href="https://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
|
||||
</strong>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h1><kbd>H1</kbd> Heading...</h1>
|
||||
<h2><kbd>H2</kbd> Heading...</h2>
|
||||
<h3><kbd>H3</kbd> Heading...</h3>
|
||||
<h4><kbd>H4</kbd> Heading...</h4>
|
||||
<h5><kbd>H5</kbd> Heading...</h5>
|
||||
<h6><kbd>H6</kbd> Heading...</h6>
|
||||
</div>
|
||||
<div>
|
||||
<p><kbd>P</kbd> can simply be a paragraph</p>
|
||||
<p><kbd>A</kbd> can be a <a href="./">link</a></p>
|
||||
<p><kbd>STRONG</kbd> can be <strong>bold</strong></p>
|
||||
<p><kbd>U</kbd> can be <u>underlined</u></p>
|
||||
<p><kbd>EM</kbd> can be <em>emphasized</em></p>
|
||||
<p><kbd>KBD</kbd> acts like a <kbd>tag</kbd></p>
|
||||
<p><kbd>SMALL</kbd> can be <small>small</small></p>
|
||||
<p><kbd>CODE</kbd> can be <code>code</code></p>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<kbd>IMG</kbd>
|
||||
</div>
|
||||
<img src='https://placehold.co/340x280' alt='Example image'>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<kbd>HR</kbd>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section>
|
||||
<a name="buttons"></a>
|
||||
<h2 class="underline">Buttons</h2>
|
||||
<p>
|
||||
<kbd>button</kbd> can be customize by applying a color class.
|
||||
</p>
|
||||
<p class="grid">
|
||||
<a href="#" class="button">Link</a>
|
||||
<button>Default</button>
|
||||
<button class="primary">.primary</button>
|
||||
<button class="secondary">.secondary</button>
|
||||
<button class="success">.success</button>
|
||||
<button class="warning">.warning</button>
|
||||
<button class="danger">.danger</button>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<a name="nav"></a>
|
||||
<h2 class="underline">Navigation</h2>
|
||||
<div>
|
||||
<p>
|
||||
<kbd>nav</kbd> provides a convenient way to build navigation systems
|
||||
using <kbd>ul</kbd> and <kbd>li</kbd>. Internally elements <kbd>nav</kbd>
|
||||
divide, so you can put an empty <kbd>div</kbd> before the <kbd>ul</kbd>
|
||||
to make the nav on the right side or <kbd>div</kbd> on both sides
|
||||
to center
|
||||
</p>
|
||||
<nav class="primary">
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="default">
|
||||
<div></div>
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="dark">
|
||||
<div></div>
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
<div></div>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a name="forms"></a>
|
||||
<h2 class="underline">Forms</h2>
|
||||
<form class="">
|
||||
<details>
|
||||
<summary>Details Summary</summary>
|
||||
<div>
|
||||
Default <kbd>details</kbd> and <kbd>summary</kbd> behavior.
|
||||
wrap content in tag, like <kbd>div</kbd>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div>
|
||||
<label for='id'>User id (read only)</label>
|
||||
<input name='id' id='id' value='R2D2' readonly>
|
||||
</div>
|
||||
<div>
|
||||
<label for='email'>Email</label>
|
||||
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
||||
</div>
|
||||
<div>
|
||||
<label for='password'>Password</label>
|
||||
<input type='password' name='password' id='password'>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for='disabled'>Random disabled input</label>
|
||||
<input disabled name='disabled' id='disabled'
|
||||
placeholder='Because why not?'>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for='selected'>Preferred theme</label>
|
||||
<select name="selected" id="selected">
|
||||
<option value="">Choose One</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</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>
|
||||
<input class="right" type="submit"></input>
|
||||
</p>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<a name="table"></a>
|
||||
<h2 class="underline">Tables</h2>
|
||||
<p><kbd>TABLE</kbd> is clean by default</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr >
|
||||
<th>One</th>
|
||||
<th>Two</th>
|
||||
<th>There</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section>
|
||||
<a name="components"></a>
|
||||
<h2 class="underline">Components</h2>
|
||||
|
||||
<p>
|
||||
These are native UI components that typically do not have any
|
||||
style
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<section class="border">
|
||||
<header class="primary">
|
||||
<strong>Dialogs</strong>
|
||||
</header>
|
||||
<main>
|
||||
A native modal UI element exists as <code>dialog</code>
|
||||
and is supported with a little javascript.
|
||||
<p>
|
||||
SEE: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_NEW">
|
||||
MDN Documentation
|
||||
</a>
|
||||
</p>
|
||||
</main>
|
||||
<footer class="default">
|
||||
<button class="fill" id="dialog">Open Modal</button>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="grid border">
|
||||
<div class="center">
|
||||
More...
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid border">
|
||||
<div class="center">
|
||||
More...
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<dialog>
|
||||
<header class="primary">Default Dialog Modal</header>
|
||||
<footer>
|
||||
<form method="dialog">
|
||||
<button>Close</button>
|
||||
</form>
|
||||
</footer>
|
||||
</dialog>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="underline">Dark Mode</h2>
|
||||
<p>
|
||||
Add <code>data-theme="dark"</code> to your <kbd>html</kbd> tag
|
||||
</p>
|
||||
</section>
|
||||
<br>
|
||||
<section>
|
||||
<h2 class="underline">Custom Theme</h2>
|
||||
<p>
|
||||
Create a custom theme by overriding variables in <kbd>:root</kbd> stylesheet
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th><code>--primary</code></th>
|
||||
<td>Designing a site around primary theme color, set here</td>
|
||||
<td><code>#5499C7</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--radius</code></th>
|
||||
<td>Prefer rounded-corners, try <code>.4rem</code></td>
|
||||
<td><code>.3rem</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<br>
|
||||
|
||||
<section>
|
||||
<a name="utilities"></a>
|
||||
<h2 class="underline">Utilities</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th><code>.grid</code></th>
|
||||
<td>
|
||||
a <code>display:grid</code> layout helper, that acts a lot like
|
||||
<code>.row</code> but without the column control
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.group</code></th>
|
||||
<td>
|
||||
really just <code>display:flex</code> however used on
|
||||
<kbd>input</kbd> groups provides form element designs
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
</main>
|
||||
</article>
|
||||
<footer class="primary"> </footer>
|
||||
<script>
|
||||
const $ = document.querySelector.bind(document);
|
||||
|
||||
$("#dialog").addEventListener("click", () => (
|
||||
$("dialog").showModal()
|
||||
));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,431 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<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>Stylelite</title>
|
||||
<link rel="stylesheet" href="../src/main.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons-css@1.2.0/css/feather.min.css">
|
||||
<script src="../src/components/theme-toggle.js"></script>
|
||||
<style>
|
||||
.fill {height: 100%; width: 100%}
|
||||
.grid-center {align-self: center; justify-self: center;}
|
||||
.border {border: 1px solid var(--theme)}
|
||||
.no-space {margin: 0; padding:0;}
|
||||
header, footer {line-height: 3rem; height: 3rem;}
|
||||
</style>
|
||||
</head>
|
||||
<body class="">
|
||||
<main>
|
||||
<section>
|
||||
<nav>
|
||||
<h2 class="no-space" style="color: var(--mg);">
|
||||
STYLELITE
|
||||
<span style="color: var(--fg);">CSS</span>
|
||||
</h2>
|
||||
<ul>
|
||||
<li><a href="#type">Typography</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#table">Tables</a></li>
|
||||
<li><a href="#components">Components</a></li>
|
||||
<li><a href="#utilities">Utilities</a></li>
|
||||
<li><a href="#customize">Customize</a></li>
|
||||
<li><theme-toggle /></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<p>
|
||||
<div class="grid space">
|
||||
<div style="background: var(--theme);"> </div>
|
||||
<div style="background: var(--mg);"> </div>
|
||||
<div class="border"> </div>
|
||||
</div>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<a name="overview"></a>
|
||||
<h2>Overview</h2>
|
||||
<div>
|
||||
<p>
|
||||
<code>DIV</code> is not the only tag available to your designs.
|
||||
Mimic traditional <code>.container</code> class by just using a <code>MAIN</code> tag,
|
||||
which by default centers your content to an 1140 width.
|
||||
</p>
|
||||
<p>
|
||||
Need to divide major sections of your code, eh...use <code>SECTION</code> tag.
|
||||
Need little extra content flair, wrap in an <code>ARTICLE</code> tag.
|
||||
</p>
|
||||
<p>
|
||||
Use <i>AS-IS</i> or <a href="#customize">Customize</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a name="nav"></a>
|
||||
<h2>Navigation</h2>
|
||||
<div>
|
||||
<p>
|
||||
<code>nav</code> provides a convenient way to build navigation systems
|
||||
using <code>ul</code> and <code>li</code>. Internally elements <code>nav</code>
|
||||
divide, so you can put an empty <code>div</code> before the <code>ul</code>
|
||||
to make the nav on the right side or <code>div</code> on both sides
|
||||
to center
|
||||
|
||||
</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<div></div>
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<div></div>
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
<div></div>
|
||||
</nav>
|
||||
<nav class="navbar">
|
||||
<ul>
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
<li>Four</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a name="type"></a>
|
||||
<h2>Typography</h2>
|
||||
<div>
|
||||
<blockquote>
|
||||
The alternative to good design is always bad design. there is no such thing as no design.
|
||||
Simplicity carried to an extreme, becomes elegance.
|
||||
<cite>-- Adam Judge</cite>
|
||||
</blockquote>
|
||||
<p>
|
||||
<code>P</code>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu,
|
||||
eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante,
|
||||
id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in
|
||||
odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
|
||||
facilisi.
|
||||
</p>
|
||||
<p>
|
||||
<code>STRONG</code>
|
||||
<strong id="generated">Generated 1 paragraph, 52 words, 354 bytes of
|
||||
<a href="https://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
|
||||
</strong>
|
||||
</p>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<h1><code>H1</code> Heading...</h1>
|
||||
<h2><code>H2</code> Heading...</h2>
|
||||
<h3><code>H3</code> Heading...</h3>
|
||||
<h4><code>H4</code> Heading...</h4>
|
||||
<h5><code>H5</code> Heading...</h5>
|
||||
<h6><code>H6</code> Heading...</h6>
|
||||
</div>
|
||||
<div>
|
||||
<p><code>P</code> can simply be a paragraph</p>
|
||||
<p><code>A</code> can be a <a href="./">link</a></p>
|
||||
<p><code>STRONG</code> can be <strong>bold</strong></p>
|
||||
<p><code>U</code> can be <u>underlined</u></p>
|
||||
<p><code>EM</code> can be <em>emphasized</em></p>
|
||||
<p><code>SMALL</code> can be <small>small</small></p>
|
||||
<p><code>CODE</code> can be <code>code</code></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<code>HR</code>
|
||||
<hr>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<code>IMG</code>
|
||||
</div>
|
||||
<img src='https://placehold.co/340x280' alt='Example image'>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a name="lists"></a>
|
||||
<h2>Lists</h2>
|
||||
<article class="grid">
|
||||
<div>
|
||||
<code>UL</code>
|
||||
<ul>
|
||||
<li><code>LI</code>List Item</li>
|
||||
<li><code>LI</code>List Item</li>
|
||||
<li><code>LI</code>List Item</li>
|
||||
<li><code>LI</code>List Item</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<code>OL</code>
|
||||
<ol>
|
||||
<li><code>LI</code>List Item</li>
|
||||
<li><code>LI</code>List Item</li>
|
||||
<li><code>LI</code>List Item</li>
|
||||
<li><code>LI</code>List Item</li>
|
||||
</ol>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section>
|
||||
<a name="forms"></a>
|
||||
<h2>Forms</h2>
|
||||
<form class="">
|
||||
<details>
|
||||
<summary>Details Summary</summary>
|
||||
<div>
|
||||
Default <code>details</code> and <code>summary</code> behavior.
|
||||
wrap content in tag, like <code>div</code>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div>
|
||||
<label for='id'>User id (read only)</label>
|
||||
<input name='id' id='id' value='R2D2' readonly>
|
||||
</div>
|
||||
<div>
|
||||
<label for='email'>Email</label>
|
||||
<div class="group">
|
||||
<input type='email' name='email' id='email' placeholder='email@example.com' autocomplete="off">
|
||||
<label class="addon">
|
||||
<i class="ft-mail"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for='password'>Password</label>
|
||||
<input type='password' name='password' id='password'>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for='disabled'>Random disabled input</label>
|
||||
<input disabled name='disabled' id='disabled'
|
||||
placeholder='Because why not?'>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for='selected'>Preferred theme</label>
|
||||
<select name="selected" id="selected">
|
||||
<option value="">Choose One</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="dark">Dark</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>
|
||||
<input class="right" type="submit"></input>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<a name="buttons"></a>
|
||||
<h2>Buttons</h2>
|
||||
<div class="grid">
|
||||
<button>Default</button>
|
||||
<button disabled>Disabled</button>
|
||||
<button class="outline">Outline</button>
|
||||
<button class="link">Link</button>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<a name="table"></a>
|
||||
<h2>Tables</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>One</th>
|
||||
<th>Two</th>
|
||||
<th>There</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
<td>Data</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a name="components"></a>
|
||||
<h2>Components</h2>
|
||||
|
||||
<p>
|
||||
These are native UI components that typically do not have any
|
||||
style
|
||||
</p>
|
||||
|
||||
<div class="grid">
|
||||
<section class="border">
|
||||
<header style="background: var(--theme); padding: 0 1rem; color: #FFF">
|
||||
<strong>Dialogs</strong>
|
||||
</header>
|
||||
<main>
|
||||
A native modal UI element exists as <code>dialog</code>
|
||||
and is supported with a little javascript.
|
||||
<p>
|
||||
SEE: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_NEW">
|
||||
MDN Documentation
|
||||
</a>
|
||||
</p>
|
||||
</main>
|
||||
<footer class="grid">
|
||||
<button class="fill" id="dialog">Open Modal</button>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="grid border">
|
||||
<div class="grid-center">
|
||||
More...
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid border">
|
||||
<div class="grid-center">
|
||||
More...
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<dialog>
|
||||
<p>Default Dialog Modal</p>
|
||||
<form method="dialog">
|
||||
<button>Close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a name="utilities"></a>
|
||||
<h2>Misc Utility Classes</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th><code>.grid</code></th>
|
||||
<td>
|
||||
a <code>display:grid</code> layout helper, that acts a lot like
|
||||
<code>.row</code> but without the column control
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.group</code></th>
|
||||
<td>
|
||||
really just <code>display:flex</code> however used on
|
||||
<code>input</code> groups provides form element designs
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<a name="customize"></a>
|
||||
<hr>
|
||||
<h1>Customize</h1>
|
||||
<hr>
|
||||
<p>
|
||||
<code>/extras</code> provides some useful styles that complement
|
||||
<strong>Stylelite</strong> and have been removed to keep it focused
|
||||
closer to a classless css solution -- and smaller.
|
||||
</p>
|
||||
<blockquote>
|
||||
<strong>NOTE:</strong> Some extras exist in <strong>Stylelite</strong>,
|
||||
but are also useful in isolation
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>CSS Variables</h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th><code>--theme</code> (color)</th>
|
||||
<td>Designing a site around a theme color, set here</td>
|
||||
<td><code>steelblue</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--radius</code></th>
|
||||
<td>Prefer rounded-corners, try <code>.4rem</code></td>
|
||||
<td><code>0rem</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Dark Mode</h4>
|
||||
Add <code>data-theme="dark"</code> to your <code>html</code> tag
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Colors</h4>
|
||||
<p>
|
||||
Customize with your own styles or some examples available extras like
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
Bootstrap-inspired color classes found
|
||||
in <code>extras/colors.css</code>
|
||||
</blockquote>
|
||||
|
||||
<div class="grid">
|
||||
<button class="info">Info</button>
|
||||
<button class="warning">Warning</button>
|
||||
<button class="danger">Danger</button>
|
||||
<button class="success">Success</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
const $ = document.querySelector.bind(document);
|
||||
|
||||
$("#dialog").addEventListener("click", () => (
|
||||
$("dialog").showModal()
|
||||
));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "stylelite",
|
||||
"version": "0.8.2",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "stylelite",
|
||||
"version": "0.8.2",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"csso-cli": "^4.0.2"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "stylelite",
|
||||
"version": "0.9.10",
|
||||
"version": "1.0.0",
|
||||
"description": "a class-lite stylesheet on the light-side",
|
||||
"scripts": {
|
||||
"build": "npx csso-cli .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map"
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@
|
|||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: grid;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
/* Old Stylelite Shim */
|
||||
|
||||
:root {
|
||||
--theme: #d69711;
|
||||
|
||||
/* real --theme (for now) */
|
||||
--primary: #d69711;
|
||||
--default: #d69711;
|
||||
}
|
||||
|
||||
main {margin: 0 auto;}
|
||||
button {color: var(--light);background: var(--primary);}
|
||||
label.addon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
color: var(--light);
|
||||
background: var(--primary);
|
||||
margin: 0 0 .5rem -2px;
|
||||
min-width: fit-content;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
h1 {color: var(--primary)}
|
||||
|
|
@ -1,156 +1,95 @@
|
|||
/*! Stylelite v:0.9.10 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||
/*! Stylelite v:1.0.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||
:root {
|
||||
--theme: steelblue;
|
||||
--size: 1rem;
|
||||
--radius: 0rem;
|
||||
--radius: .3rem;
|
||||
|
||||
--fg: #17202A;
|
||||
--bg: #FDFEFE;
|
||||
--mg: #99A3A4;
|
||||
--foreground: #111;
|
||||
--background: #FFF;
|
||||
|
||||
--white: #FFF;
|
||||
--black: #000;
|
||||
--light: #F0F0F0;
|
||||
--dark: #404040;
|
||||
|
||||
--light: #EEE;
|
||||
--dark: #222;
|
||||
--default: #F0F0F0;
|
||||
--primary: #5499C7; /* 0000EE */
|
||||
--secondary: #404040;
|
||||
|
||||
--success: #198754;
|
||||
--warning: #fbc02d;
|
||||
--danger: #C62828;
|
||||
}
|
||||
|
||||
[data-theme=dark] {
|
||||
--theme: #5499C7;
|
||||
--foreground: #FFF;
|
||||
--background: #222;
|
||||
|
||||
--mg: #6B7280;
|
||||
--bg: #1A1A1A;
|
||||
--fg: #E0E0E0;
|
||||
|
||||
--white: #FFF;
|
||||
--black: #000;
|
||||
|
||||
--dark: #D4D4D4;
|
||||
--light: #272727;
|
||||
}
|
||||
|
||||
* {margin:0}
|
||||
|
||||
*,*::before,*::after {
|
||||
box-sizing: border-box;
|
||||
--default: #333;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
accent-color: var(--theme);
|
||||
font-family: system-ui, sans-serif;
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
letter-spacing: 0.0125em;
|
||||
height: 100%;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
span,div, input, button, a,textarea, select {margin-bottom: .25rem;margin-top: .25rem;}
|
||||
|
||||
p {margin: 1rem 0}
|
||||
|
||||
img,embed,iframe,object,audio,video {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ol, ul {margin-left: 1rem}
|
||||
|
||||
li {margin-left: 1rem}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
font-weight: 700;
|
||||
margin: .25rem;
|
||||
}
|
||||
|
||||
label.addon {
|
||||
max-height: 2.5rem;
|
||||
background: var(--theme);
|
||||
padding: .5rem 1rem;
|
||||
margin-top: .25rem;
|
||||
ol, ul, li {margin-left: 1rem}
|
||||
|
||||
section {margin: 1rem 0;}
|
||||
|
||||
cite,strong {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
padding: .5rem 0rem;
|
||||
}
|
||||
|
||||
pre,code {
|
||||
background: var(--light);
|
||||
color: var(--dark);
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 auto;
|
||||
padding: var(--size);
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
table {
|
||||
background: var(--bg);
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table>thead>tr>th {
|
||||
border-bottom: 2px solid var(--theme);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,td {
|
||||
padding: .5rem;
|
||||
border-bottom: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
table.striped tbody>:nth-child(2n-1) {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
table.condensed td, table.condensed th {padding:0}
|
||||
|
||||
fieldset {
|
||||
background: var(--bg);
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: larger;
|
||||
font-weight: 600;
|
||||
color: var(--theme);
|
||||
background: var(--bg);
|
||||
display: block;
|
||||
width: fit-content;
|
||||
pre,code,kbd {
|
||||
font-family: monospace;
|
||||
font-size: smaller;
|
||||
padding: .25rem .5rem;
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
border: 1px solid var(--theme);
|
||||
background: var(--default);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: var(--size) 0;
|
||||
color: var(--dark);
|
||||
background: var(--light);
|
||||
padding: var(--size);
|
||||
border-left: 8px solid var(--theme);
|
||||
abbr {
|
||||
border-bottom: 1px dotted;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-style: normal;
|
||||
color: var(--light);
|
||||
background: var(--primary);
|
||||
border-radius: var(--radius);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--theme);
|
||||
border: 1px solid;
|
||||
}
|
||||
i {vertical-align: middle;}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: var(--theme);
|
||||
margin: var(--size) 0;
|
||||
padding-bottom: calc(var(--size) / 2);
|
||||
text-transform: capitalize;
|
||||
select,option,textarea,input,header,footer,button,main,blockquote {padding: calc(var(--size)/2) var(--size)}
|
||||
|
||||
select,option,textarea,input {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
border: var(--default) 2px solid;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
select:hover {cursor: pointer;}
|
||||
|
||||
h1 {font-size: 2.2rem}
|
||||
h2 {font-size: 1.8rem}
|
||||
|
|
@ -158,37 +97,89 @@ h3 {font-size: 1.4rem}
|
|||
h4 {font-size: 1.2rem}
|
||||
h5 {font-size: 1.1rem}
|
||||
h6 {font-size: 1rem}
|
||||
h1,h2,h3,h4,h5,h6 {margin-top: 1rem;margin-bottom: .5rem;}
|
||||
|
||||
a {color: var(--theme);}
|
||||
a:hover {color: var(--dark);}
|
||||
hr {margin: 1rem 0; border-color: var(--primary)}
|
||||
|
||||
section, article {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
article, aside {
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
background: var(--light);
|
||||
color: var(--dark);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
|
||||
input:user-invalid {
|
||||
outline: 2px solid var(--theme);
|
||||
}
|
||||
|
||||
details {
|
||||
blockquote {
|
||||
margin: var(--size) 0;
|
||||
color: var(--fg);
|
||||
color: var(--foreground);
|
||||
font-style: italic;
|
||||
padding: calc(var(--size) * 1.5);
|
||||
border: var(--default) 1px solid;
|
||||
border-left: var(--default) 1rem solid;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
button {font-family: Verdana, Geneva, Tahoma, sans-serif;border-radius: var(--radius);}
|
||||
|
||||
button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
|
||||
filter:brightness(90%) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button,input[type="submit"],input[type="reset"] {
|
||||
border: unset;
|
||||
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
a.button {padding: calc(var(--size)/2) var(--size);text-align: center;}
|
||||
|
||||
a {display: inline-block;vertical-align: middle; color: var(--primary)}
|
||||
a:hover {color: var(--foreground)}
|
||||
a[name] {display: none;} /* fix anchors */
|
||||
|
||||
input:user-invalid {
|
||||
outline: 2px solid var(--danger);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
*:disabled {background: #F0F0F0; }
|
||||
*:disabled:hover {cursor: not-allowed}
|
||||
|
||||
/* Tables */
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tbody {
|
||||
border-top: var(--default) 2px solid;
|
||||
border-bottom: var(--default) 2px solid;
|
||||
}
|
||||
|
||||
th {text-align: left}
|
||||
|
||||
th,td {
|
||||
padding: .25rem;
|
||||
border-bottom: 1px solid var(--default);
|
||||
}
|
||||
|
||||
table.striped tbody>:nth-child(2n-1) {background: var(--default)}
|
||||
|
||||
/* Details */
|
||||
|
||||
details {
|
||||
color: var(--dark);
|
||||
background: var(--light);
|
||||
margin: var(--size) 0;
|
||||
cursor: pointer;
|
||||
border: var(--default) 2px solid;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
background-color: var(--bg);
|
||||
margin-bottom: var(--size);
|
||||
border: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
details>* {
|
||||
|
|
@ -196,155 +187,9 @@ details>* {
|
|||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
summary {
|
||||
color: var(--theme);
|
||||
height: 40px;
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
summary:hover {cursor: pointer;}
|
||||
details:not(summary):hover {cursor: default}
|
||||
|
||||
a.button,button, input {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
min-width: fit-content;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border: 1px solid var(--theme);
|
||||
border-radius: var(--radius);
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
input[type=color] {padding: .25rem}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]{
|
||||
padding: 0;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
input::placeholder {color: var(--mg)}
|
||||
|
||||
button, input[type="reset"],input[type="submit"] {
|
||||
display: inline-block;
|
||||
border-radius: var(--radius);
|
||||
width: initial;
|
||||
}
|
||||
|
||||
button[disabled], button[disabled]:hover {
|
||||
filter: brightness(75%);
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
button.link {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--theme);
|
||||
margin:0;
|
||||
}
|
||||
|
||||
button.link:hover {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--theme);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.button, button, input[type="submit"] {
|
||||
background: var(--theme);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button.outline {
|
||||
background: none;
|
||||
outline: var(--theme);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
|
||||
filter:brightness(90%) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select:disabled, textarea:disabled,input:disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
filter: brightness(95%);
|
||||
}
|
||||
|
||||
select:focus,textarea:focus,input:focus {
|
||||
border: 2px solid var(--theme);
|
||||
}
|
||||
|
||||
option { line-height: 1rem; vertical-align: center;}
|
||||
|
||||
select,textarea {
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
font-size: var(--size);
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
border: 1px solid var(--theme);
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
padding: 0 var(--size);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
background: var(--bg) no-repeat 100%;
|
||||
color: var(--fg);
|
||||
padding: 0 clamp(.5rem, var(--size), 2rem);
|
||||
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(--size) * 6rem);;
|
||||
padding: clamp(.5rem, var(--size), 2rem);
|
||||
cursor: text;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
*:disabled, .disable, .disable {pointer-events: none;}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 2rem;
|
||||
border-bottom: 1px solid var(--theme);
|
||||
}
|
||||
nav.navbar {
|
||||
background: var(--theme);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
}
|
||||
.navbar li:hover {background: var(--white);color: var(--black); cursor: pointer;}
|
||||
.navbar li a {color: inherit;}
|
||||
|
||||
nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}
|
||||
nav ul li {padding:0rem .5rem;margin:0}
|
||||
nav ul li:first-child {margin-left:0;margin-left:0}
|
||||
nav a {text-decoration: none;}
|
||||
|
||||
/* Dialog */
|
||||
|
||||
dialog[open] {
|
||||
|
|
@ -352,12 +197,57 @@ dialog[open] {
|
|||
}
|
||||
|
||||
dialog {
|
||||
border: 1px solid var(--theme);
|
||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
padding: calc(var(--size) * 2);
|
||||
border: 1px solid var(--dark);
|
||||
border-radius: var(--radius);
|
||||
padding:0;
|
||||
margin:0;
|
||||
max-width: 85%;
|
||||
min-width: 340px;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0rem .5rem;
|
||||
}
|
||||
|
||||
nav .brand {
|
||||
margin:0;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
nav a {text-decoration: none;}
|
||||
nav > ul > li > a:hover, .active {
|
||||
margin-top: -1px; /* fix page bounce */
|
||||
border-bottom: currentColor 1px solid;
|
||||
}
|
||||
|
||||
nav ul {display: flex;list-style-type: none;margin:0;padding:0; line-height: 2rem}
|
||||
nav ul li {padding:0rem .5rem;margin:0}
|
||||
nav ul li:first-child {margin-left:0;margin-left:0}
|
||||
nav a {text-decoration: none;color: var(--primary)}
|
||||
|
||||
/* Colors */
|
||||
|
||||
.primary {color: var(--light); background: var(--primary);}
|
||||
.secondary {color: var(--light); background: var(--secondary);}
|
||||
.default {color: var(--dark); background: var(--light);}
|
||||
.dark {color: var(--light); background: var(--dark);}
|
||||
.light {color: var(--dark); background: var(--light);}
|
||||
|
||||
blockquote.primary {border-color: var(--primary);}
|
||||
blockquote.secondary {border-color: var(--secondary);}
|
||||
|
||||
.text-primary {color: var(--primary)}
|
||||
.text-secondary {color: var(--secondary)}
|
||||
.text-default, .weak {color: var(--default)}
|
||||
|
||||
/* Layout Utilities */
|
||||
|
||||
.grid {
|
||||
|
|
@ -367,6 +257,15 @@ dialog {
|
|||
}
|
||||
|
||||
.group {display: flex}
|
||||
.right {float:right}
|
||||
.left {float:left}
|
||||
.center {text-align: center}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: var(--size);
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.underline {border-bottom: currentColor 1px solid}
|
||||
.border {border: var(--default) 2px solid;border-radius: var(--radius);}
|
||||
.indent {margin-left: .25rem;}
|
||||
.pointer {cursor: pointer;}
|
||||
.center {align-self: center; justify-self: center;}
|
||||
|
|
|
|||
Loading…
Reference in New Issue