Fix: fixed block spacing in index.html and simplified nth-child

mate-academy · Sep 25, 2024 · 6b00d93 · 6b00d93
1 parent 2d01f1d
commit 6b00d93
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -20,34 +20,39 @@
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="star stars--1">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="star stars--2">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="star stars--3">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="star stars--4">
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
       <div class="stars__star"></div>
     </div>
+
     <div class="star stars--5">
       <div class="stars__star"></div>
       <div class="stars__star"></div>

diff --git a/src/style.css b/src/style.css
@@ -20,22 +20,10 @@ body {
   margin-right: 0;
 }
 
-.stars--1 .stars__star:nth-child(-n + 1) {
-  background-image: url(images/star-active.svg);
-}
-
-.stars--2 .stars__star:nth-child(-n + 2) {
-  background-image: url(images/star-active.svg);
-}
-
-.stars--3 .stars__star:nth-child(-n + 3) {
-  background-image: url(images/star-active.svg);
-}
-
-.stars--4 .stars__star:nth-child(-n + 4) {
-  background-image: url(images/star-active.svg);
-}
-
+.stars--1 .stars__star:nth-child(-n + 1),
+.stars--2 .stars__star:nth-child(-n + 2),
+.stars--3 .stars__star:nth-child(-n + 3),
+.stars--4 .stars__star:nth-child(-n + 4),
 .stars--5 .stars__star:nth-child(-n + 5) {
   background-image: url(images/star-active.svg);
 }