rework on recommendation etojeDenys

mate-academy · Dec 9, 2024 · 03cfe83 · 03cfe83
1 parent b2384d2
commit 03cfe83
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 105 deletions.
diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -25,33 +25,42 @@ header {
   padding: 0 50px;
 }
 
-.nav__link {
-  color: #060b35;
-  font-size: 12px;
-  text-decoration: none;
-  display: block;
-  line-height: 60px;
-}
+.nav {
+  &__link {
+    color: #060b35;
+    font-size: 12px;
+    text-decoration: none;
+    display: block;
+    line-height: 60px;
+  }
 
-.nav__list {
-  flex-wrap: nowrap;
-  list-style-type: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
+  &__list {
+    flex-wrap: nowrap;
+    list-style-type: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
 
-.nav__item {
-  justify-content: center;
-  align-items: center;
-  font-weight: 500;
-  font-size: 12px;
-  text-transform: uppercase;
-  margin-right: 20px;
-}
+  &__item {
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    font-size: 12px;
+    text-transform: uppercase;
+    margin-right: 20px;
+  }
+  &__item:last-child {
+    margin-right: 0;
+  }
+
+  &-hover {
+    color: #00acdc;
+  }
 
-.nav__item:last-child {
-  margin-right: 0;
+  &__link:hover {
+    color: #00acdc;
+  }
 }
 
 .img {
@@ -74,11 +83,3 @@ header {
   bottom: 0;
   left: 0;
 }
-
-.nav-hover {
-  color: #00acdc;
-}
-
-.nav__link:hover {
-  color: #00acdc;
-}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -20,75 +20,88 @@ main {
   &:hover {
     transform: scale(1.2);
   }
-}
 
-.card__img {
-  width: 160px;
-  height: 134px;
-  margin: 32px 19px 36px;
-}
+  &__img {
+    width: 160px;
+    height: 134px;
+    margin: 32px 19px 36px;
+  }
 
-.card__title {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 150%;
-  color: #060b35;
-  margin: 0 16px 4px;
-}
+  &__title {
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 150%;
+    color: #060b35;
+    margin: 0 16px 4px;
+  }
 
-.card:hover .card__title {
-  color: var(--blue-accent);
-}
+  &:hover .card__title {
+    color: var(--blue-accent);
+  }
 
-.card__code {
-  font-family: var(--font-family);
-  font-weight: 400px;
-  font-size: 10px;
-  line-height: 140%;
-  color: #616070;
-  margin-top: 4px;
-  margin-left: 16px;
-}
+  &__code {
+    font-family: var(--font-family);
+    font-weight: 400px;
+    font-size: 10px;
+    line-height: 140%;
+    color: #616070;
+    margin-top: 4px;
+    margin-left: 16px;
+  }
 
-.card__reviews {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 16px;
-}
+  &__reviews {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 16px;
+  }
 
-.card__reviews-text {
-  font-family: var(--font-family);
-  color: var(--main-accent);
-  text-align: right;
-  margin-top: 0;
-  margin-right: 16px;
-  font-size: 10px;
+  &__reviews-text {
+    font-family: var(--font-family);
+    color: var(--main-accent);
+    text-align: right;
+    margin-top: 0;
+    margin-right: 16px;
+    font-size: 10px;
 
-  font-weight: 400;
-  line-height: 140%;
-  margin-bottom: 26px;
-}
+    font-weight: 400;
+    line-height: 140%;
+    margin-bottom: 26px;
+  }
 
-.card__price {
-  font-family: var(--font-family);
-  display: flex;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 150%;
-  color: var(--secondary);
-  margin-left: 16px;
-  margin-bottom: 16px;
-}
+  &__price {
+    font-family: var(--font-family);
+    display: flex;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 150%;
+    color: var(--secondary);
+    margin-left: 16px;
+    margin-bottom: 16px;
+  }
 
-.card__price-value {
-  font-family: var(--font-family);
-  display: block;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 112%;
-  text-align: right;
-  margin-left: 85px;
-  color: var(--main-accent);
+  &__price-value {
+    font-family: var(--font-family);
+    display: block;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 112%;
+    text-align: right;
+    margin-left: 85px;
+    color: var(--main-accent);
+  }
+
+  &__button-buy:hover {
+    font-family: var(--font-family);
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+    border-radius: 5px;
+    border: 1px solid var(--blue-accent);
+    color: var(--blue-accent);
+    background-color: var(--white);
+  }
 }
 
 button {
@@ -117,16 +130,3 @@ button {
     background-color: var(--blue-accent);
   }
 }
-
-.card__button-buy:hover {
-  font-family: var(--font-family);
-  font-size: 14px;
-  line-height: 16px;
-  font-weight: 700;
-  text-transform: uppercase;
-  text-align: center;
-  border-radius: 5px;
-  border: 1px solid var(--blue-accent);
-  color: var(--blue-accent);
-  background-color: var(--white);
-}