feat: first tests

index.html

@@ -15,6 +15,8 @@
     <header>
         <h1>Hello, world!</h1>
     </header>
+    <div class="alert"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p></div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do. </p>
     <img src="https://via.placeholder.com/800x600/" alt="">
     <main>

src/_buttons.scss

@@ -0,0 +1,14 @@
+a.button, a.button:visited, button, input[type=submit] {
+    font-size: 1rem;
+    background-color: var(--color-accent);
+    color: var(--color-contrast-accent);
+    padding: 0.66rem 1rem;
+    margin-bottom: 0.66rem;
+    border-radius: var(--button-radius);
+    transition: background-color .5s ease;
+    border: none;
+    &:hover {
+        background-color: var(--color-accent-hover);
+    }
+}
+

src/_core.scss

@@ -0,0 +1,18 @@
+:root {
+    --color-accent-text: #1864ab;
+    --color-accent: #1971c2;
+    --color-accent-hover: #228be6;
+    --color-accent-background: #d0ebff;
+    --color-contrast-accent: white;
+
+    --button-radius: 6px;
+    --card-radius:6px;
+    --well-radius:6px;
+}
+
+body {
+    margin: auto;
+    width: 800px;
+    font-size:18px;
+    line-height: 1.5;
+}

src/main.scss

@@ -1,5 +1,11 @@
-body {
-    margin: auto;
-    width: 800px;
-    font-size:16px;
+@import 'core';
+@import 'buttons';
+
+.card, .alert {
+    border-radius: var(--card-radius);
+}
+
+.alert {
+    background-color: var(--color-accent-background);
+    color: var(--color-accent-text);
 }