diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..7740987 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,49 @@ +# Contributing to Cecilia Classless + +Thank you for considering contributing to Cecilia Classless! We welcome contributions from everyone. + +### Getting Started + +1. Fork the repository and clone it locally. +2. Install dependencies by running `yarn install`. +3. Make your changes or add new features. +4. Test your changes to ensure they work as expected. +5. Commit your changes and push them to your fork. +6. Submit a pull request with a clear description of your changes. + +## Development Environment + +To set up your development environment, you'll need: + +- Node.js and npm installed on your machine. +- Your favorite code editor. + +## Customizing Variables + +Cecilia Classless offers a set of customizable CSS variables to allow for easy theming and customization. To customize default values, override the desired CSS variables in your own stylesheet. Here are some key variables you can customize: + +```css +/* Import Cecilia-Classless */ +@import 'cecilia-classless.css'; + +/* Override default values */ +:root { + --cecilia-color-base: #1f1f1f; + --cecilia-primary-color: #007bff; + --cecilia-secondary-color: #6c757d; + /* Add more custom variable overrides here */ +} +``` + +## Theming + +Cecilia Classless uses a default theme that is compiled when specific variables for a custom theme are not defined. To customize the theme, simply define the desired CSS variables in your own stylesheet. Here's an example of how to create a custom theme: + +```css +/* Custom theme */ +:root { + --color-base: #ffffff; /* Base text color */ + --background-color: #1f1f1f; /* Default background color */ + /* Add more custom variable overrides for your theme */ +} +``` diff --git a/README.md b/README.md index 69feda7..f732421 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,29 @@ Here's an example of how you can replace the default values: } ``` +| Variable | Description | Default Value | +| ----------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------- | +| `--cecilia-sm-container-max-width` | Maximum width for small containers. | `540px` | +| `--cecilia-md-container-max-width` | Maximum width for medium containers. | `720px` | +| `--cecilia-lg-container-max-width` | Maximum width for large containers. | `960px` | +| `--cecilia-xl-container-max-width` | Maximum width for extra large containers. | `1140px` | +| `--cecilia-xxl-container-max-width` | Maximum width for extra extra large containers. | `1400px` | +| `--cecilia-font-family-base` | Base font family. | `'ubuntu', 'roboto', 'arial', sans-serif'` | +| `--cecilia-font-family-code` | Font family for code elements. | `'monospace', 'consolas', "Liberation Mono", "Courier New", 'courier'` | +| `--cecilia-font-size-base` | Base font size for the document. | `1rem` | +| `--cecilia-font-weight-base` | Base font weight for the document. | `400` | +| `--cecilia-line-height-base` | Base line height for the document. | `1.5` | +| `--cecilia-h1-font-size` | Font size for h1 headings. | `calc(var(--cecilia-font-size-base) * 2.5)` | +| `--cecilia-h2-font-size` | Font size for h2 headings. | `calc(var(--cecilia-font-size-base) * 2)` | +| `--cecilia-h3-font-size` | Font size for h3 headings. | `calc(var(--cecilia-font-size-base) * 1.75)` | +| `--cecilia-h4-font-size` | Font size for h4 headings. | `calc(var(--cecilia-font-size-base) * 1.5)` | +| `--cecilia-h5-font-size` | Font size for h5 headings. | `calc(var(--cecilia-font-size-base) * 1.25)` | +| `--cecilia-h6-font-size` | Font size for h6 headings. | `calc(var(--cecilia-font-size-base) * 1.1)` | +| `--cecilia-headings-margin-bottom` | Margin bottom for headings. | `0.6rem` | +| `--cecilia-headings-line-height` | Line height for headings. | `1.2` | +| `--cecilia-background-color` | Default background color. | `#fff` | +| `--cecilia-color-base` | Base text color. | `#1f1f1f` | + ## Credits - [Normalize.css](https://necolas.github.io/normalize.css/): Browser style reset used by Cecilia Classless. diff --git a/dist/cecilia-classless-theme-dark.css b/dist/cecilia-classless-theme-dark.css new file mode 100644 index 0000000..40de7fd --- /dev/null +++ b/dist/cecilia-classless-theme-dark.css @@ -0,0 +1,617 @@ +@charset "UTF-8"; +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type=button], +[type=reset], +[type=submit] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type=checkbox], +[type=radio] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type=search] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +/** + * Default CSS variables. + * + * @copyright 2015-2023 Sandro Miguel Marques + * @package Cecilia CSS + * @author Sandro Miguel Marques - http://sandromiguel.com + * @license MIT Open Source + * @version v1.0.1 (2023-10-31) + * @link https://github.com/SandroMiguel/cecilia-css + */ +:root { + --cecilia-sm-container-max-width: var(--sm-container-max-width, 540px); + --cecilia-md-container-max-width: var(--md-container-max-width, 720px); + --cecilia-lg-container-max-width: var(--lg-container-max-width, 960px); + --cecilia-xl-container-max-width: var(--xl-container-max-width, 1140px); + --cecilia-xxl-container-max-width: var(--xxl-container-max-width, 1400px); + --cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif); + --cecilia-font-family-code: var(--font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier); + --cecilia-font-size-base: var(--font-size-base, 1rem); + --cecilia-font-weight-base: var(--font-weight-base, 400); + --cecilia-line-height-base: var(--cecilia-line-height-base, 1.5); + --cecilia-h1-font-size: var(--font-size-h1, calc(var(--cecilia-font-size-base) * 2.5)); + --cecilia-h2-font-size: var(--font-size-h2, calc(var(--cecilia-font-size-base) * 2)); + --cecilia-h3-font-size: var(--font-size-h3, calc(var(--cecilia-font-size-base) * 1.75)); + --cecilia-h4-font-size: var(--font-size-h4, calc(var(--cecilia-font-size-base) * 1.5)); + --cecilia-h5-font-size: var(--font-size-h5, calc(var(--cecilia-font-size-base) * 1.25)); + --cecilia-h6-font-size: var(--font-size-h6, calc(var(--cecilia-font-size-base) * 1.1)); + --cecilia-headings-margin-bottom: var(--headings-margin-bottom, 0.6rem); + --cecilia-headings-line-height: var(--headings-line-height, 1.2); + --cecilia-background-color: var(--background-color, #fff); + --cecilia-color-base: var(--color-base, #1f1f1f); + --cecilia-mark-background-color: var(--mark-background-color, #f8fc94); + --cecilia-input-focus-background-color: var(--input-focus-background-color, #fff); + --cecilia-input-disabled-background-color: var(--input-disabled-background-color, #ddd); +} + +/** + * Default Sass variables. + * + * @copyright 2015-2023 Sandro Miguel Marques + * @package Cecilia CSS + * @author Sandro Miguel Marques - http://sandromiguel.com + * @license MIT Open Source + * @version v1.0.0 (2023/01/11) + * @link https://github.com/SandroMiguel/cecilia-css + */ +/** + * Cecilia Classless - classless stylesheet for HTML. + * + * @copyright 2023 Sandro Miguel Marques + * @package Cecilia Classless + * @author Sandro Miguel Marques - http://sandromiguel.com + * @license MIT Open Source + * @version v0.1.0 (2023/01/25) + * @link https://github.com/SandroMiguel/cecilia-classless + */ +/* ========================================================================== * + Reset 3.0.0 (2023/01/07) + * ========================================================================== */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* ========================================================================== * + Base style v2.4.0 (2023/01/04) + * ========================================================================== */ +body { + background-color: var(--cecilia-background-color); + color: var(--cecilia-color-base); + font-family: var(--cecilia-font-family-base); + font-size: var(--cecilia-font-size-base); + font-weight: var(--cecilia-font-weight-base); + line-height: var(--cecilia-line-height-base); + margin: 2rem; +} + +pre, +code, +kbd, +samp { + font-family: var(--cecilia-font-family-code); +} + +/* ========================================================================== * + Base style > Typography > Headings + * ========================================================================== */ +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: var(--cecilia-headings-margin-bottom); + font-weight: 500; + line-height: var(--cecilia-headings-line-height); +} + +h1 { + font-size: var(--cecilia-h1-font-size); +} + +h2 { + font-size: var(--cecilia-h2-font-size); +} + +h3 { + font-size: var(--cecilia-h3-font-size); +} + +h4 { + font-size: var(--cecilia-h4-font-size); +} + +h5 { + font-size: var(--cecilia-h5-font-size); +} + +h6 { + font-size: var(--cecilia-h6-font-size); +} + +/* ========================================================================== * + Base style > Horizontal rules + * ========================================================================== */ +hr { + margin-top: 1rem; + margin-bottom: 1rem; + border: 0; + border-top: 1px solid #e5e5e5; +} + +/* ========================================================================== * + Base style > Emphasis + * ========================================================================== */ +small { + font-size: 80%; +} + +mark { + padding: 0.2em; + background-color: var(--cecilia-mark-background-color); +} + +/* ========================================================================== * + Base style > Lists + * ========================================================================== */ +ol, +ul { + padding-left: 2rem; +} + +/* ========================================================================== * + Base style > Blockquote + * ========================================================================== */ +blockquote { + font-size: 1.9rem; + quotes: "“" "”" "‘" "’"; +} + +blockquote::before { + left: -6px; + position: relative; + color: #b8b7b7; + content: open-quote; + font-size: 4em; + line-height: 0.1rem; + margin-right: 0.9rem; + vertical-align: -0.4em; +} + +/* ========================================================================== * + Base style > Code + * ========================================================================== */ +code { + font-size: 87.5%; + color: rgb(237, 31, 68); + word-break: break-all; +} + +a > code { + color: inherit; +} + +kbd { + padding: 0.2rem 0.4rem; + font-size: 87.5%; + color: rgb(255, 255, 255); + background-color: rgb(50, 50, 50); + border-radius: 0.2rem; +} + +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: 700; +} + +pre { + display: block; + font-size: 87.5%; + color: rgb(50, 50, 50); +} + +pre code { + font-size: inherit; + color: inherit; + word-break: normal; +} + +/* ========================================================================== * + Base style > Tables + * ========================================================================== */ +table { + width: 100%; + max-width: 100%; + margin-bottom: 1rem; + background-color: transparent; +} + +table th, +table td { + padding: 0.75rem; + vertical-align: top; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +table thead th { + vertical-align: bottom; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +table tbody + tbody { + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +table table { + background-color: #fff; +} + +/* ========================================================================== * + Base style > Forms + * ========================================================================== */ +input { + display: block; + width: 100%; + padding: 0.375rem 0.75rem; + color: #222; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #e5e5e5; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +input::-ms-expand { + background-color: transparent; + border: 0; +} + +input:focus { + color: #495057; + background-color: var(--cecilia-input-focus-background-color); + border-color: #bbb; + outline: 0; + box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.1); +} + +input::placeholder { + color: #aaa; + opacity: 1; +} + +input:disabled, +input[readonly] { + background-color: var(--cecilia-input-disabled-background-color); + opacity: 1; +} + +select:focus::-ms-value { + color: #222; + background-color: #fff; +} + +input[type=file], +input[type=range] { + display: block; + width: 100%; + padding: 0.375rem 0.75rem; + color: #222; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #e5e5e5; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +:root { + --color-base: #ffffff; /* Base text color */ + --background-color: #1f1f1f; /* Dark background color */ + --primary-color: #007bff; /* Primary color */ + --secondary-color: #6c757d; /* Secondary color */ + /* Add more custom variable overrides for your dark theme */ +} + +/*# sourceMappingURL=cecilia-classless-theme-dark.css.map */ diff --git a/dist/cecilia-classless.css b/dist/cecilia-classless.css index 9883e55..bd02a1c 100644 --- a/dist/cecilia-classless.css +++ b/dist/cecilia-classless.css @@ -325,7 +325,7 @@ template { --cecilia-xl-container-max-width: var(--xl-container-max-width, 1140px); --cecilia-xxl-container-max-width: var(--xxl-container-max-width, 1400px); --cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif); - --cecilia-font-family-code: var(--cecilia-font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier); + --cecilia-font-family-code: var(--font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier); --cecilia-font-size-base: var(--font-size-base, 1rem); --cecilia-font-weight-base: var(--font-weight-base, 400); --cecilia-line-height-base: var(--cecilia-line-height-base, 1.5); @@ -339,6 +339,9 @@ template { --cecilia-headings-line-height: var(--headings-line-height, 1.2); --cecilia-background-color: var(--background-color, #fff); --cecilia-color-base: var(--color-base, #1f1f1f); + --cecilia-mark-background-color: var(--mark-background-color, #f8fc94); + --cecilia-input-focus-background-color: var(--input-focus-background-color, #fff); + --cecilia-input-disabled-background-color: var(--input-disabled-background-color, #ddd); } /** @@ -380,14 +383,14 @@ body { font-size: var(--cecilia-font-size-base); font-weight: var(--cecilia-font-weight-base); line-height: var(--cecilia-line-height-base); - margin: 8px; + margin: 2rem; } pre, code, kbd, samp { - font-family: ar(--cecilia-font-family-code); + font-family: var(--cecilia-font-family-code); } /* ========================================================================== * @@ -447,7 +450,7 @@ small { mark { padding: 0.2em; - background-color: #f8fc94; + background-color: var(--cecilia-mark-background-color); } /* ========================================================================== * @@ -568,7 +571,7 @@ input::-ms-expand { input:focus { color: #495057; - background-color: #fff; + background-color: var(--cecilia-input-focus-background-color); border-color: #bbb; outline: 0; box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.1); @@ -581,7 +584,7 @@ input::placeholder { input:disabled, input[readonly] { - background-color: #ddd; + background-color: var(--cecilia-input-disabled-background-color); opacity: 1; } diff --git a/dist/cecilia-classless.min.css b/dist/cecilia-classless.min.css index 5b7071c..c9ade48 100644 --- a/dist/cecilia-classless.min.css +++ b/dist/cecilia-classless.min.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--cecilia-sm-container-max-width: var(--sm-container-max-width, 540px);--cecilia-md-container-max-width: var(--md-container-max-width, 720px);--cecilia-lg-container-max-width: var(--lg-container-max-width, 960px);--cecilia-xl-container-max-width: var(--xl-container-max-width, 1140px);--cecilia-xxl-container-max-width: var(--xxl-container-max-width, 1400px);--cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif);--cecilia-font-family-code: var(--cecilia-font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier);--cecilia-font-size-base: var(--font-size-base, 1rem);--cecilia-font-weight-base: var(--font-weight-base, 400);--cecilia-line-height-base: var(--cecilia-line-height-base, 1.5);--cecilia-h1-font-size: var(--font-size-h1, calc(var(--cecilia-font-size-base) * 2.5));--cecilia-h2-font-size: var(--font-size-h2, calc(var(--cecilia-font-size-base) * 2));--cecilia-h3-font-size: var(--font-size-h3, calc(var(--cecilia-font-size-base) * 1.75));--cecilia-h4-font-size: var(--font-size-h4, calc(var(--cecilia-font-size-base) * 1.5));--cecilia-h5-font-size: var(--font-size-h5, calc(var(--cecilia-font-size-base) * 1.25));--cecilia-h6-font-size: var(--font-size-h6, calc(var(--cecilia-font-size-base) * 1.1));--cecilia-headings-margin-bottom: var(--headings-margin-bottom, 0.6rem);--cecilia-headings-line-height: var(--headings-line-height, 1.2);--cecilia-background-color: var(--background-color, #fff);--cecilia-color-base: var(--color-base, #1f1f1f)}*,*::before,*::after{box-sizing:border-box}body{background-color:var(--cecilia-background-color);color:var(--cecilia-color-base);font-family:var(--cecilia-font-family-base);font-size:var(--cecilia-font-size-base);font-weight:var(--cecilia-font-weight-base);line-height:var(--cecilia-line-height-base);margin:8px}pre,code,kbd,samp{font-family:ar(--cecilia-font-family-code)}h1,h2,h3,h4,h5,h6{margin-bottom:var(--cecilia-headings-margin-bottom);font-weight:500;line-height:var(--cecilia-headings-line-height)}h1{font-size:var(--cecilia-h1-font-size)}h2{font-size:var(--cecilia-h2-font-size)}h3{font-size:var(--cecilia-h3-font-size)}h4{font-size:var(--cecilia-h4-font-size)}h5{font-size:var(--cecilia-h5-font-size)}h6{font-size:var(--cecilia-h6-font-size)}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid #e5e5e5}small{font-size:80%}mark{padding:.2em;background-color:#f8fc94}ol,ul{padding-left:2rem}blockquote{font-size:1.9rem;quotes:"“" "”" "‘" "’"}blockquote::before{left:-6px;position:relative;color:#b8b7b7;content:open-quote;font-size:4em;line-height:.1rem;margin-right:.9rem;vertical-align:-0.4em}code{font-size:87.5%;color:#ed1f44;word-break:break-all}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#323232;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#323232}pre code{font-size:inherit;color:inherit;word-break:normal}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:rgba(0,0,0,0)}table th,table td{padding:.75rem;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.1)}table thead th{vertical-align:bottom;border-bottom:1px solid rgba(0,0,0,.1)}table tbody+tbody{border-top:1px solid rgba(0,0,0,.1)}table table{background-color:#fff}input{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input::-ms-expand{background-color:rgba(0,0,0,0);border:0}input:focus{color:#495057;background-color:#fff;border-color:#bbb;outline:0;box-shadow:0 0 0 .1rem rgba(0,0,0,.1)}input::placeholder{color:#aaa;opacity:1}input:disabled,input[readonly]{background-color:#ddd;opacity:1}select:focus::-ms-value{color:#222;background-color:#fff}input[type=file],input[type=range]{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}/*# sourceMappingURL=cecilia-classless.min.css.map */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--cecilia-sm-container-max-width: var(--sm-container-max-width, 540px);--cecilia-md-container-max-width: var(--md-container-max-width, 720px);--cecilia-lg-container-max-width: var(--lg-container-max-width, 960px);--cecilia-xl-container-max-width: var(--xl-container-max-width, 1140px);--cecilia-xxl-container-max-width: var(--xxl-container-max-width, 1400px);--cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif);--cecilia-font-family-code: var(--font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier);--cecilia-font-size-base: var(--font-size-base, 1rem);--cecilia-font-weight-base: var(--font-weight-base, 400);--cecilia-line-height-base: var(--cecilia-line-height-base, 1.5);--cecilia-h1-font-size: var(--font-size-h1, calc(var(--cecilia-font-size-base) * 2.5));--cecilia-h2-font-size: var(--font-size-h2, calc(var(--cecilia-font-size-base) * 2));--cecilia-h3-font-size: var(--font-size-h3, calc(var(--cecilia-font-size-base) * 1.75));--cecilia-h4-font-size: var(--font-size-h4, calc(var(--cecilia-font-size-base) * 1.5));--cecilia-h5-font-size: var(--font-size-h5, calc(var(--cecilia-font-size-base) * 1.25));--cecilia-h6-font-size: var(--font-size-h6, calc(var(--cecilia-font-size-base) * 1.1));--cecilia-headings-margin-bottom: var(--headings-margin-bottom, 0.6rem);--cecilia-headings-line-height: var(--headings-line-height, 1.2);--cecilia-background-color: var(--background-color, #fff);--cecilia-color-base: var(--color-base, #1f1f1f);--cecilia-mark-background-color: var(--mark-background-color, #f8fc94);--cecilia-input-focus-background-color: var(--input-focus-background-color, #fff);--cecilia-input-disabled-background-color: var(--input-disabled-background-color, #ddd)}*,*::before,*::after{box-sizing:border-box}body{background-color:var(--cecilia-background-color);color:var(--cecilia-color-base);font-family:var(--cecilia-font-family-base);font-size:var(--cecilia-font-size-base);font-weight:var(--cecilia-font-weight-base);line-height:var(--cecilia-line-height-base);margin:2rem}pre,code,kbd,samp{font-family:var(--cecilia-font-family-code)}h1,h2,h3,h4,h5,h6{margin-bottom:var(--cecilia-headings-margin-bottom);font-weight:500;line-height:var(--cecilia-headings-line-height)}h1{font-size:var(--cecilia-h1-font-size)}h2{font-size:var(--cecilia-h2-font-size)}h3{font-size:var(--cecilia-h3-font-size)}h4{font-size:var(--cecilia-h4-font-size)}h5{font-size:var(--cecilia-h5-font-size)}h6{font-size:var(--cecilia-h6-font-size)}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid #e5e5e5}small{font-size:80%}mark{padding:.2em;background-color:var(--cecilia-mark-background-color)}ol,ul{padding-left:2rem}blockquote{font-size:1.9rem;quotes:"“" "”" "‘" "’"}blockquote::before{left:-6px;position:relative;color:#b8b7b7;content:open-quote;font-size:4em;line-height:.1rem;margin-right:.9rem;vertical-align:-0.4em}code{font-size:87.5%;color:#ed1f44;word-break:break-all}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#323232;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#323232}pre code{font-size:inherit;color:inherit;word-break:normal}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:rgba(0,0,0,0)}table th,table td{padding:.75rem;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.1)}table thead th{vertical-align:bottom;border-bottom:1px solid rgba(0,0,0,.1)}table tbody+tbody{border-top:1px solid rgba(0,0,0,.1)}table table{background-color:#fff}input{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input::-ms-expand{background-color:rgba(0,0,0,0);border:0}input:focus{color:#495057;background-color:var(--cecilia-input-focus-background-color);border-color:#bbb;outline:0;box-shadow:0 0 0 .1rem rgba(0,0,0,.1)}input::placeholder{color:#aaa;opacity:1}input:disabled,input[readonly]{background-color:var(--cecilia-input-disabled-background-color);opacity:1}select:focus::-ms-value{color:#222;background-color:#fff}input[type=file],input[type=range]{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}/*# sourceMappingURL=cecilia-classless.min.css.map */ diff --git a/docs/assets/cecilia-classless.min.css b/docs/assets/cecilia-classless.min.css index 5b7071c..c9ade48 100644 --- a/docs/assets/cecilia-classless.min.css +++ b/docs/assets/cecilia-classless.min.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--cecilia-sm-container-max-width: var(--sm-container-max-width, 540px);--cecilia-md-container-max-width: var(--md-container-max-width, 720px);--cecilia-lg-container-max-width: var(--lg-container-max-width, 960px);--cecilia-xl-container-max-width: var(--xl-container-max-width, 1140px);--cecilia-xxl-container-max-width: var(--xxl-container-max-width, 1400px);--cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif);--cecilia-font-family-code: var(--cecilia-font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier);--cecilia-font-size-base: var(--font-size-base, 1rem);--cecilia-font-weight-base: var(--font-weight-base, 400);--cecilia-line-height-base: var(--cecilia-line-height-base, 1.5);--cecilia-h1-font-size: var(--font-size-h1, calc(var(--cecilia-font-size-base) * 2.5));--cecilia-h2-font-size: var(--font-size-h2, calc(var(--cecilia-font-size-base) * 2));--cecilia-h3-font-size: var(--font-size-h3, calc(var(--cecilia-font-size-base) * 1.75));--cecilia-h4-font-size: var(--font-size-h4, calc(var(--cecilia-font-size-base) * 1.5));--cecilia-h5-font-size: var(--font-size-h5, calc(var(--cecilia-font-size-base) * 1.25));--cecilia-h6-font-size: var(--font-size-h6, calc(var(--cecilia-font-size-base) * 1.1));--cecilia-headings-margin-bottom: var(--headings-margin-bottom, 0.6rem);--cecilia-headings-line-height: var(--headings-line-height, 1.2);--cecilia-background-color: var(--background-color, #fff);--cecilia-color-base: var(--color-base, #1f1f1f)}*,*::before,*::after{box-sizing:border-box}body{background-color:var(--cecilia-background-color);color:var(--cecilia-color-base);font-family:var(--cecilia-font-family-base);font-size:var(--cecilia-font-size-base);font-weight:var(--cecilia-font-weight-base);line-height:var(--cecilia-line-height-base);margin:8px}pre,code,kbd,samp{font-family:ar(--cecilia-font-family-code)}h1,h2,h3,h4,h5,h6{margin-bottom:var(--cecilia-headings-margin-bottom);font-weight:500;line-height:var(--cecilia-headings-line-height)}h1{font-size:var(--cecilia-h1-font-size)}h2{font-size:var(--cecilia-h2-font-size)}h3{font-size:var(--cecilia-h3-font-size)}h4{font-size:var(--cecilia-h4-font-size)}h5{font-size:var(--cecilia-h5-font-size)}h6{font-size:var(--cecilia-h6-font-size)}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid #e5e5e5}small{font-size:80%}mark{padding:.2em;background-color:#f8fc94}ol,ul{padding-left:2rem}blockquote{font-size:1.9rem;quotes:"“" "”" "‘" "’"}blockquote::before{left:-6px;position:relative;color:#b8b7b7;content:open-quote;font-size:4em;line-height:.1rem;margin-right:.9rem;vertical-align:-0.4em}code{font-size:87.5%;color:#ed1f44;word-break:break-all}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#323232;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#323232}pre code{font-size:inherit;color:inherit;word-break:normal}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:rgba(0,0,0,0)}table th,table td{padding:.75rem;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.1)}table thead th{vertical-align:bottom;border-bottom:1px solid rgba(0,0,0,.1)}table tbody+tbody{border-top:1px solid rgba(0,0,0,.1)}table table{background-color:#fff}input{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input::-ms-expand{background-color:rgba(0,0,0,0);border:0}input:focus{color:#495057;background-color:#fff;border-color:#bbb;outline:0;box-shadow:0 0 0 .1rem rgba(0,0,0,.1)}input::placeholder{color:#aaa;opacity:1}input:disabled,input[readonly]{background-color:#ddd;opacity:1}select:focus::-ms-value{color:#222;background-color:#fff}input[type=file],input[type=range]{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}/*# sourceMappingURL=cecilia-classless.min.css.map */ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--cecilia-sm-container-max-width: var(--sm-container-max-width, 540px);--cecilia-md-container-max-width: var(--md-container-max-width, 720px);--cecilia-lg-container-max-width: var(--lg-container-max-width, 960px);--cecilia-xl-container-max-width: var(--xl-container-max-width, 1140px);--cecilia-xxl-container-max-width: var(--xxl-container-max-width, 1400px);--cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif);--cecilia-font-family-code: var(--font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier);--cecilia-font-size-base: var(--font-size-base, 1rem);--cecilia-font-weight-base: var(--font-weight-base, 400);--cecilia-line-height-base: var(--cecilia-line-height-base, 1.5);--cecilia-h1-font-size: var(--font-size-h1, calc(var(--cecilia-font-size-base) * 2.5));--cecilia-h2-font-size: var(--font-size-h2, calc(var(--cecilia-font-size-base) * 2));--cecilia-h3-font-size: var(--font-size-h3, calc(var(--cecilia-font-size-base) * 1.75));--cecilia-h4-font-size: var(--font-size-h4, calc(var(--cecilia-font-size-base) * 1.5));--cecilia-h5-font-size: var(--font-size-h5, calc(var(--cecilia-font-size-base) * 1.25));--cecilia-h6-font-size: var(--font-size-h6, calc(var(--cecilia-font-size-base) * 1.1));--cecilia-headings-margin-bottom: var(--headings-margin-bottom, 0.6rem);--cecilia-headings-line-height: var(--headings-line-height, 1.2);--cecilia-background-color: var(--background-color, #fff);--cecilia-color-base: var(--color-base, #1f1f1f);--cecilia-mark-background-color: var(--mark-background-color, #f8fc94);--cecilia-input-focus-background-color: var(--input-focus-background-color, #fff);--cecilia-input-disabled-background-color: var(--input-disabled-background-color, #ddd)}*,*::before,*::after{box-sizing:border-box}body{background-color:var(--cecilia-background-color);color:var(--cecilia-color-base);font-family:var(--cecilia-font-family-base);font-size:var(--cecilia-font-size-base);font-weight:var(--cecilia-font-weight-base);line-height:var(--cecilia-line-height-base);margin:2rem}pre,code,kbd,samp{font-family:var(--cecilia-font-family-code)}h1,h2,h3,h4,h5,h6{margin-bottom:var(--cecilia-headings-margin-bottom);font-weight:500;line-height:var(--cecilia-headings-line-height)}h1{font-size:var(--cecilia-h1-font-size)}h2{font-size:var(--cecilia-h2-font-size)}h3{font-size:var(--cecilia-h3-font-size)}h4{font-size:var(--cecilia-h4-font-size)}h5{font-size:var(--cecilia-h5-font-size)}h6{font-size:var(--cecilia-h6-font-size)}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid #e5e5e5}small{font-size:80%}mark{padding:.2em;background-color:var(--cecilia-mark-background-color)}ol,ul{padding-left:2rem}blockquote{font-size:1.9rem;quotes:"“" "”" "‘" "’"}blockquote::before{left:-6px;position:relative;color:#b8b7b7;content:open-quote;font-size:4em;line-height:.1rem;margin-right:.9rem;vertical-align:-0.4em}code{font-size:87.5%;color:#ed1f44;word-break:break-all}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#323232;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#323232}pre code{font-size:inherit;color:inherit;word-break:normal}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:rgba(0,0,0,0)}table th,table td{padding:.75rem;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.1)}table thead th{vertical-align:bottom;border-bottom:1px solid rgba(0,0,0,.1)}table tbody+tbody{border-top:1px solid rgba(0,0,0,.1)}table table{background-color:#fff}input{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input::-ms-expand{background-color:rgba(0,0,0,0);border:0}input:focus{color:#495057;background-color:var(--cecilia-input-focus-background-color);border-color:#bbb;outline:0;box-shadow:0 0 0 .1rem rgba(0,0,0,.1)}input::placeholder{color:#aaa;opacity:1}input:disabled,input[readonly]{background-color:var(--cecilia-input-disabled-background-color);opacity:1}select:focus::-ms-value{color:#222;background-color:#fff}input[type=file],input[type=range]{display:block;width:100%;padding:.375rem .75rem;color:#222;background-color:#fff;background-clip:padding-box;border:1px solid #e5e5e5;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}/*# sourceMappingURL=cecilia-classless.min.css.map */ diff --git a/docs/theme-dark.html b/docs/theme-dark.html new file mode 100644 index 0000000..6a76c3f --- /dev/null +++ b/docs/theme-dark.html @@ -0,0 +1,501 @@ + + + + + Cecilia Classless demo + + + + + + + + + + + + + +
+
+
+ Cecilia Classless +
+
+
+ +
+
+
+
+

