From 3b4cbd8ae1a613e34072df89a7cf63eedf161fd4 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 19 Jul 2024 23:44:33 +0200
Subject: [PATCH] feat: styling cage selector

---
 src/assets/css/style.css | 13 +++++++++++--
 src/index.html           | 22 +++++++++++++---------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 0149ea5..e5e9550 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -118,16 +118,22 @@ label {
 
 .cage-selector{
     gap: 15px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .card {
     text-align: center;
     color: var(--text-two);
+    flex: 1 25%;
 }
+
+
+
 .card-photo {
     height: 200px;
-    width: 200px;
-    background-color: #ffffff;
+    min-width: 200px;
+    background-color: var(--background-one);
     box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
     border-radius: 8px;
     position: relative;
@@ -175,6 +181,9 @@ input[type="checkbox"]:checked:after {
 .form-measurements {
     max-height: 90%;
 }
+.form-measurements input {
+    width: 70%;
+}
 input.measurement {
     margin-top: 5%;
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 4e19f89..0ebe6a5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,17 +48,21 @@
                 <div class="card-photo">
                     <input type="checkbox" id="tiaki"/>
                     <form class="form-measurements">
-                        <input class="measurement" type="number" id="width">
-                        <label for="width">Breite</label>
-
-                        <input class="measurement" type="number" id="depth">
-                        <label for="depth">Tiefe</label>
-
-                        <input class="measurement" type="number" id="height">
-                        <label for="height">Höhe</label>
+                        <div class="input-measurement">
+                            <label for="width">Breite</label>
+                            <input class="measurement" type="number" id="width">
+                        </div>
+                        <div class="input-measurement">
+                            <label for="depth">Tiefe</label>
+                            <input class="measurement" type="number" id="depth">
+                        </div>
+                        <div class="input-measurement">
+                            <label for="height">Höhe</label>
+                            <input class="measurement" type="number" id="height">
+                        </div>
                     </form>
                 </div>
-                <label>Anderer Käfig</label>
+                <label>Käfigmaße</label>
             </div>
 
         </div>