From fd2dad8a2320303630a7c08faaf506fd8679a6fd Mon Sep 17 00:00:00 2001
From: Julie Sagan <saganjules@gmail.com>
Date: Thu, 21 Nov 2024 12:30:36 +0200
Subject: [PATCH] Reorganised code

---
 04-lection2/02-skeleton/index.html   |  4 ++--
 04-lection2/02-skeleton/skeleton.css | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/04-lection2/02-skeleton/index.html b/04-lection2/02-skeleton/index.html
index 07996b8..87cfa03 100644
--- a/04-lection2/02-skeleton/index.html
+++ b/04-lection2/02-skeleton/index.html
@@ -13,8 +13,8 @@
             <div class="skeleton__header">
                 <div class="skeleton__userpic"></div>
                 <div class="skeleton__user-value">
-                    <div class="skeleton__user-value-first"></div>
-                    <div class="skeleton__user-value-second"></div>
+                    <div class="skeleton__line skeleton__line--first"></div>
+                    <div class="skeleton__line skeleton__line--second"></div>
                 </div>
             </div>
 
diff --git a/04-lection2/02-skeleton/skeleton.css b/04-lection2/02-skeleton/skeleton.css
index 8006b38..8bae208 100644
--- a/04-lection2/02-skeleton/skeleton.css
+++ b/04-lection2/02-skeleton/skeleton.css
@@ -9,15 +9,13 @@
 
 .skeleton__header {
     display: flex;
-    justify-content: flex-start;
     align-items: center;
-    margin-bottom: 32px;
+    margin-bottom: 24px;
 }
 
 .skeleton__userpic {
     background-color: var(--grey-2);
     width: 64px;
-    height: auto;
     aspect-ratio: 1 / 1;
     border-radius: 50%;
     margin-right: 16px;
@@ -26,20 +24,22 @@
 .skeleton__user-value {
     display: flex;
     flex-direction: column;
-    width: 50vw;
+    flex-grow: 1;
+    width: 100%;
+    gap: 8px;
 }
 
-.skeleton__user-value-first {
+.skeleton__line {
     height: 20px;
-    width: 40%;
     background-color: var(--grey-2);
-    margin-bottom: 8px;
 }
 
-.skeleton__user-value-second {
-    height: 20px;
-    width: 60%;
-    background-color: var(--grey-2);
+.skeleton__line--first {
+    width: 30%;
+}
+
+.skeleton__line--second {
+    width: 50%;
 }
 
 .skeleton__body {