Classless stylesheet for HTML.

+

This is a demo of Cecilia Classless, using the default styles.

+
+
+
+
+ +
+
+
+
+
+ + Download + +
  +
+ + View on GitHub + +
+
+
+
+
+ +
+
+ + +
+

Headings

+ +
+
+

<h1>

+
+
+

Heading 1

+
+
+ +
+
+
+

<h2>

+
+
+

Heading 2

+
+
+ +
+
+
+

<h3>

+
+
+

Heading 3

+
+
+ +
+
+
+

<h4>

+
+
+

Heading 4

+
+
+ +
+
+
+

<h5>

+
+
+
Heading 5
+
+
+ +
+
+
+

<h6>

+
+
+
Heading 6
+
+
+ +
+
+
 
+ 
<h1>...</h1>
+
+
+ + +

+

Small text

+ +
+
+

<small>

+
+
+

Display heading with small text

+

Display paragraph with small text

+
+
+ +
+
+
 
+ 
<p><small>...</small></p>
+
+
+ + + +

+

Marked text

+ +
+
+

<mark>

+
+
+
This is a marked text and indicates a highlight.
+
+
+
+
+
 
+ 
<p>...<mark>...</mark>...</p>
+
+
+ + + +

+

Horizontal rules

+ +
+
+

<hr>

