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

styling overhaul & colors

This commit is contained in:
Geoff Doty 2023-12-22 14:52:37 -06:00
parent cf39089a57
commit d4223e06fe
2 changed files with 776 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
examples/overview.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="dark"> <html lang="en" data-theme="">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -7,14 +7,7 @@
<title>Stylelite</title> <title>Stylelite</title>
<link rel="stylesheet" href="../src/stylelite.css"> <link rel="stylesheet" href="../src/stylelite.css">
<style> <style>
.fg-danger {color: indianred}
.fg-success {color: seagreen}
.fg-primary {color: steelblue}
.fg-warning {color: khaki}
.btn-success {background: seagreen; color: #FFF;}
.btn-danger {background: indianred; color: #FFF;}
.btn-primary {background: steelblue; color: #FFF;}
.btn-warning {background: khaki; color: #000;}
</style> </style>
</head> </head>
<body> <body>
@ -27,6 +20,7 @@
<li><a href="#forms">Forms</a></li> <li><a href="#forms">Forms</a></li>
<li><a href="#table">Tables</a></li> <li><a href="#table">Tables</a></li>
<li><a href="#grid">Grid Layout</a></li> <li><a href="#grid">Grid Layout</a></li>
<li><a href="#components">Components</a></li>
<li><a href="#utilities">Utilities</a></li> <li><a href="#utilities">Utilities</a></li>
<li></li> <li></li>
</ul> </ul>
@ -42,7 +36,7 @@
<br> <br>
<div class="grid"> <div class="grid">
<div style="background: var(--fg);">&nbsp;</div> <div style="background: var(--fg);">&nbsp;</div>
<div style="background: var(--mg);">&nbsp;</div> <div style="background: var(--gray);">&nbsp;</div>
<div class="outline">&nbsp;</div> <div class="outline">&nbsp;</div>
</div> </div>
</section> </section>
@ -140,7 +134,7 @@
<section> <section>
<a name="forms"></a> <a name="forms"></a>
<h2>Forms</h2> <h2>Forms</h2>
<form> <form class="">
<details> <details>
<summary>Details Summary</summary> <summary>Details Summary</summary>
<div> <div>
@ -200,17 +194,20 @@
<a name="buttons"></a> <a name="buttons"></a>
<h3>Buttons</h3> <h3>Buttons</h3>
<div class="grid"> <div class="grid">
<button class="sm">Small</button> <button>Button</button>
<button>Default</button> <button class="default">Default</button>
<button class="lg">Large</button> <button class="primary">Primary</button>
<button class="outline">Outline</button> <button disabled>Disabled</button>
<button class="link">Link</button>
</div> </div>
<div class="grid"> <div class="grid">
<button class="btn-warning">Warning</button> <button class="default">Default</button>
<button class="btn-danger">Danger</button> <button class="primary">Primary</button>
<button class="btn-primary">Primary</button> <button class="info">Info</button>
<button class="btn-success">Success</button> <button class="warning">Warning</button>
<button class="danger">Danger</button>
<button class="success">Success</button>
</div> </div>
</section> </section>
<section> <section>
@ -263,60 +260,70 @@
if <code>col-*</code> is not defined on a <code>div</code>, it is considered a <code>col-1</code> if <code>col-*</code> is not defined on a <code>div</code>, it is considered a <code>col-1</code>
</blockquote> </blockquote>
</p> </p>
<article> <section>
<div class="row content"> <div class="row">
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center col-2">2</div> <div class="border center col-2">2</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center col-3">3</div> <div class="border center col-3">3</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center col-4">4</div> <div class="border center col-4">4</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
<div class="row content"> <div class="row">
<div class="border center col-5">5</div> <div class="border center col-5">5</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
<div class="border center">auto</div> <div class="border center">auto</div>
</div> </div>
</section>
</section>
<section>
<a name="components"></a>
<h2>Components</h2>
<article>
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</article> </article>
</section> </section>
<section> <section>

190
src/stylelite.css
View File

@ -5,13 +5,24 @@
--radius: 0rem; --radius: 0rem;
--fg: #17202A; --fg: #17202A;
--bg: #FDFEFE; --bg: #FDFEFE;
--mg: #ABB2B9; --mg: #99A3A4;
--white: #FFF;
--black: #000;
--gray: #DCDCDC;
--primary: #1F618D;
--info: #3498DB;
--warning: #B7950B;
--danger: #C0392B;
--success: #1E8449;
--default: #DCDCDC;
} }
[data-theme=dark] { [data-theme=dark] {
--mg: #ABB2B9; --mg: #99A3A4;;
--bg: #17202A; --bg: #17202A;
--fg: #FDFEFE; --fg: #EAECEE;
} }
*,*:before,*:after { *,*:before,*:after {
@ -23,9 +34,9 @@ html,body {
color: var(--fg); color: var(--fg);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif; font-family: -apple-system, system-ui, Roboto, sans-serif;
font-size: var(--size); font-size: 16px;
letter-spacing: 0.0625em; letter-spacing: 0.0125em;
line-height: calc(var(--size) * 1.5); line-height: calc(var(--size) * 1.5);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -44,11 +55,6 @@ main {
max-width: 1140px; max-width: 1140px;
} }
ul,ol,li {
margin: 0 calc(var(--space) *.72);
padding: 0
}
table { table {
background: var(--bg); background: var(--bg);
border-collapse: collapse; border-collapse: collapse;
@ -56,6 +62,14 @@ table {
width: 100%; width: 100%;
} }
table>thead>tr>th {
border-bottom: 2px solid var(--mg);
}
table.striped tbody>:nth-child(2n-1) {
background: #f5f5f5;
}
th { th {
text-align: left; text-align: left;
} }
@ -65,11 +79,24 @@ th,td {
border-bottom: 1px solid var(--mg); border-bottom: 1px solid var(--mg);
} }
fieldset {border: none;padding: 0;}
legend {
font-size: larger;
display: block;
width: 100%;
padding: 0;
margin-bottom: 1rem;
line-height: inherit;
border: 0;
border-bottom: 1px solid var(--mg);
}
blockquote { blockquote {
margin: var(--space) 0; margin: var(--space) 0;
border-left: calc(var(--space) / 2) solid var(--fg); border-left: calc(var(--space) / 2) solid var(--fg);
color: var(--fg); color: var(--black);
background: var(--mg); background: var(--gray);
padding: var(--space); padding: var(--space);
} }
@ -91,78 +118,145 @@ h1,h2,h3,h4,h5,h6 {
margin: var(--space) 0; margin: var(--space) 0;
padding-bottom: calc(var(--space) / 2); padding-bottom: calc(var(--space) / 2);
text-transform: capitalize; text-transform: capitalize;
}
h1 {
font-size: calc(var(--size) * 2);
color: var(--fg); color: var(--fg);
} }
a {color: var(--mg)} h1 {
a:hover {color: var(--fg)} font-size: 2.2rem;
}
h2 {font-size: 1.8rem}
h3 {font-size: 1.4rem}
h4 {font-size: 1.2rem}
h5 {font-size: 1rem}
h6 {font-size: .9rem}
a {color: var(--primary)}
a:hover {opacity: .5;}
/* a:hover {color: var(--fg)} */
section, article { section, article {
margin-top: calc(var(--space) * 1.2); margin-bottom: calc(var(--space) * 1.2);
padding-bottom: var(--space); padding-bottom: var(--space);
} }
article {
border: 1px solid rgba(0,0,0,.125);
background: var(--gray);
}
article main {
height: auto;
padding: var(--space);
}
article header {
/* border-bottom: 1px solid rgba(0,0,0,.125); */
padding: var(--space);
}
article footer {
/* background: var(--default); */
/* border-top: 1px solid rgba(0,0,0,.125); */
padding: var(--space);
}
/* Forms */ /* Forms */
form>* {border-top: red}
details { details {
margin: var(--space) 0; margin: var(--space) 0;
color: var(--bg); color: var(--black);
cursor: pointer; cursor: pointer;
} }
details[open] { details[open] {
background-color: var(--mg); background-color: var(--default);
margin-bottom: var(--space); margin-bottom: var(--space);
} }
details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)} details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)}
summary { summary {
background-color: var(--mg); background-color: var(--default);
} }
button, input { button, input {
display: inline-block; display: inline-block;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
font-size: var(--size); font-size: 1rem;
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
width: 100%; width: 100%;
height: calc(var(--size) * 3); height: calc(var(--size) * 2);
border: 1px solid var(--mg); border: 1px solid var(--mg);
border-radius: var(--radius); border-radius: var(--radius);
padding: clamp(.5rem, var(--space), 2rem); padding: .5rem 1rem;
margin-bottom: var(--space);
margin-right: var(--space);
} }
button, input[type="reset"],input[type="submit"] { button, input[type="reset"],input[type="submit"] {
display: inline-block; display: inline-block;
text-transform: uppercase;
border-radius: var(--radius); border-radius: var(--radius);
width: initial; width: initial;
background: var(--fg);
color: var(--bg);
} }
button { button[disabled], button[disabled]:hover {
background: var(--fg); opacity: .5;
color: var(--bg); cursor: not-allowed;
pointer-events: none;
}
button.link {
border: none;
background: none;
color: var(--primary)
}
button.default {
background: var(--default);
color: var(--black);
}
button.primary {
background: var(--primary);
color: var(--white);
}
button.info {
background: var(--info);
color: var(--white);
}
button.warning {
background: var(--warning);
color: var(--white);
}
button.danger {
background: var(--danger);
color: var(--white);
}
button.success {
background: var(--success);
color: var(--white);
} }
button:hover, input[type="reset"]:hover,input[type="submit"]:hover { button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
background: var(--mg); /* background: var(--mg); */
color: var(--fg); background: #DCDCDC;
color: var(--black);
cursor: pointer; cursor: pointer;
}
button.link:hover {
background: var(--bg)
} }
input:disabled { input:disabled {
background: var(--mg); opacity: .5;
color: var(--bg); color: var(--bg);
cursor: not-allowed; cursor: not-allowed;
} }
@ -183,14 +277,14 @@ select,textarea {
display: inline-block; display: inline-block;
outline: none; outline: none;
font-size: var(--size); font-size: var(--size);
height: calc(var(--size) * 3); height: calc(var(--size) * 2);
width: 100%; width: 100%;
border: 1px solid var(--mg); border: 1px solid var(--mg);
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(--space);
margin-bottom: var(--space); /* margin-bottom: var(--space); */
cursor: pointer; cursor: pointer;
} }
@ -219,21 +313,22 @@ textarea {
nav { nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .5rem 1rem; border-bottom: 1px solid var(--mg);
background-color: var(--fg);
color: var(--bg);
} }
nav ul { nav ul {
margin:0;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
} }
nav ul li a { nav ul li a {
color: var(--bg); padding: .5rem 1rem;
text-decoration: none; text-decoration: none;
} }
nav ul li a:hover {color: var(--mg)}
nav ul li a:hover {opacity: .75;}
/* Grid System */ /* Grid System */
@ -242,6 +337,7 @@ nav ul li a:hover {color: var(--mg)}
display: grid; display: grid;
gap: var(--space); gap: var(--space);
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
padding: .4rem;
} }
.row { .row {
@ -250,7 +346,9 @@ nav ul li a:hover {color: var(--mg)}
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin:0; margin:0;
padding: .4rem;
} }
.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 { .row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -278,7 +376,9 @@ nav ul li a:hover {color: var(--mg)}
.underline {border-bottom: 1px solid var(--mg)} .underline {border-bottom: 1px solid var(--mg)}
.border {border: 1px solid var(--mg)} .border {border: 1px solid var(--mg)}
.content {padding: var(--space)} .content {padding: var(--space)}
.subtitle {margin-top: calc(var(--size) * -1); margin-bottom: var(--space); font-size: smaller}; .title {margin: 0; padding:0}
.subtitle {margin-top: -.25rem; font-size: small};
.spaceless {margin: 0; padding:0} .spaceless {margin: 0; padding:0}
.sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);} .sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}
.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);} .lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);}
.rounded {border-radius: calc(var(--size) / 4);}