From f8f721ffaca3bda5a050751a514e5a014498756c Mon Sep 17 00:00:00 2001
From: Annika Backstrom <annika@sixohthree.com>
Date: Sat, 25 May 2024 14:59:45 +0100
Subject: [PATCH] Create some real styles

---
 resources/sass/app.scss | 82 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 74 insertions(+), 8 deletions(-)

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 1244356..ddbb69c 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,22 +1,88 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+}
+
 body {
-    font-family: Helvetica, Arial, sans-serif;
-    background-color: hsl(100, 50%, 90%);
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
+    background-color: #335C67;
+}
+
+h1 {
+    color: #FFF3B0;
+    text-align: center;
 }
 
 .container {
     max-width: 40rem;
+    margin: 1em auto;
 }
 
 .bookmark {
-    padding: 1ex;
+    display: grid;
+    align-items: center;
+    gap: 0px 0px;
+    grid-template-areas:
+    "title title"
+    "href href"
+    "description description"
+    "date tags";
+
+    margin-bottom: 1em;
+    padding: 0;
+    border: 2px solid #540B0E;
+    background-color: #FFF3B0;
 
     &-title {
-        margin-top: 0;
+        margin: 0;
+        padding: 1ex;
+        background-color: #E09F3E;
+        grid-area: title;
+        font-weight: bold;
+    }
+
+    &-href,
+    &-description,
+    &-date,
+    &-tags {
+        padding: 1ex;
+        margin: 0;
+    }
+
+    &-href,
+    &-description,
+    &-date {
+        font-size: 0.9em;
+    }
+
+    &-href {
+        grid-area: href;
+    }
+
+    &-description {
+        grid-area: description;
+
+        > p {
+            border-left: 3px solid #9E2A2B;
+            margin: 0;
+            padding: 0.5ex 0 0.5ex 1ex;
+        }
+    }
+
+    &-date {
+        grid-area: date;
     }
 
     &-tags {
-        padding: 0;
-        margin: 1em 0;
+        font-size: 0.8em;
+        grid-area: tags;
+        text-align: right;
     }
 
     &-tag {
@@ -26,7 +92,7 @@ body {
         margin: 0 0 0.2ex 0;
 
         border-radius: 7px;
-        background-color: hsl(230, 50%, 50%);
-        color: #fff;
+        background-color: #9E2A2B;
+        color: #FFF3B0;
     }
 }