small style tweaks

scottmckendry · Nov 5, 2023 · 5fc6ef0 · 5fc6ef0
1 parent d754fec
commit 5fc6ef0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -68,20 +68,50 @@ header h1 {
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     flex: 0 1 300px;
-    min-width: 300px;
-    max-width: 600px;
+    min-width: 350px;
+    max-width: 650px;
+}
+
+hr {
+    border: 1px solid #eee;
 }
 
 .card-title {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
 }
 
 .card-title h2 {
     font-size: 18px;
     padding-left: 10px;
 }
 
+.card-person {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+}
+
+.card-person p {
+    margin: 2px;
+    text-align: right;
+}
+
+.card-services {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 10px 20px 10px;
+}
+
+.card-services p {
+    margin: 2px;
+    padding-left: 10px;
+}
+
 .action-buttons {
     display: flex;
     justify-content: space-around;

diff --git a/views/card.html b/views/card.html
@@ -3,17 +3,21 @@
         <i class="nf nf-md-dog_side"></i>
         <h2>{{ .Name }}</h2>
     </div>
-    <div class="card-subtitle">
-        <p>{{ .OwnerName }}</p>
+    <hr />
+    <div class="card-person">
+        <i class="nf nf-fa-user"></i>
+        <div class="details">
+            <p>{{ .OwnerName }}</p>
+            <p>{{ .Address }}</p>
+            <p>{{ .City }}</p>
+            <p>{{ .Email }}</p>
+        </div>
     </div>
-    <div class="address">
-        <p>{{ .Address }}</p>
-        <p>{{ .City }}</p>
-        <p>{{ .Email }}</p>
-    </div>
-    <div class="services">
+    <hr />
+    <div class="card-services">
+        <i class="nf nf-fa-shopping_cart"></i>
         <p>
-            <b>{{ .Quantity }}</b> X <b>{{ .Service }}</b> @
+            <b>{{ .Quantity }}</b> x <b>{{ .Service }}</b> @
             <b>${{ .Price }}</b>
         </p>
     </div>