task completed

readme.md

@@ -9,7 +9,7 @@ Create HTML page with catalog. Develop semantic page structure as shown on [the
 - add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card
 - nav links color is not `black` any more (nav links should have `#060b35` color)
 - add class `is-active` to the first link (`Apple`) in navigation
-- use `<main>` tag for cards container 
+- use `<main>` tag for cards container
 - use grid for cards with different number of columns:
   - 1 for the smaller screens
   - 2 starting at `488px`
@@ -32,8 +32,8 @@ Make all the changes smooth on hover (during 300ms):
 ## Checklist
 
 ❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
-- [DEMO LINK](https://<your_account>.github.io/layout_catalog/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_catalog/report/html_report/)
+- [DEMO LINK](https://staner1.github.io/layout_catalog/)
+- [TEST REPORT LINK](https://staner1.github.io/layout_catalog/report/html_report/)
 
 ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
 

src/styles/blocks/card.scss

@@ -24,41 +24,43 @@
     gap: 4px;
 
     &-title {
-      font-size: 12px;
+      font-size: $font-size-standart;
       font-weight: 500;
       line-height: 18px;
+      color: $black;
     }
 
     &-subtitle {
-      font-size: 10px;
+      font-size: $font-size-small;
       color: $gray;
       font-weight: 400;
       line-height: 14px;
     }
   }
 
   &__review {
-    width: 100%;
+    width: $width-100-perc;
     margin-bottom: 24px;
     display: flex;
     justify-content: space-between;
 
     &-label {
-      font-size: 10px;
+      font-size: $font-size-small;
       line-height: 16px;
+      color: $black;
     }
   }
 
   &__price {
     margin-bottom: 16px;
-    width: 100%;
+    width: $width-100-perc;
     height: 18px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     &-label {
-      font-size: 12px;
+      font-size: $font-size-standart;
       font-weight: 400;
       color: $gray;
     }
@@ -67,13 +69,14 @@
       font-size: 16px;
       font-weight: 700;
       line-height: 18px;
+      color: $black;
     }
   }
 
   &__button {
     text-decoration: none;
 
-    width: 100%;
+    width: $width-100-perc;
     height: 40px;
     background-color: $turquoise;
     border-radius: 5px;

src/styles/blocks/main.scss

@@ -3,18 +3,7 @@
   display: grid;
   justify-content: center;
 
-  grid-template-columns: repeat(1, 200px);
-  gap: 46px 48px;
-
-  @media (min-width: 488px) {
-    grid-template-columns: repeat(2, 200px);
-  }
+  @include content-grid-columns;
 
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, 200px);
-  }
-
-  @media (min-width: 1024px) {
-    grid-template-columns: repeat(4, 200px);
-  }
+  gap: 46px 48px;
 }

src/styles/blocks/modifiers.scss

@@ -10,7 +10,7 @@
   content: '';
   position: absolute;
   bottom: 0;
-  width: 100%;
+  width: $width-100-perc;
   height: 4px;
   background-color: $turquoise;
   border-radius: 8px;
@@ -20,6 +20,10 @@
   transform: scale(1.2);
 }
 
+.card:hover .card__text-title {
+  color: $blue-black;
+}
+
 .stars--4 .stars__star:nth-child(-n + 4) {
   background-image: url(../images/star-active.svg);
   background-repeat: no-repeat;

src/styles/blocks/nav.scss

@@ -7,12 +7,11 @@
   }
 
   &__item {
-    position: relative;
     text-decoration: none;
     list-style-type: none;
     margin-right: 20px;
 
-    font-size: 12px;
+    font-size: $font-size-standart;
     font-weight: 500;
 
     &:last-child {

src/styles/index.scss

@@ -1,3 +1,4 @@
+@import './utils/mixins';
 @import './utils/variables';
 @import './blocks/modifiers';
 @import './blocks/page';

src/styles/utils/mixins.scss

@@ -0,0 +1,33 @@
+@mixin small() {
+  @media (min-width: 488px) {
+    @content;
+  }
+}
+
+@mixin medium() {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin large() {
+  @media (min-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin content-grid-columns() {
+  grid-template-columns: repeat(1, 200px);
+
+  @include small {
+    grid-template-columns: repeat(2, 200px);
+  }
+
+  @include medium {
+    grid-template-columns: repeat(3, 200px);
+  }
+
+  @include large {
+    grid-template-columns: repeat(4, 200px);
+  }
+}

src/styles/utils/variables.scss

@@ -4,3 +4,7 @@ $black: #060b35;
 $gray-border: #f3f3f3;
 $gray: #616070;
 $white: #fff;
+$blue-black: #34568b;
+$font-size-standart: 12px;
+$font-size-small: 10px;
+$width-100-perc: 100%;