diff --git a/src/index.html b/src/index.html index 800b855adc..278467d811 100644 --- a/src/index.html +++ b/src/index.html @@ -9,53 +9,53 @@
- +
+
+
+
+
+
+
- +
+
+
+
+
+
+
- +
+
+
+
+
+
+
- +
+
+
+
+
+
+
- +
+
+
+
+
+
+
- +
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css index 93f1bbd5cb..3af91d7c98 100644 --- a/src/style.css +++ b/src/style.css @@ -2,87 +2,27 @@ body { margin: 0; } -/* .container { - margin: 32px 22px; - width: 80px; - height: 78px; -} */ - .stars { display: flex; margin: 0; - padding: 0; - width: 80px; - height: 12px; } .stars__star { background-image: url(images/star.svg); width: 16px; - height: 12px; - list-style: none; + height: 16px; + background-repeat: no-repeat; + background-position: center; } .stars__star:not(:last-child) { margin-right: 4px; } -.stars--1 li:nth-child(1) { - background-image: url(images/star-active.svg); -} - -.stars--2 li:nth-child(1) { - background-image: url(images/star-active.svg); -} - -.stars--2 li:nth-child(2) { - background-image: url(images/star-active.svg); -} - -.stars--3 li:nth-child(1) { - background-image: url(images/star-active.svg); -} - -.stars--3 li:nth-child(2) { - background-image: url(images/star-active.svg); -} - -.stars--3 li:nth-child(3) { - background-image: url(images/star-active.svg); -} - -.stars--4 li:nth-child(1) { - background-image: url(images/star-active.svg); -} - -.stars--4 li:nth-child(2) { - background-image: url(images/star-active.svg); -} - -.stars--4 li:nth-child(3) { - background-image: url(images/star-active.svg); -} - -.stars--4 li:nth-child(4) { - background-image: url(images/star-active.svg); -} - -.stars--5 li:nth-child(1) { - background-image: url(images/star-active.svg); -} - -.stars--5 li:nth-child(2) { - background-image: url(images/star-active.svg); -} - -.stars--5 li:nth-child(3) { - background-image: url(images/star-active.svg); -} - -.stars--5 li:nth-child(4) { - background-image: url(images/star-active.svg); -} - -.stars--5 li:nth-child(5) { +.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); }