Reorganised code

js-tasks-ru · Nov 21, 2024 · fd2dad8 · fd2dad8
1 parent a87954b
commit fd2dad8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git 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
@@ -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 {