Merge pull request #56 from ViktorSvertoka/favcontainerscroll

src/css/layout/01-header.css

@@ -7,6 +7,15 @@
   padding: 20px 0 80px;
 }
 
+.header__logo {
+  transition: all var(--transition-dur-and-func);
+}
+
+.header__logo:hover,
+.header__logo:focus {
+  transform: scale(1.1);
+}
+
 @media screen and (min-width: 768px) {
   .header-container {
     padding: 24px 0 100px;
@@ -43,6 +52,7 @@
   line-height: 1.5em;
   border-radius: 30px;
   color: var(--color-white);
+  transition: all var(--transition-dur-and-func);
 }
 
 .active {
@@ -82,12 +92,14 @@
     padding: 8px;
     border: 1px solid rgba(36, 36, 36, 0.1);
     border-radius: 10px;
+    transition: all var(--transition-dur-and-func);
   }
 }
 
 @media screen and (min-width: 768px) {
   .header__socials-icon {
     fill: rgba(36, 36, 36, 0.8);
+    transition: all var(--transition-dur-and-func);
   }
 }
 

src/css/layout/02-hero.css

@@ -22,6 +22,7 @@
 
 @media screen and (min-width: 1440px) {
   .hero__pic {
+    cursor: initial;
     position: absolute;
     display: inline-flex;
     top: 12px;
@@ -33,6 +34,7 @@
 }
 
 .hero__icon-title {
+  cursor: pointer;
   position: relative;
   display: flex;
   align-items: flex-start;

src/css/layout/03-exercises.css

@@ -20,7 +20,8 @@
 .filters__item-card:hover,
 .filters__item:hover {
   border-radius: 15px;
-  box-shadow: 2px 2px #777;
+  box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.25),
+    10px 5px 5px rgba(0, 0, 0, 0.22);
 }
 @media screen and (max-width: 767px) {
   .filters__item,
@@ -77,6 +78,8 @@
   align-items: center;
 }
 .exersices__title {
+  display: flex;
+  gap: 8px;
   margin-bottom: 20px;
   font-style: normal;
   font-weight: 400;
@@ -85,6 +88,7 @@
   letter-spacing: -0.56px;
   color: var(--color-black);
 }
+
 @media screen and (min-width: 768px) {
   .exersices__title {
     font-size: 44px;
@@ -94,6 +98,35 @@
   }
 }
 
+.exersices__text {
+  margin-top: 9px;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1em;
+  letter-spacing: -0.4px;
+  color: rgba(36, 36, 36, 0.5);
+}
+
+.exersices__text::first-letter {
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 768px) {
+  .exersices__text {
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 1.3em;
+    letter-spacing: -0.48px;
+    color: rgba(36, 36, 36, 0.5);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .exersices__text {
+    margin-top: 16px;
+  }
+}
+
 .exersices__search-btn-wrap {
   display: flex;
   flex-direction: column;
@@ -129,6 +162,7 @@
   line-height: 1.42em;
   background-color: var(--color-white);
   border-radius: 30px;
+  transition: all var(--transition-dur-and-func);
 }
 
 @media screen and (min-width: 768px) {
@@ -158,6 +192,12 @@
   }
 }
 
+.search__input:hover,
+.search__input:focus {
+  outline: none;
+  border-color: var(--color-black);
+}
+
 .search__button {
   position: absolute;
   top: 50%;
@@ -281,6 +321,12 @@
   filter: brightness(0.5);
   border-radius: 12px;
 }
+
+.filters__img-first:hover,
+.filters__img-first:focus {
+  filter: brightness(0.8);
+}
+
 .filters__wrapper-first {
   position: absolute;
   top: 50%;
@@ -413,7 +459,7 @@
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
-  line-height: 1;
+  line-height: 1.5;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -474,6 +520,7 @@
   }
 }
 .quote__container {
+  cursor: initial;
   position: relative;
   padding: 20px 20px 20px 72px;
   width: 100%;
@@ -573,7 +620,7 @@
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  filter: brightness(0.5);
+  filter: brightness(0.6);
   width: 100%;
   height: 242px;
 }
