From 4b538d527ba5122bea12c588ba54e0cfce7dbaa7 Mon Sep 17 00:00:00 2001
From: "Markus A. R. Johansen" <90006516+J0hans1@users.noreply.github.com>
Date: Sat, 12 Aug 2023 14:30:56 +0200
Subject: [PATCH] Initial ChimeraCSS Pre-Alpha commit:wq

---
 Chimera.css               | 197 +++++++++++++++++++++++++++++++++++---
 test.html                 | 149 ++++++++++++++++++++++++++++
 theme/blockquote.css      |   9 --
 theme/button.css          |  20 ----
 theme/code.css            |  17 ----
 theme/forms.css           |  36 -------
 theme/general.css         |   6 --
 theme/headings.css        |  37 -------
 theme/horisontal-rule.css |   6 --
 theme/img.css             |   7 --
 theme/links.css           |  18 ----
 theme/lists.css           |   5 -
 theme/paragraphs.css      |   3 -
 theme/tables.css          |  18 ----
 14 files changed, 335 insertions(+), 193 deletions(-)
 create mode 100644 test.html
 delete mode 100644 theme/blockquote.css
 delete mode 100644 theme/button.css
 delete mode 100644 theme/code.css
 delete mode 100644 theme/forms.css
 delete mode 100644 theme/general.css
 delete mode 100644 theme/headings.css
 delete mode 100644 theme/horisontal-rule.css
 delete mode 100644 theme/img.css
 delete mode 100644 theme/links.css
 delete mode 100644 theme/lists.css
 delete mode 100644 theme/paragraphs.css
 delete mode 100644 theme/tables.css

