From 5dee9953b4a2704d768f77328a93b0ab11ce72e5 Mon Sep 17 00:00:00 2001 From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com> Date: Sat, 23 Sep 2023 13:39:33 +0200 Subject: [PATCH] 12 modularized css (#38) * split chimera.css into partial sass-files * sass variable syntax * Correct variable use, compiled chimera.css file * Using sass inheritance * Contribution documents * font-stack implemented in scss --- css/chimera.css | 388 ++++++++++++++----------------- css/chimera.css.map | 1 + docs/CONTRIBUTING.md | 23 +- sass/_base.scss | 7 + sass/_blockquotes.scss | 12 + sass/_buttons.scss | 28 +++ sass/_checkboxes.scss | 37 +++ sass/_formatted-text.scss | 22 ++ sass/_horisontal-rule.scss | 9 + sass/_images.scss | 4 + sass/_labels.scss | 3 + sass/_links.scss | 22 ++ sass/_lists.scss | 15 ++ sass/_radio-buttons.scss | 37 +++ sass/_radio-checkbox-groups.scss | 9 + sass/_tables.scss | 22 ++ sass/_text.scss | 40 ++++ sass/_textfields.scss | 23 ++ sass/_variables.scss | 19 ++ sass/main.scss | 15 ++ 20 files changed, 515 insertions(+), 221 deletions(-) create mode 100644 css/chimera.css.map create mode 100644 sass/_base.scss create mode 100644 sass/_blockquotes.scss create mode 100644 sass/_buttons.scss create mode 100644 sass/_checkboxes.scss create mode 100644 sass/_formatted-text.scss create mode 100644 sass/_horisontal-rule.scss create mode 100644 sass/_images.scss create mode 100644 sass/_labels.scss create mode 100644 sass/_links.scss create mode 100644 sass/_lists.scss create mode 100644 sass/_radio-buttons.scss create mode 100644 sass/_radio-checkbox-groups.scss create mode 100644 sass/_tables.scss create mode 100644 sass/_text.scss create mode 100644 sass/_textfields.scss create mode 100644 sass/_variables.scss create mode 100644 sass/main.scss diff --git a/css/chimera.css b/css/chimera.css index cd70b8f..1adb11c 100644 --- a/css/chimera.css +++ b/css/chimera.css @@ -1,57 +1,8 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); - -/*------------------------------Variables----------------------------*/ -:root { - --Chimera: hsl(183, 40%, 55%); - --Chimera-dark: hsl(183, 40%, 50%); - --Chimera-darker: hsl(183, 40%, 45%); - --Chimera-darkest: hsl(183, 40%, 25%); - --Chimera-input-border: hsl(0, 0%, 51%); - --Chimera-text: hsl(0, 0%, 25%); - --Chimera-bg: hsl(40, 30%, 100%); - --Chimera-bg-secondary: hsl(60, 5%, 95%); -} - -/*------------------------------body----------------------------*/ -body { - font-family: "Inter", sans-serif; - color: var(--Chimera-text); - background: var(--Chimera-bg); -} - -/*------------------------------Blockquotes----------------------------*/ -blockquote { - line-height: 2em; - background-color: var(--Chimera-bg-secondary); - width: 100%; - box-sizing: border-box; - border-left: 0.25em solid var(--Chimera); - border-radius: 0 0.5em 0.5em 0; - padding: 1em; - margin: 0; -} - -/*------------------------------Horisontal Rule----------------------------*/ -hr { - background-color: var(--Chimera); - height: 0.2em; - width: 100%; - border: 0; - margin: 1em 0; -} - -/*------------------------------Images-----------------------------*/ -img { - width: 100%; - height: auto; -} - -/*------------------------------Buttons----------------------------*/ button, -input[type="button"], -input[type="submit"] { - background-color: var(--Chimera); - color: #ffff; +input[type=button], +input[type=submit] { + background-color: hsl(183, 40%, 50%); + color: white; font-size: medium; padding: 0.5em 0.75em; border: 0; @@ -60,111 +11,92 @@ input[type="submit"] { } button:hover, -input[type="button"]:hover, -input[type="submit"]:hover { - background-color: var(--Chimera-dark); - border-color: var(--Chimera-dark); +input[type=button]:hover, +input[type=submit]:hover { + background-color: hsl(183, 40%, 40%); + border-color: hsl(183, 40%, 40%); cursor: pointer; } button:active, -input[type="button"]:active, -input[type="submit"]:active { - border-color: var(--Chimera-darker); - background-color: var(--Chimera-darker); -} - -/*------------------------------Headings----------------------------*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: 400; - margin-top: 0.5em; - margin-bottom: 0.5em; +input[type=button]:active, +input[type=submit]:active { + border-color: hsl(183, 40%, 30%); + background-color: hsl(183, 40%, 30%); } -h1 { - font-size: 3em; +blockquote { + line-height: 2em; + background-color: hsl(60, 5%, 95%); + width: 100%; + box-sizing: border-box; + border-left: 0.25em solid hsl(183, 40%, 50%); + border-radius: 0 0.5em 0.5em 0; + padding: 1em; + margin: 0; } -h2 { - font-size: 2.5em; +code, +kbd, +var, +samp, pre { + background-color: hsl(60, 5%, 95%); + border-radius: 8px; + font-family: "Fira Code", monospace; } -h3 { - font-size: 2em; +pre { + padding: 10px; + overflow-x: auto; + width: 100%; } -h4 { - font-size: 1.5em; +code, +kbd, +var, +samp { + padding: 4px 8px; } -h5 { - font-size: 1.25em; +hr { + background-color: hsl(183, 40%, 50%); + height: 0.2em; + width: 100%; + border: 0; + margin: 1em 0; } -h6 { - font-size: 1em; +img { + width: 100%; + height: auto; } -/*------------------------------Paragraphs----------------------------*/ - -p { - line-height: 1.5; - font-weight: 300; +label { + font-weight: 600; } -/*------------------------------Links----------------------------*/ - a { - color: var(--Chimera); + color: hsl(183, 40%, 50%); text-decoration: none; - font-weight: 300; + font-weight: 400; } a:visited { - color: var(--Chimera-darkest); + color: hsl(183, 40%, 20%); } a:hover { - color: var(--Chimera-dark); + color: hsl(183, 40%, 40%); cursor: pointer; - text-decoration: underline var(--Chimera-dark); + text-decoration: underline hsl(183, 40%, 40%); } a:active { - color: var(--Chimera-darker); - text-decoration-color: var(--Chimera-darker); -} - -/*------------------------------Tables----------------------------*/ -table { - width: 100%; - border-collapse: collapse; -} - -th { - font-weight: 800; -} - -td { - font-weight: lighter; + color: hsl(183, 40%, 30%); + text-decoration-color: hsl(183, 40%, 30%); } -td, -th { - border-bottom: 0.1em solid var(--Chimera); - padding: 0.5em; - text-align: left; -} - -/*------------------------------Lists----------------------------*/ -ul, -ol { +li, ul { margin-left: 1.5em; padding: 0; line-height: 2em; @@ -178,140 +110,164 @@ li { list-style: inherit; } -/*-----------------------------Formatted text----------------------------*/ -pre { - background-color: var(--Chimera-bg-secondary); - padding: 10px; - border-radius: 8px; - overflow-x: auto; - width: 100%; -} - -code, -kbd, -var, -samp { - background-color: var(--Chimera-bg-secondary); - border-radius: 8px; - padding: 4px 8px; -} - -pre, -code { - font-family: "Fira Code", monospace; -} - -/*------------------------------Forms----------------------------*/ -textarea, -input[type="text"], -input[type="email"], -input[type="password"], -input[type="number"], -input[type="tel"], -input[type="url"], -input[type="search"] { - background-color: var(--Chimera-bg-secondary); - color: var(--Chimera-text); - font-size: medium; - border-radius: 0.5em; - border: 0; - outline: none; - width: 100%; - box-sizing: border-box; - margin: 0.5em 0; - padding: 1em 0 1em 1em; - resize: none; -} - -textarea { - font-family: "Inter", sans-serif; -} - -label { - font-weight: 600; -} - -/*------------------------------Radio and Checkbox groups-----------------*/ -radio, -checkbox { - line-height: 1.1; - display: grid; - grid-template-columns: 1em auto; - gap: 0.5em; - align-items: center; - margin: 1em 0em; -} - -/*------------------------------Radio buttons----------------------------*/ -input[type="radio"] { - /*remove default radio-buttons, and reset style*/ +input[type=checkbox] { + /*remove default checkboxes, and reset style*/ appearance: none; margin: 0; padding: 0; - background-color: var(--Chimera-bg-secondary); - + background-color: hsl(60, 5%, 95%); /*style*/ width: 1em; height: 1em; border-radius: 1em; - border: 2px solid var(--Chimera-input-border); - - /*Place fill*/ + border: 2px solid hsl(0, 0%, 51%); + border-radius: 0.2em; display: grid; place-content: center; } -input[type="radio"]:hover { - border: 2px solid var(--Chimera); +input[type=checkbox]:hover { + border: 2px solid hsl(183, 40%, 50%); } -input[type="radio"]::before { +input[type=checkbox]::before { transition: 200ms transform ease-in-out; transform: scale(0); width: 0.5em; height: 0.5em; - background-color: var(--Chimera); + background-color: hsl(183, 40%, 50%); content: ""; - border-radius: 50%; + border-radius: 0.05em; } -input[type="radio"]:checked::before { +input[type=checkbox]:checked::before { transform: scale(1); } -/*------------------------------Checkboxes----------------------------*/ -input[type="checkbox"] { - /*remove default checkboxes, and reset style*/ +input[type=radio] { + /*remove default radio-buttons, and reset style*/ appearance: none; margin: 0; padding: 0; - background-color: var(--Chimera-bg-secondary); - + background-color: hsl(60, 5%, 95%); /*style*/ width: 1em; height: 1em; border-radius: 1em; - border: 2px solid var(--Chimera-input-border); - border-radius: 0.2em; - + border: 2px solid hsl(0, 0%, 51%); + /*Place fill*/ display: grid; place-content: center; } -input[type="checkbox"]:hover { - border: 2px solid var(--Chimera); +input[type=radio]:hover { + border: 2px solid hsl(183, 40%, 50%); } -input[type="checkbox"]::before { +input[type=radio]::before { transition: 200ms transform ease-in-out; transform: scale(0); width: 0.5em; height: 0.5em; - background-color: var(--Chimera); + background-color: hsl(183, 40%, 50%); content: ""; - border-radius: 0.05em; + border-radius: 50%; } -input[type="checkbox"]:checked::before { +input[type=radio]:checked::before { transform: scale(1); } + +radio, +checkbox { + line-height: 1.1; + display: grid; + grid-template-columns: 1em auto; + gap: 0.5em; + align-items: center; + margin: 1em 0em; +} + +td, th { + border-bottom: 0.1em solid hsl(183, 40%, 50%); + padding: 0.5em; + text-align: left; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + font-weight: 600; +} + +td { + font-weight: lighter; +} + +h6, h5, h4, h3, h2, h1 { + font-weight: 400; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +h1 { + font-size: 3em; +} + +h2 { + font-size: 2.5em; +} + +h3 { + font-size: 2em; +} + +h4 { + font-size: 1.5em; +} + +h5 { + font-size: 1.25em; +} + +h6 { + font-size: 1em; +} + +p { + line-height: 1.5; + font-weight: 300; +} + +textarea, +input[type=text], +input[type=email], +input[type=password], +input[type=number], +input[type=tel], +input[type=url], +input[type=search] { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + background-color: hsl(60, 5%, 95%); + color: hsl(0, 0%, 25%); + font-size: medium; + border-radius: 0.5em; + border: 0; + outline: none; + width: 100%; + box-sizing: border-box; + margin: 0.5em 0; + padding: 1em 0 1em 1em; + resize: none; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + color: hsl(0, 0%, 25%); + background: hsl(40, 30%, 100%); +} + +/*# sourceMappingURL=chimera.css.map */ diff --git a/css/chimera.css.map b/css/chimera.css.map new file mode 100644 index 0000000..21c1352 --- /dev/null +++ b/css/chimera.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/_buttons.scss","../sass/_variables.scss","../sass/_blockquotes.scss","../sass/_formatted-text.scss","../sass/_horisontal-rule.scss","../sass/_images.scss","../sass/_labels.scss","../sass/_links.scss","../sass/_lists.scss","../sass/_checkboxes.scss","../sass/_radio-buttons.scss","../sass/_radio-checkbox-groups.scss","../sass/_tables.scss","../sass/_text.scss","../sass/_textfields.scss","../sass/_base.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;EAGE,kBCMQ;EDLR;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBCLa;EDMb,cCNa;EDOb;;;AAGF;AAAA;AAAA;EAGE,cCZe;EDaf,kBCbe;;;ACXjB;EACE;EACA,kBDcqB;ECbrB;EACA;EACA;EACA;EACA;EACA;;;ACRF;AAAA;AAAA;AAAA;EACE,kBFeqB;EEdrB;EACA;;;AAGF;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAKE;;;AClBF;EACE,kBHQQ;EGPR;EACA;EACA;EACA;;;ACPF;EACE;EACA;;;ACFF;EACE;;;ACCF;EACE,ONQQ;EMPR;EACA;;;AAGF;EACE,ONKgB;;;AMFlB;EACE,ONDa;EMEb;EACA;;;AAGF;EACE,ONNe;EMOf,uBNPe;;;AObjB;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;ACXF;AACE;EACA;EACA;EACA;EACA,kBRWqB;AQTrB;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBRlBQ;EQmBR;EACA;;;AAGF;EACE;;;ACjCF;AACE;EACA;EACA;EACA;EACA,kBTWqB;ASTrB;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBTlBQ;ESmBR;EACA;;;AAGF;EACE;;;ACnCF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;ACLF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;ACpBF;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;ACpCF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,abHW;EaIX,kBbOqB;EaNrB,ObIa;EaHb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnBF;EACE,adIW;EcHX,OdYa;EcXb,YdYW","file":"chimera.css"} \ No newline at end of file diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index d1e95db..6d1abbb 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -1,4 +1,5 @@ # Contributing to Chimera! + We want to make contributing to this project as easy and transparent as possible, whether it's: - Reporting a bug @@ -8,29 +9,41 @@ We want to make contributing to this project as easy and transparent as possible - Becoming a maintainer ## We Develop with Github + We use github to host code, to track issues and feature requests, as well as accept pull requests. ## SOON: We will Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests + Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests: 1. Fork the repo and create your branch from `master`. 2. If you've added code that should be tested, add tests. -4. Ensure the test suite passes. -5. Make sure your code lints. -6. Issue that pull request! +3. Ensure the test suite passes. +4. Make sure your code lints. +5. Issue that pull request! ## Any contributions you make will be under the Apache license 2.0 + In short, when you submit code changes, your submissions are understood to be under the same Apache license 2.0 license that covers the project. Feel free to contact the maintainers if that's a concern. ## Report bugs using Github's [issues](https://github.com/J0hans1/Chimera/issues) + We use GitHub issues to track public bugs. Report a bug by [opening a new issue](); it's that easy! ## Use a Consistent Coding Style -* 2 spaces for indentation rather than tabs -* You can try running `npm run lint` for style unification + +- 2 spaces for indentation rather than tabs +- You can try running `npm run lint` for style unification ## License + By contributing, you agree that your contributions will be licensed under its Apache License. ## References + This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md) + +## NB! Remember! + +- Dont write the styling changes in the .css files, write them in .scss files +- Remember to run `sass sass/main.scss css/chimera.css` to build the changes in sass/ diff --git a/sass/_base.scss b/sass/_base.scss new file mode 100644 index 0000000..0ee3b16 --- /dev/null +++ b/sass/_base.scss @@ -0,0 +1,7 @@ +@use "variables"; + +body { + font-family: variables.$font-stack; + color: variables.$Chimera-text; + background: variables.$Chimera-bg; +} diff --git a/sass/_blockquotes.scss b/sass/_blockquotes.scss new file mode 100644 index 0000000..4d58f18 --- /dev/null +++ b/sass/_blockquotes.scss @@ -0,0 +1,12 @@ +@use "variables"; + +blockquote { + line-height: 2em; + background-color: variables.$Chimera-bg-secondary; + width: 100%; + box-sizing: border-box; + border-left: 0.25em solid variables.$Chimera; + border-radius: 0 0.5em 0.5em 0; + padding: 1em; + margin: 0; +} diff --git a/sass/_buttons.scss b/sass/_buttons.scss new file mode 100644 index 0000000..e973e4d --- /dev/null +++ b/sass/_buttons.scss @@ -0,0 +1,28 @@ +@use "variables"; + +button, +input[type="button"], +input[type="submit"] { + background-color: variables.$Chimera; + color: #ffff; + font-size: medium; + padding: 0.5em 0.75em; + border: 0; + border-radius: 0.5em; + transition: 200ms ease-in-out; +} + +button:hover, +input[type="button"]:hover, +input[type="submit"]:hover { + background-color: variables.$Chimera-dark; + border-color: variables.$Chimera-dark; + cursor: pointer; +} + +button:active, +input[type="button"]:active, +input[type="submit"]:active { + border-color: variables.$Chimera-darker; + background-color: variables.$Chimera-darker; +} diff --git a/sass/_checkboxes.scss b/sass/_checkboxes.scss new file mode 100644 index 0000000..888db20 --- /dev/null +++ b/sass/_checkboxes.scss @@ -0,0 +1,37 @@ +@use "variables"; + +input[type="checkbox"] { + /*remove default checkboxes, and reset style*/ + appearance: none; + margin: 0; + padding: 0; + background-color: variables.$Chimera-bg-secondary; + + /*style*/ + width: 1em; + height: 1em; + border-radius: 1em; + border: 2px solid variables.$Chimera-input-border; + border-radius: 0.2em; + + display: grid; + place-content: center; +} + +input[type="checkbox"]:hover { + border: 2px solid variables.$Chimera; +} + +input[type="checkbox"]::before { + transition: 200ms transform ease-in-out; + transform: scale(0); + width: 0.5em; + height: 0.5em; + background-color: variables.$Chimera; + content: ""; + border-radius: 0.05em; +} + +input[type="checkbox"]:checked::before { + transform: scale(1); +} diff --git a/sass/_formatted-text.scss b/sass/_formatted-text.scss new file mode 100644 index 0000000..d2252ba --- /dev/null +++ b/sass/_formatted-text.scss @@ -0,0 +1,22 @@ +@use "variables"; + +%formatted-text { + background-color: variables.$Chimera-bg-secondary; + border-radius: 8px; + font-family: "Fira Code", monospace; +} + +pre { + @extend %formatted-text; + padding: 10px; + overflow-x: auto; + width: 100%; +} + +code, +kbd, +var, +samp { + @extend %formatted-text; + padding: 4px 8px; +} diff --git a/sass/_horisontal-rule.scss b/sass/_horisontal-rule.scss new file mode 100644 index 0000000..b5de673 --- /dev/null +++ b/sass/_horisontal-rule.scss @@ -0,0 +1,9 @@ +@use "variables"; + +hr { + background-color: variables.$Chimera; + height: 0.2em; + width: 100%; + border: 0; + margin: 1em 0; +} diff --git a/sass/_images.scss b/sass/_images.scss new file mode 100644 index 0000000..cea5de1 --- /dev/null +++ b/sass/_images.scss @@ -0,0 +1,4 @@ +img { + width: 100%; + height: auto; +} diff --git a/sass/_labels.scss b/sass/_labels.scss new file mode 100644 index 0000000..f2b49bf --- /dev/null +++ b/sass/_labels.scss @@ -0,0 +1,3 @@ +label { + font-weight: 600; +} diff --git a/sass/_links.scss b/sass/_links.scss new file mode 100644 index 0000000..7e21e98 --- /dev/null +++ b/sass/_links.scss @@ -0,0 +1,22 @@ +@use "variables"; + +a { + color: variables.$Chimera; + text-decoration: none; + font-weight: 400; +} + +a:visited { + color: variables.$Chimera-darkest; +} + +a:hover { + color: variables.$Chimera-dark; + cursor: pointer; + text-decoration: underline variables.$Chimera-dark; +} + +a:active { + color: variables.$Chimera-darker; + text-decoration-color: variables.$Chimera-darker; +} diff --git a/sass/_lists.scss b/sass/_lists.scss new file mode 100644 index 0000000..edbd8b8 --- /dev/null +++ b/sass/_lists.scss @@ -0,0 +1,15 @@ +%lists { + margin-left: 1.5em; + padding: 0; + line-height: 2em; +} + +ul { + @extend %lists; + list-style: disc; +} + +li { + @extend %lists; + list-style: inherit; +} diff --git a/sass/_radio-buttons.scss b/sass/_radio-buttons.scss new file mode 100644 index 0000000..7be5487 --- /dev/null +++ b/sass/_radio-buttons.scss @@ -0,0 +1,37 @@ +@use "variables"; + +input[type="radio"] { + /*remove default radio-buttons, and reset style*/ + appearance: none; + margin: 0; + padding: 0; + background-color: variables.$Chimera-bg-secondary; + + /*style*/ + width: 1em; + height: 1em; + border-radius: 1em; + border: 2px solid variables.$Chimera-input-border; + + /*Place fill*/ + display: grid; + place-content: center; +} + +input[type="radio"]:hover { + border: 2px solid variables.$Chimera; +} + +input[type="radio"]::before { + transition: 200ms transform ease-in-out; + transform: scale(0); + width: 0.5em; + height: 0.5em; + background-color: variables.$Chimera; + content: ""; + border-radius: 50%; +} + +input[type="radio"]:checked::before { + transform: scale(1); +} diff --git a/sass/_radio-checkbox-groups.scss b/sass/_radio-checkbox-groups.scss new file mode 100644 index 0000000..ecf7bed --- /dev/null +++ b/sass/_radio-checkbox-groups.scss @@ -0,0 +1,9 @@ +radio, +checkbox { + line-height: 1.1; + display: grid; + grid-template-columns: 1em auto; + gap: 0.5em; + align-items: center; + margin: 1em 0em; +} diff --git a/sass/_tables.scss b/sass/_tables.scss new file mode 100644 index 0000000..5533e12 --- /dev/null +++ b/sass/_tables.scss @@ -0,0 +1,22 @@ +@use "variables"; + +%tablerow { + border-bottom: 0.1em solid variables.$Chimera; + padding: 0.5em; + text-align: left; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + @extend %tablerow; + font-weight: 600; +} + +td { + @extend %tablerow; + font-weight: lighter; +} diff --git a/sass/_text.scss b/sass/_text.scss new file mode 100644 index 0000000..17669bb --- /dev/null +++ b/sass/_text.scss @@ -0,0 +1,40 @@ +%headings { + font-weight: 400; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +h1 { + @extend %headings; + font-size: 3em; +} + +h2 { + @extend %headings; + font-size: 2.5em; +} + +h3 { + @extend %headings; + font-size: 2em; +} + +h4 { + @extend %headings; + font-size: 1.5em; +} + +h5 { + @extend %headings; + font-size: 1.25em; +} + +h6 { + @extend %headings; + font-size: 1em; +} + +p { + line-height: 1.5; + font-weight: 300; +} diff --git a/sass/_textfields.scss b/sass/_textfields.scss new file mode 100644 index 0000000..123a915 --- /dev/null +++ b/sass/_textfields.scss @@ -0,0 +1,23 @@ +@use "variables"; + +textarea, +input[type="text"], +input[type="email"], +input[type="password"], +input[type="number"], +input[type="tel"], +input[type="url"], +input[type="search"] { + font-family: variables.$font-stack; + background-color: variables.$Chimera-bg-secondary; + color: variables.$Chimera-text; + font-size: medium; + border-radius: 0.5em; + border: 0; + outline: none; + width: 100%; + box-sizing: border-box; + margin: 0.5em 0; + padding: 1em 0 1em 1em; + resize: none; +} diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..323527f --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,19 @@ +// @font-face { +// font-family: "Inter"; +// src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap"); +// } + +// $font-stack: "Inter"; + +$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif; + +//Color palette +$Chimera: hsl(183, 40%, 50%); +$Chimera-dark: hsl(183, 40%, 40%); +$Chimera-darker: hsl(183, 40%, 30%); +$Chimera-darkest: hsl(183, 40%, 20%); +$Chimera-input-border: hsl(0, 0%, 51%); +$Chimera-text: hsl(0, 0%, 25%); +$Chimera-bg: hsl(40, 30%, 100%); +$Chimera-bg-secondary: hsl(60, 5%, 95%); diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..a3f4817 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,15 @@ +@use "buttons"; +@use "blockquotes"; +@use "formatted-text"; +@use "horisontal-rule"; +@use "images"; +@use "labels"; +@use "links"; +@use "lists"; +@use "checkboxes"; +@use "radio-buttons"; +@use "radio-checkbox-groups"; +@use "tables"; +@use "text"; +@use "textfields"; +@use "base";