+
+
+
+
+
+ +
+
+
 
+ 
<hr>
+
+
+ + + +

+

Lists

+ +
+
+

<ol>

+
+
+
    +
  1. Ordered list item 1
    2. +
  2. Ordered list item 2 +
      +
    • Nested ordered list item 1
      • +
    • Nested ordered list item 2
      • +
    +
    3. +
+
+
+
+
+
+

<ul>

+
+
+
    +
  • Unordered list item 1
    • +
  • Unordered list item 2 +
      +
    • Nested unordered list item 1
      • +
    • Nested unordered list item 2
      • +
    +
    • +
+
+
+ +
+
+
 
+ 
<ul>...</ul>
+
+
+ + + +

+

Blockquotes

+ +
+
+

<blockquote> and <cite>

+
+
+
+ Those who pass by us, do not go alone, and do not leave us alone; they leave a bit of themselves, and take a little of us. + Antoine de Saint-Exupéry +
+
+
+ +
+
+
 
+ 
<blockquote>...<cite>...</cite></blockquote>
+
+
+ + +

+

Code

+
+
+

<code>

+
+
+

For inline code, you can wrap a fragment of computer code in a <code> tag.

+
+
+
+
+
+

<pre> and <code>

+
+
+ For multiple lines of code, you can use the <code> tag inside a <pre> tag: + 
<p>I'm a sample paragraph...</p>
+<p>I'm another sample paragraph...</p>
+
+
+ +
+
+
 
