Lot of thing

[recipes.git] / backend / style.scss

diff --git a/backend/style.scss b/backend/style.scss
index 6ea838d..94fa501 100644 (file)
--- a/backend/style.scss
+++ b/backend/style.scss
@@ -3,22 +3,57 @@
 @font-face{font-family: Fira Code; font-weight:600; src:url(FiraCode-SemiBold.woff2) format("woff2"); }
 @font-face{font-family: Fira Code; font-weight:700; src:url(FiraCode-Bold.woff2) format("woff2"); }
 
+$primary: #182430;
+
+$background: darken($primary, 5%);
+$background-container: lighten($primary, 10%);
+
 * {
-  margin: 50px;
-  padding: 0px;
+    margin: 10px;
+    padding: 0px;
+}
+
+a {
+    color: lighten($primary, 40%);
+    text-decoration: none;
+    &:hover { color: lighten($primary, 60%); }
 }
 
 body {
-   font-size: 18px;
-   font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif;
-   text-shadow: 2px 2px 2px rgb(0, 0, 0);
-   text-align: center;
-   line-height: 18px;
-   color: rgb(255, 255, 255);
-   background-color:  rgb(24, 24, 27);
-   margin: 0px;
+    font-size: 13px;
+    font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif;
+    text-shadow: 2px 2px 2px rgb(0, 0, 0);
+    text-align: center;
+    // line-height: 18px;
+    color: rgb(255, 255, 255);
+    background-color: $background;
+    margin: 0px;
+
+    /*
+    .header-container {
+
+    }
+    */
+
+    .main-container {
+        display: flex;
+
+        .list {
+            text-align: left;
+        }
+
+        .content {
+            background-color: $background-container;
+            border: 1px solid white;
+            padding: 10px;
+        }
+    }
+
+    .footer-container {
+        font-size: 10px;
+    }
 }
 
 img {
-  border: 0px;
+    border: 0px;
 }
\ No newline at end of file