@@ -657,6 +704,11 @@
   }
 }
 
+.aside__img:hover,
+.aside__img:focus {
+  filter: brightness(0.8);
+}
+
 /* BMI link styles */
 
 .aside__nail {
@@ -687,6 +739,7 @@
 
 /* White Card */
 .aside__white-card {
+  cursor: initial;
   position: relative;
   width: 100%;
   min-height: 201px;

src/css/layout/04-footer.css

@@ -192,6 +192,7 @@
   background-color: var(--color-black);
 
   color: rgba(244, 244, 244, 0.6);
+  transition: all var(--transition-dur-and-func);
 }
 
 .subscribe__form-input:focus {

src/css/layout/07-modal-team.css

@@ -102,6 +102,7 @@
 }
 
 .team__item {
+  cursor: initial;
   border-radius: 5px;
   border-radius: 10px;
   padding-bottom: 5px;

src/css/layout/10-favorites.css

@@ -178,6 +178,7 @@
 }
 
 .img-card__container {
+  cursor: initial;
   border-radius: 20px;
   margin: 0 auto;
   background: linear-gradient(
@@ -274,6 +275,7 @@
 }
 
 .favorite__white-card {
+  cursor: initial;
   min-height: 119px;
   padding: 20px;
   border-radius: 20px;
@@ -346,10 +348,6 @@
   }
 }
 
-/* .favorites__container {
-  border: 1px solid green;
-} */
-
 /* Favorites section card styles */
 
 .favorites__list {
@@ -362,35 +360,75 @@
   .favorites__list {
     flex-direction: row;
     flex-wrap: wrap;
+
     justify-content: space-between;
     gap: 14px;
     row-gap: 32px;
   }
 }
 
+@media screen and (min-width: 1440px) {
+  .favorites__list {
+    align-items: start;
+    max-height: none;
+    overflow-y: auto;
+    gap: 15px;
+    row-gap: 32px;
+  }
+
+  .scrollable {
+    max-height: 516px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(36, 36, 36, 0.1);
+    border-radius: 12px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-black);
+    border-radius: 12px;
+    margin-right: 16px;
+  }
+}
+
 .fav-filters__item-card {
-  /* border: 1px solid red; */
   width: 100%;
   padding: 16px;
   border-radius: 15px;
   background-color: var(--color-white-secondary);
+  cursor: initial;
 }
 
 @media screen and (min-width: 768px) {
   .fav-filters__item-card {
-    width: 344px;
+    width: 342px;
   }
 }
 
 @media screen and (min-width: 1440px) {
   .fav-filters__item-card {
-    width: 415px;
+    width: 403px;
+    height: 147px;
+  }
+
+  .favorites__list li:nth-child(2n) {
+    margin-right: 16px;
+  }
+
+  .favorites__list li:last-child {
+    margin-bottom: 30px;
   }
 }
 .fav-filters__item-card:hover,
 .fav-filters__item-card:focus {
   border-radius: 15px;
-  box-shadow: 2px 2px #777;
+  box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.25),
+    10px 5px 5px rgba(0, 0, 0, 0.22);
 }
 .fav-card__badge {
   display: inline-block;
@@ -405,15 +443,13 @@
 }
 
 .fav-card__block-btn {
-  /* border: 1px solid green; */
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 25px;
 }
 
 .fav-card__trash-btn-wrap {
-  /* border: 1px solid blueviolet; */
   width: 100px;
   display: flex;
   align-items: center;
@@ -471,7 +507,6 @@
 }
 
 .fav-card__title-wrap {
-  /* border: 1px solid rebeccapurple; */
   display: flex;
   align-items: center;
   gap: 16px;
@@ -481,7 +516,7 @@
 .fav-card__title {
   font-size: 20px;
   font-weight: 400;
-  line-height: normal;
+  line-height: 1.5;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/css/utils/reset.css

@@ -19,9 +19,13 @@ ol {
   padding: 0;
   list-style: none;
 }
-li {
+
+li,
+button,
+input {
   cursor: pointer;
 }
+
 a {
   color: currentColor;
   text-decoration: none;