+ 
<p>...<code>...</code>...</p>
+
+
+ + + +

+

Keyboard

+
+
+

<kbd>

+
+
+
Press Ctrl C to copy text.
+
+
+ +
+
+
 
+ 
<p>...<kbd>...</kbd>...</p>
+
+
+ + + +

+

Sample

+
+
+

<samp>

+
+
+ I'm a sample output from a computer program. +
+
+ +
+
+
 
+ 
<samp>...</samp>
+
+
+ + +

+

Tables

+
+
+

<table>

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
#QuantityIngredient
13Carrots
28Strawberries
31Lime
+ +
+
+
+
+ +
+
+
 
+ 
<table>...</table>
+
+
+ + + +

+

Forms

+
+
+

<input> and <select>

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+
 
+ 
<input id="..." type="text" placeholder="...">
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

+ + + + + diff --git a/package.json b/package.json index b2911a1..01de715 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "prepare": "husky install", "build": "npx sass ./src/cecilia-classless.scss:./dist/cecilia-classless.css ./src/docs/sample.scss:./docs/assets/sample.css && npx sass --style=compressed ./src/cecilia-classless.scss:./dist/cecilia-classless.min.css && npx sass --style=compressed ./src/cecilia-classless.scss:./docs/assets/cecilia-classless.min.css", + "build:dark-theme": "npx sass ./src/theme-dark.scss:./dist/cecilia-classless-theme-dark.css", "watch": "npx sass --watch ./src/cecilia-classless.scss:./dist/cecilia-classless.css & npx sass --watch --style=compressed ./src/cecilia-classless.scss:./docs/assets/cecilia-classless.min.css", "lint": "eslint .", "lint:scss": "stylelint \"./src/**/*.scss\"", diff --git a/src/_root.scss b/src/_root.scss index 38f4e5e..04e6772 100644 --- a/src/_root.scss +++ b/src/_root.scss @@ -19,7 +19,7 @@ // Typography --cecilia-font-family-base: var(--font-family-base, ubuntu, roboto, arial, sans-serif); // Defines the base font family. - --cecilia-font-family-code: var(--cecilia-font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier); // Defines the code font family. + --cecilia-font-family-code: var(--font-family-code, monospace, consolas, "Liberation Mono", "Courier New", courier); // Defines the code font family. --cecilia-font-size-base: var(--font-size-base, 1rem); // Sets the base font size for the document. --cecilia-font-weight-base: var(--font-weight-base, 400); // Sets the base font weight for the document. --cecilia-line-height-base: var(--cecilia-line-height-base, 1.5); // Sets the base line height for the document. @@ -35,4 +35,7 @@ // Colors --cecilia-background-color: var(--background-color, #fff); // Defines the default background color. --cecilia-color-base: var(--color-base, #1f1f1f); // Defines the base text color. + --cecilia-mark-background-color: var(--mark-background-color, #f8fc94); // Defines the background color for marked text. + --cecilia-input-focus-background-color: var(--input-focus-background-color, #fff); // Defines the background color for the focused input. + --cecilia-input-disabled-background-color: var(--input-disabled-background-color, #ddd); // Defines the background color for the disabled input. } diff --git a/src/_variables.scss b/src/_variables.scss index 91b0a5a..502fbf7 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -30,7 +30,7 @@ $container-max-widths: ( // Typography $font-family-base: var(--cecilia-font-family-base) !default; -$font-family-code: ar(--cecilia-font-family-code) !default; +$font-family-code: var(--cecilia-font-family-code) !default; $font-size-base: var(--cecilia-font-size-base) !default; $font-weight-base: var(--cecilia-font-weight-base) !default; $line-height-base: var(--cecilia-line-height-base) !default; @@ -46,3 +46,6 @@ $headings-line-height: var(--cecilia-headings-line-height) !default; // Colors $background-color: var(--cecilia-background-color) !default; $color-base: var(--cecilia-color-base) !default; +$mark-background-color: var(--cecilia-mark-background-color) !default; +$input-focus-background-color: var(--cecilia-input-focus-background-color) !default; +$input-disabled-background-color: var(--cecilia-input-disabled-background-color) !default; diff --git a/src/cecilia-classless.scss b/src/cecilia-classless.scss index 852f606..883d504 100644 --- a/src/cecilia-classless.scss +++ b/src/cecilia-classless.scss @@ -36,7 +36,7 @@ font-size: variables.$font-size-base; font-weight: variables.$font-weight-base; line-height: variables.$line-height-base; - margin: 8px; + margin: 2rem; } pre, @@ -106,7 +106,7 @@ small { mark { padding: 0.2em; - background-color: #f8fc94; + background-color: variables.$mark-background-color; } /* ========================================================================== * @@ -232,7 +232,7 @@ input::-ms-expand { input:focus { color: #495057; - background-color: #fff; + background-color: variables.$input-focus-background-color; border-color: #bbb; outline: 0; box-shadow: 0 0 0 0.1rem rgb(0 0 0 / 10%); @@ -245,7 +245,7 @@ input::placeholder { input:disabled, input[readonly] { - background-color: #ddd; + background-color: variables.$input-disabled-background-color; opacity: 1; } diff --git a/src/theme-dark.scss b/src/theme-dark.scss new file mode 100644 index 0000000..3c2edea --- /dev/null +++ b/src/theme-dark.scss @@ -0,0 +1,14 @@ +// theme-dark.scss + +// Import Cecilia-Classless +@import 'cecilia-classless.scss'; + +// Dark theme variables +:root { + --color-base: #ffffff; /* Base text color */ + --background-color: #1f1f1f; /* Dark background color */ + --primary-color: #007bff; /* Primary color */ + --secondary-color: #6c757d; /* Secondary color */ + /* Add more custom variable overrides for your dark theme */ +} +