Merge pull request #2 from ChimeraCSS/pre-alpha

Refactor

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

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>