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

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/

sass/_base.scss

@@ -0,0 +1,7 @@
+@use "variables";
+
+body {
+  font-family: variables.$font-stack;
+  color: variables.$Chimera-text;
+  background: variables.$Chimera-bg;
+}

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;
+}

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;
+}

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);
+}

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;
+}

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;
+}

sass/_images.scss

@@ -0,0 +1,4 @@
+img {
+  width: 100%;
+  height: auto;
+}

sass/_labels.scss

@@ -0,0 +1,3 @@
+label {
+  font-weight: 600;
+}

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;
+}

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;
+}

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);
+}

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;
+}

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;
+}

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;
+}

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;
+}

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%);

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";