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

reducing vars

This commit is contained in:
Geoff Doty 2024-01-20 14:30:29 -05:00
parent 2cc5aaa19f
commit 281f186510
2 changed files with 25 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/overview.html
View File

@ -13,14 +13,7 @@
<body> <body>
<main> <main>
<section> <section>
<!-- <div class="grid">
<div style="background: var(--fg);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div>
</div> -->
<!-- <br> -->
<nav> <nav>
<!-- <h1 class="no-margin">Styles</h1> -->
<h1 class="no-margin" style="color: var(--mg);"> <h1 class="no-margin" style="color: var(--mg);">
STYLELITE STYLELITE
<span style="color: var(--fg);">CSS</span> <span style="color: var(--fg);">CSS</span>
@ -35,20 +28,11 @@
<li></li> <li></li>
</ul> </ul>
</nav> </nav>
<!-- <br> --> <div class="grid">
<!-- <div> <div style="background: var(--theme);">&nbsp;</div>
<h1 style="color: var(--mg);">
STYLELITE
<span style="color: var(--fg);">CSS</span>
</h1>
<div class="">CSS for Minimalist</div>
</div> -->
<!-- <br> -->
<!-- <div class="grid">
<div style="background: var(--fg);">&nbsp;</div>
<div style="background: var(--gray);">&nbsp;</div> <div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div> <div class="outline">&nbsp;</div>
</div> --> </div>
</section> </section>
<section> <section>
<a name="overview"></a> <a name="overview"></a>
@ -199,7 +183,7 @@
<br> <br>
<section> <section>
<a name="buttons"></a> <a name="buttons"></a>
<h3>Buttons</h3> <h2>Buttons</h2>
<div class="grid"> <div class="grid">
<button>Theme</button> <button>Theme</button>
<button disabled>Disabled</button> <button disabled>Disabled</button>

44
src/stylelite.css
View File

@ -1,6 +1,5 @@
/*! Stylelite v:0.6.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */ /*! Stylelite v:0.6.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
:root { :root {
--space: 1rem;
--size: 1rem; --size: 1rem;
--radius: 0rem; --radius: 0rem;
--fg: #17202A; --fg: #17202A;
@ -20,7 +19,6 @@
--warning: #B7950B; --warning: #B7950B;
--danger: #C0392B; --danger: #C0392B;
--success: #1E8449; --success: #1E8449;
--default: #EEE;
} }
[data-theme=dark] { [data-theme=dark] {
@ -67,7 +65,7 @@ label {
main { main {
margin: 0 auto; margin: 0 auto;
padding: var(--space); padding: var(--size);
max-width: 1140px; max-width: 1140px;
} }
@ -117,10 +115,10 @@ legend {
} }
blockquote { blockquote {
margin: var(--space) 0; margin: var(--size) 0;
color: var(--black); color: var(--black);
background: var(--default); background: var(--light);
padding: var(--space); padding: var(--size);
} }
blockquote.primary {background: #EBF5FB; color: var(--primary); border: 1px solid var(--primary)} blockquote.primary {background: #EBF5FB; color: var(--primary); border: 1px solid var(--primary)}
@ -162,21 +160,22 @@ section, article {
article { article {
border: 1px solid rgba(0,0,0,.125); border: 1px solid rgba(0,0,0,.125);
background: var(--default); background: var(--light);
padding: var(--space); padding: var(--size);
} }
/* Forms */ /* Forms */
details { details {
margin: var(--space) 0; margin: var(--size) 0;
color: var(--black); color: var(--fg);
cursor: pointer; cursor: pointer;
} }
details[open] { details[open] {
background-color: var(--default); background-color: var(--bg);
margin-bottom: var(--space); margin-bottom: var(--size);
border: 1px solid var(--theme);
} }
details>* { details>* {
@ -187,7 +186,7 @@ details>* {
summary { summary {
color: var(--theme); color: var(--theme);
height: 40px; height: 40px;
background-color: var(--default); background-color: var(--bg);
border: 1px solid var(--theme); border: 1px solid var(--theme);
} }
@ -240,7 +239,7 @@ a.button, button {
} }
button.default { button.default {
background: var(--default); background: var(--light);
color: var(--black); color: var(--black);
} }
@ -272,8 +271,7 @@ a.button:hover, button:hover, input[type="reset"]:hover,input[type="submit"]:hov
} }
select:disabled, textarea:disabled,input:disabled { select:disabled, textarea:disabled,input:disabled {
color: #404040; background: #EEE;
background: #EBEDEF;
cursor: not-allowed; cursor: not-allowed;
} }
@ -293,14 +291,14 @@ select,textarea {
color: var(--fg); color: var(--fg);
background: var(--bg); background: var(--bg);
border-radius: var(--radius); border-radius: var(--radius);
padding: 0 var(--space); padding: 0 var(--size);
cursor: pointer; cursor: pointer;
} }
select { select {
background: var(--bg) no-repeat 100%; background: var(--bg) no-repeat 100%;
color: var(--fg); color: var(--fg);
padding: 0 clamp(.5rem, var(--space), 2rem); padding: 0 clamp(.5rem, var(--size), 2rem);
appearance: none; appearance: none;
background-size: 1ex; background-size: 1ex;
background-origin: content-box; background-origin: content-box;
@ -312,7 +310,7 @@ textarea {
resize: vertical; resize: vertical;
border: 1px solid var(--theme); border: 1px solid var(--theme);
height: calc(var(--size) * 6rem);; height: calc(var(--size) * 6rem);;
padding: clamp(.5rem, var(--space), 2rem); padding: clamp(.5rem, var(--size), 2rem);
cursor: text; cursor: text;
color: var(--fg); color: var(--fg);
} }
@ -332,12 +330,12 @@ nav > ul {
} }
nav ul li a { nav ul li a {
font-size: 1rem;
padding: .5rem; padding: .5rem;
text-decoration: none; text-decoration: none;
vertical-align: sub;
} }
nav ul li a:hover {opacity: .75;} nav ul li a:hover {color: var(--dark);}
/* Grid System */ /* Grid System */
@ -386,8 +384,8 @@ nav ul li a:hover {opacity: .75;}
.outline {background-color: transparent; color: var(--theme); border: 1px solid var(--fg)} .outline {background-color: transparent; color: var(--theme); border: 1px solid var(--fg)}
.underline {border-bottom: 1px solid var(--mg)} .underline {border-bottom: 1px solid var(--mg)}
.border {border: 1px solid var(--theme)} .border {border: 1px solid var(--theme)}
.padding {padding: var(--space)} .padding {padding: var(--size)}
.margin {margin: var(--space)} .margin {margin: var(--size)}
.title {margin: 0; padding:0} .title {margin: 0; padding:0}
.subtitle {margin-top: -.25rem; font-size: smaller}; .subtitle {margin-top: -.25rem; font-size: smaller};
.spaceless {margin: 0; padding:0} .spaceless {margin: 0; padding:0}