From 9cc2b37a2ef3853ea433c6c756eef168db50212e Mon Sep 17 00:00:00 2001
From: Lennart <18233294+lennart-k@users.noreply.github.com>
Date: Sun, 10 Nov 2024 13:32:13 +0100
Subject: [PATCH] frontend: styling

---
 crates/frontend/public/assets/style.css       |  4 ++
 .../public/templates/layouts/default.html     |  5 ---
 .../frontend/public/templates/pages/user.html | 41 +++++++++++++------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 9d23ceb..2876913 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -1,3 +1,7 @@
 body {
   font-family: sans-serif;
 }
+
+* {
+  box-sizing: border-box;
+}
diff --git a/crates/frontend/public/templates/layouts/default.html b/crates/frontend/public/templates/layouts/default.html
index 0c6bec1..4467557 100644
--- a/crates/frontend/public/templates/layouts/default.html
+++ b/crates/frontend/public/templates/layouts/default.html
@@ -6,11 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}RustiCal{% endblock %}</title>
   <link rel="stylesheet" href="/frontend/assets/style.css" />
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-  </style>
   {% block imports %}{% endblock %}
 </head>
 
diff --git a/crates/frontend/public/templates/pages/user.html b/crates/frontend/public/templates/pages/user.html
index 23368cc..33f7545 100644
--- a/crates/frontend/public/templates/pages/user.html
+++ b/crates/frontend/public/templates/pages/user.html
@@ -7,27 +7,42 @@
 <style>
 li.collection-list-item {
   list-style: none;
-  display: grid;
-  margin: 12px;
-  min-height: 80px;
-  background: #EEE;
-  padding: 8px;
-  border-radius: 12px;
-  grid-template-areas:
-    "title color-chip"
-    "description color-chip";
-  grid-template-rows: auto auto;
-  grid-template-columns: auto 50px;
-  padding: 0;
+  display: contents;
 
   a {
-    display: contents;
+    background: #EEE;
+    display: grid;
+    margin: 12px;
+    min-height: 80px;
+    border-radius: 12px;
+    grid-template-areas:
+      ". color-chip"
+      "title color-chip"
+      "description color-chip"
+      ". color-chip";
+    grid-template-rows: 12px auto auto 12px;
+    grid-template-columns: auto 50px;
+    color: inherit;
+    text-decoration: none;
+    padding-left: 12px;
+
+    .title {
+      grid-area: title;
+    }
+
+    .description {
+      grid-area: description;
+    }
 
     .color-chip {
       background: var(--color);
       grid-area: color-chip;
       border-radius: 0 12px 12px 0;
     }
+
+    &:hover {
+      background: #DDD;
+    }
   }
 }
 </style>