diff --git a/Chimera.css b/Chimera.css
index ab0fef0..e10a771 100644
--- a/Chimera.css
+++ b/Chimera.css
@@ -1,11 +1,186 @@
-@import url(theme/general.css);
-@import url(theme/button.css);
-@import url(theme/blockquote.css);
-@import url(theme/headings.css);
-@import url(theme/links.css);
-@import url(theme/lists.css);
-@import url(theme/paragraphs.css);
-@import url(theme/tables.css);
-@import url(theme/code.css);
-@import url(theme/forms.css);
-@import url(theme/horisontal-rule.css);
\ No newline at end of file
+
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+
+/*------------------------------Variables----------------------------*/
+:root{
+    --Chimera-primary: hsl(183, 67%, 40%);
+    --Chimera-secondary: hsl(183, 54%, 56%);
+    --Chimera-accent: hsl(183, 67%, 40%); /* Same as primary ATM */
+    --Chimera-accent-hover: hsl(183, 67%, 35%);
+    --Chimera-accent-visited: hsl(183, 67%, 25%);
+    --Chimera-accent-active: hsl(183, 67%, 30%);
+    --Chimera-text: hsl(0, 0%, 25%);
+    --Chimera-background: hsl(0, 0%, 95%);
+}
+
+/*------------------------------General----------------------------*/
+body {
+    font-family: 'Inter', sans-serif;
+    color: var(--Chimera-text);
+}
+
+blockquote {
+    border-left: 4px solid var(--Chimera-primary);
+    background-color: var(--Chimera-background);
+    padding: 20px;
+    line-height: 28px;
+    max-width: 100%;
+    margin: 0px;
+    border-radius: 0px 8px 8px 0px;
+}
+
+hr {
+    height: 2px;
+    background-color: var(--Chimera-primary);
+    width: 100%;
+    border: 0;
+}
+
+/*------------------------------Buttons----------------------------*/
+button {
+    padding: 7px 16px;
+    font-size: medium;
+    border-radius: 8px;
+    border: 0px;
+    background-color: var(--Chimera-primary);
+    color: #ffff;
+}
+
+button:hover {
+    background-color: var(--Chimera-accent-hover);
+    transition: 100ms;
+    cursor: pointer;
+}
+
+button:active {
+    background-color: var(--Chimera-accent-active);
+    transition: 100ms;
+}
+
+/*------------------------------Headings----------------------------*/
+
+h1, h2, h3, h4, h5, h6 {
+    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;
+}
+
+/*------------------------------Paragraphs----------------------------*/
+
+p {
+    line-height: 1.5;
+    font-weight: 300;
+}
+
+/*------------------------------Links----------------------------*/
+
+a {
+    color: var(--Chimera-accent);
+    text-decoration: none;
+    font-weight: 300;
+}
+
+a:active {
+    color: var(--Chimera-accent-hover);
+}
+
+a:visited {
+    color: var(--Chimera-accent-visited);
+}
+
+a:hover {
+    color: var(--Chimera-accent-hover);
+    cursor: pointer;
+    text-decoration: underline var(--Chimera-accent-hover);
+}
+
+/*------------------------------Tables----------------------------*/
+
+table{
+    width: 100%;
+    border-collapse: collapse;
+}
+
+td, th {
+    border-bottom: 1px solid var(--Chimera-secondary);
+    padding: 10px;
+    text-align: left;
+}
+
+th{
+    font-weight: 800;
+}
+
+td{
+    font-weight: lighter;
+}
+
+ul, ol {
+    margin: 0 0 1.5em 1.5em;
+    padding: 0;
+    line-height: 2;
+}
+
+/*-----------------------------Formatted text----------------------------*/
+
+pre{
+    background-color: var(--Chimera-background);
+    padding: 10px;
+    border-radius: 8px;
+    overflow-x: auto;
+    width: 100%;
+}
+
+code, kbd, var, samp{
+    background-color: var(--Chimera-background);
+    border-radius: 8px;
+    padding: 4px 8px;
+}
+
+pre code{
+    font-family: 'Fira Code', monospace;
+}
+
+/*------------------------------Forms----------------------------*/
+
+input, textarea {
+    border-radius: 8px;
+    background-color: var(--Chimera-background);
+    border: 0;
+    padding: 12px;
+    width: 100%;
+    display: flex;
+    margin: 5px 0px 15px 0px;
+    font-size: medium;
+    outline: none;
+}
+
+
+label {
+    font-weight: 600;
+}
+
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..016aacd
--- /dev/null
+++ b/test.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="Chimera.css" />
+    <title>ChimeraCSS HTML test template</title>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        body > * {
+            width: 50%;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <a href="https://github.com/ChimeraCSS/ChimeraCSS">
+            <h1>ChimeraCSS</h1>
+        </a>
+        <nav>
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#">Services</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    
+    <main>
+        <section>
+            <h2>Section Title</h2>
+            <p>This is a paragraph of text.</p>
+            <a href="#">Link</a>
+            <img src="https://i.imgur.com/jqmnLne.jpeg" alt="Image">
+            <ul>
+                <li>List item 1</li>
+                <li>List item 2</li>
+                <li>List item 3</li>
+            </ul>
+            <ol>
+                <li>Ordered item 1</li>
+                <li>Ordered item 2</li>
+                <li>Ordered item 3</li>
+            </ol>
+            <blockquote>This is a blockquote.</blockquote>
+            <pre>This is preformatted text.</pre>
+            <code>This is code</code>
+        </section>
+
+        <section>
+            <h2>Tables</h2>
+            <table>
+                <thead>
+                  <tr>
+                    <th>First Name</th>
+                    <th>Last Name</th>
+                    <th>Age</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>John</td>
+                    <td>Doe</td>
+                    <td>30</td>
+                  </tr>
+                  <tr>
+                    <td>Jane</td>
+                    <td>Smith</td>
+                    <td>25</td>
+                  </tr>
+                </tbody>
+              </table>
+        </section>
+        
+        <section>
+            <h2>Forms</h2>
+            <form action="submit_form.php" method="post">
+                <label for="name">Name:</label>
+                <input type="text" id="name" name="name" required>
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+                <textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message..." required></textarea>
+                <fieldset>
+                    <legend>Choose an option:</legend>
+                    <input type="radio" id="option1" name="option" value="option1">
+                    <label for="option1">Option 1</label>
+                    <input type="radio" id="option2" name="option" value="option2">
+                    <label for="option2">Option 2</label>
+                </fieldset>
+                <button type="submit">Submit</button>
+            </form>
+        </section>
+
+        <section>
+            <hr>
+            <h1>Heading</h1>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam inventore nam vero? Quae odio illum
+                itaque qui voluptate corrupti alias magni, pariatur quidem fuga dolor velit minus eos labore maiores?
+            </p>
+            <h2>Heading</h2>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam inventore nam vero? Quae odio illum
+                itaque qui voluptate corrupti alias magni, pariatur quidem fuga dolor velit minus eos labore maiores?
+            </p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam inventore nam vero? Quae odio illum
+                itaque qui voluptate corrupti alias magni, pariatur quidem fuga dolor velit minus eos labore maiores?
+            </p>
+            <h4>Heading</h4>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam inventore nam vero? Quae odio illum
+                itaque qui voluptate corrupti alias magni, pariatur quidem fuga dolor velit minus eos labore maiores?
+            </p>
+            <h5>Heading</h5>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam inventore nam vero? Quae odio illum
+                itaque qui voluptate corrupti alias magni, pariatur quidem fuga dolor velit minus eos labore maiores?
+            </p>
+            <h6>Heading</h6>
+            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam inventore nam vero? Quae odio illum
+                itaque qui voluptate corrupti alias magni, pariatur quidem fuga dolor velit minus eos labore maiores?
+            </p>
+        </section>
+    </main>
+    
+    <footer>
+        <p>&copy; 2023 My Website. All rights reserved.</p>
+    </footer>
+</body>
+
+</html>
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>All HTML Tags Template</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="script.js" defer></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/theme/blockquote.css b/theme/blockquote.css
deleted file mode 100644
index 5721005..0000000
--- a/theme/blockquote.css
+++ /dev/null
@@ -1,9 +0,0 @@
-blockquote {
-    border-left: 4px solid #2593be;
-    background-color: rgb(244, 243, 243);
-    padding: 20px;
-    line-height: 28px;
-    max-width: 100%;
-    margin: 0px;
-    border-radius: 0px 8px 8px 0px;
-}
\ No newline at end of file
diff --git a/theme/button.css b/theme/button.css
deleted file mode 100644
index d22409e..0000000
--- a/theme/button.css
+++ /dev/null
@@ -1,20 +0,0 @@
-
-button {
-    padding: 7px 16px;
-    font-size: medium;
-    border-radius: 8px;
-    border: 0px;
-    background-color: #2593be;
-    color: rgb(255, 255, 255);
-}
-
-button:hover {
-    background-color: #51a9cb;
-    transition: 100ms;
-    cursor: pointer;
-}
-
-button:active {
-    background-color: #1e7698;
-    transition: 100ms;
-}
diff --git a/theme/code.css b/theme/code.css
deleted file mode 100644
index 31c621a..0000000
--- a/theme/code.css
+++ /dev/null
@@ -1,17 +0,0 @@
-pre{
-    background-color: rgb(244, 243, 243);
-    padding: 10px;
-    border-radius: 8px;
-    overflow-x: auto;
-    width: 100%;
-}
-
-code, kbd, var, samp{
-    background-color: rgb(244, 243, 243);
-    border-radius: 8px;
-    padding: 4px 8px;
-}
-
-pre code{
-    font-family: 'Fira Code', monospace;
-}
\ No newline at end of file
diff --git a/theme/forms.css b/theme/forms.css
deleted file mode 100644
index a3d40cf..0000000
--- a/theme/forms.css
+++ /dev/null
@@ -1,36 +0,0 @@
-input, textarea {
-    border-radius: 8px;
-    background-color: rgb(244, 243, 243);
-    border: 0;
-    padding: 12px;
-    width: 100%;
-    display: flex;
-    margin: 5px 0px 15px 0px;
-    font-size: medium;
-}
-
-label {
-    font-weight: 600;
-}
-
-input[type="submit"] {
-    padding: 7px 16px;
-    font-size: medium;
-    border-radius: 8px;
-    border: 0px;
-    background-color: #2593be;
-    color: rgb(255, 255, 255);
-    width: fit-content;
-}
-
-
-input[type="submit"]:hover {
-    background-color: #51a9cb;
-    transition: 100ms;
-    cursor: pointer;
-}
-
-input[type="submit"]:active {
-    background-color: #1e7698;
-    transition: 100ms;
-}
\ No newline at end of file
diff --git a/theme/general.css b/theme/general.css
deleted file mode 100644
index 92d244e..0000000
--- a/theme/general.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
-
-body {
-    font-family: 'Inter', sans-serif;
-    color: rgb(54, 54, 54);
-}
\ No newline at end of file
diff --git a/theme/headings.css b/theme/headings.css
deleted file mode 100644
index e641918..0000000
--- a/theme/headings.css
+++ /dev/null
@@ -1,37 +0,0 @@
-
-h1 {
-    font-size: 3em;
-    font-weight: 300;
-    margin-bottom: 0.5em;
-}
-
-h2 {
-    font-size: 2.5em;
-    font-weight: 300;
-    margin-bottom: 0.5em;
-}
-
-h3 {
-    font-size: 2em;
-    font-weight: 300;
-    margin-bottom: 0.5em;
-}
-
-h4 {
-    font-size: 1.5em;
-    font-weight: 300;
-    margin-bottom: 0.5em;
-}
-
-h5 {
-    font-size: 1.25em;
-    font-weight: 300;
-    margin-bottom: 0.5em;
-}
-
-h6 {
-    font-size: 1em;
-    font-weight: 300;
-    margin-bottom: 0.5em;
-}
-
diff --git a/theme/horisontal-rule.css b/theme/horisontal-rule.css
deleted file mode 100644
index 1be905e..0000000
--- a/theme/horisontal-rule.css
+++ /dev/null
@@ -1,6 +0,0 @@
-hr {
-    height: 2px;
-    background-color: #2593be;
-    width: 100%;
-    border: 0;
-}
\ No newline at end of file
diff --git a/theme/img.css b/theme/img.css
deleted file mode 100644
index 6d57bec..0000000
--- a/theme/img.css
+++ /dev/null
@@ -1,7 +0,0 @@
-img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: middle;
-    border: 0;
-    -ms-interpolation-mode: bicubic;
-}
\ No newline at end of file
diff --git a/theme/links.css b/theme/links.css
deleted file mode 100644
index 2997d97..0000000
--- a/theme/links.css
+++ /dev/null
@@ -1,18 +0,0 @@
-a {
-    color: #1d7293;
-    text-decoration: none;
-}
-
-a:active {
-    color: #18627f;
-}
-
-a:visited {
-    color: #1d5e93;
-}
-
-a:hover {
-    color: #28a0d0;
-    cursor: pointer;
-    text-decoration: underline;
-}
\ No newline at end of file
diff --git a/theme/lists.css b/theme/lists.css
deleted file mode 100644
index 8a34ede..0000000
--- a/theme/lists.css
+++ /dev/null
@@ -1,5 +0,0 @@
-ul, ol {
-    margin: 0 0 1.5em 1.5em;
-    padding: 0;
-    line-height: 2;
-}
diff --git a/theme/paragraphs.css b/theme/paragraphs.css
deleted file mode 100644
index e023713..0000000
--- a/theme/paragraphs.css
+++ /dev/null
@@ -1,3 +0,0 @@
-p {
-    line-height: 1.5;
-}
\ No newline at end of file
diff --git a/theme/tables.css b/theme/tables.css
deleted file mode 100644
index 2014e01..0000000
--- a/theme/tables.css
+++ /dev/null
@@ -1,18 +0,0 @@
-table{
-    width: 100%;
-    border-collapse: collapse;
-}
-
-td, th {
-    border-bottom: 1px solid #6ba8c0;
-    padding: 10px;
-    text-align: left;
-}
-
-th{
-    font-weight: 800;
-}
-
-td{
-    font-weight: lighter;
-}