Производительность верстки (#16)

* Производительность верстки * Добавляет data-test * Удаляет архив сборки
htmlacademy-adaptive · Dec 6, 2024 · 9a96f3c · 9a96f3c
1 parent e315864
commit 9a96f3c
Show file tree

Hide file tree

Showing 23 changed files with 149 additions and 60 deletions.
diff --git a/source/catalog.html b/source/catalog.html
@@ -11,6 +11,8 @@
   <link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="favicons/180.png">
   <link rel="manifest" href="manifest.webmanifest">
+  <link rel="preload" href="fonts/lato/Lato-Regular.woff2" as="font" crossorigin="anonymous">
+  <link rel="preload" href="fonts/oswald/oswaldregular.woff2" as="font" crossorigin="anonymous">
 </head>
 
 <body class="page__body">
@@ -43,7 +45,7 @@
     </nav>
   </header>
   <main class="main">
-    <section class="catalog">
+    <section class="catalog" data-test="catalog">
       <div class="catalog__wrapper wrapper">
         <h1 class="catalog__title">Каталог продукции</h1>
         <div class="catalog__list-wrapper">
@@ -241,7 +243,7 @@ <h2 class="card-more__title">Показать еще 100500 товаров</h2>
         </div>
       </div>
     </section>
-    <section class="sub-product wrapper">
+    <section class="sub-product wrapper" data-test="additional">
       <h2 class="sub-product__title accent-line">Дополнительные товары</h2>
       <div class="sub-product__container">
         <ul class="sub-product__list">

diff --git a/source/images/logo-cat-energy-text.svg b/source/images/logo-cat-energy-text.svg
diff --git a/source/index.html b/source/index.html
@@ -11,10 +11,12 @@
   <link rel="icon" href="favicons/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="favicons/180.png">
   <link rel="manifest" href="manifest.webmanifest">
+  <link rel="preload" href="fonts/lato/Lato-Regular.woff2" as="font" crossorigin="anonymous">
+  <link rel="preload" href="fonts/oswald/oswaldregular.woff2" as="font" crossorigin="anonymous">
 </head>
 
 <body class="page__body">
-  <header class="header wrapper">
+  <header class="header wrapper" data-test="header">
     <a class="header__logo-image logo-image" href="index.html">
       <picture>
         <source type="image/svg+xml" media="(min-width: 1440px)" srcset="images/logo-cat-energy-img-desktop.svg" width="70" height="59">
@@ -43,7 +45,7 @@
     </nav>
   </header>
   <main class="main">
-    <section class="intro">
+    <section class="intro" data-test="hero">
       <div class="intro__wrapper wrapper">
         <h1 class="intro__title">Функциональное питание для котов</h1>
         <p class="intro__slogan">Занялся собой? Займись котом!</p>
@@ -58,7 +60,7 @@ <h1 class="intro__title">Функциональное питание для ко
         <a class="intro__button button button--primary" href="#">Подобрать программу</a>
       </div>
     </section>
-    <section class="programs">
+    <section class="programs" data-test="programs">
       <h2 class="visually-hidden">Программы питания</h2>
       <ul class="programs__list wrapper">
         <li class="programs__item">
@@ -73,7 +75,7 @@ <h3 class="programs__title programs__title--pro">Набор массы</h3>
         </li>
       </ul>
     </section>
-    <section class="advantages wrapper">
+    <section class="advantages wrapper" data-test="features">
       <h2 class="advantages__title">Как это работает</h2>
       <ul class="advantages__list">
         <li class="advantages__item">
@@ -90,7 +92,7 @@ <h2 class="advantages__title">Как это работает</h2>
         </li>
       </ul>
     </section>
-    <section class="stats">
+    <section class="stats" data-test="proof">
       <div class="stats__wrapper wrapper">
         <h2 class="stats__title">Живой пример</h2>
         <p class="stats__description">Борис сбросил 5&nbsp;кг за 2 месяца, просто заменив свой обычный корм на Cat Energy Slim. Отличный результат без&nbsp;изнуряющих тренировок! При этом он не менял своих привычек и по-прежнему спит по 16 часов в день.</p>
@@ -129,7 +131,7 @@ <h2 class="stats__title">Живой пример</h2>
         </div>
       </div>
     </section>
-    <section class="address">
+    <section class="address" data-test="contacts">
       <div class="address__wrapper wrapper">
         <h2 class="address__title">Приглашаем к&nbsp;сотрудничеству дилеров!</h2>
         <div class="address__description-wrapper">
@@ -150,7 +152,7 @@ <h2 class="address__title">Приглашаем к&nbsp;сотрудничест
       </div>
     </section>
   </main>
-  <footer class="footer">
+  <footer class="footer" data-test="footer">
     <div class="footer__wrapper wrapper">
       <a class="footer__logo-text logo-text" href="index.html">
         <img class="logo-text_picture" src="images/logo-cat-energy-text.svg" alt="Текстовый вариант логотипа Cat Energy" width="101" height="18">

diff --git a/source/styles/blocks/accent-line.scss b/source/styles/blocks/accent-line.scss
@@ -20,7 +20,15 @@
 @media (min-width: $tablet-width) {
   .accent-line {
     &::before {
-      top: 16px;
+      top: 14px;
+    }
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .accent-line {
+    &::before {
+      top: 18px;
     }
   }
 }
diff --git a/source/styles/blocks/address.scss b/source/styles/blocks/address.scss
@@ -57,7 +57,7 @@
 @media (min-width: $desktop-width) {
   .address {
     display: grid;
-    grid-template-rows: 95px auto 95px;
+    grid-template-rows: 95px auto 106px;
     grid-template-columns: auto 565px 90px 565px auto;
     min-width: 100%;
     min-height: 400px;

diff --git a/source/styles/blocks/advantages.scss b/source/styles/blocks/advantages.scss
@@ -61,7 +61,7 @@
 
 @media (min-width: $tablet-width) {
   .advantages {
-    margin-bottom: 47px;
+    margin-bottom: 46px;
   }
 
   .advantages__title {
@@ -73,7 +73,7 @@
   .advantages__list {
     display: flex;
     flex-flow: wrap;
-    gap: 37px 135px;
+    gap: 37px 134px;
     margin: 0 auto;
   }
 
@@ -117,6 +117,10 @@
   }
 
   .advantages__list {
-    column-gap: 73px;
+    column-gap: 80px;
+  }
+
+  .advantages__item {
+    width: 245px;
   }
 }
diff --git a/source/styles/blocks/card-more.scss b/source/styles/blocks/card-more.scss
@@ -59,14 +59,15 @@
       background-size: 60px 60px;
       width: 60px;
       height: 60px;
-      margin-bottom: 50px;
+      margin-bottom: 49px;
     }
   }
 
   .card-more__text {
     font-size: 16px;
     line-height: calc(18/16);
     padding: 0 30px;
+    margin-top: 0;
   }
 
   .card-more__button {
@@ -75,12 +76,16 @@
 }
 
 @media (min-width: $desktop-width) {
+  .card-more__wrapper {
+    padding-bottom: 39px;
+  }
+
   .card-more__title {
     padding: 0 10px;
     margin-bottom: 26px;
 
     &::before {
-      margin-bottom: 40px;
+      margin-bottom: 38px;
     }
   }
 

diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss
@@ -14,8 +14,8 @@
 .card__wrapper {
   display: grid;
   grid-template-columns: repeat(2, 50%);
-  row-gap: 14px;
-  padding: 20px 0 25px;
+  row-gap: 5px;
+  padding: 20px 0 24px;
 }
 
 .card__link {
@@ -57,7 +57,7 @@
   display: grid;
   grid-template-columns: repeat(2, 50%);
   font-size: 12px;
-  line-height: calc(16/12);
+  line-height: 1;
   margin: 0;
 }
 
@@ -67,6 +67,7 @@
 
 .card__button {
   grid-column: -1 / 1;
+  margin-top: 12px;
 }
 
 @media (min-width: $tablet-width) {
@@ -146,10 +147,21 @@
   }
 
   .card__title {
+    margin-top: 0;
     margin-bottom: 13px;
   }
 
   .card__link {
     width: 169px;
   }
+
+  .card__characteristic {
+    row-gap: 7px;
+  }
+
+  .card__characteristic-term {
+    &::after {
+      margin-top: 5px;
+    }
+  }
 }
diff --git a/source/styles/blocks/catalog.scss b/source/styles/blocks/catalog.scss
@@ -1,5 +1,5 @@
 .catalog {
-  margin-bottom: 25px;
+  margin-bottom: 24px;
 }
 
 .catalog__wrapper {
@@ -30,6 +30,7 @@
   .catalog {
     width: calc($tablet-width - 60px);
     margin: 0 auto 74px;
+    padding-top: 26px;
   }
 
   .catalog__wrapper {
@@ -62,6 +63,7 @@
   .catalog {
     width: calc($desktop-width - 220px);
     margin: 0 auto 71px;
+    padding-top: 45px;
   }
 
   .catalog__list-wrapper {
@@ -72,6 +74,6 @@
 
   .catalog__list {
     grid-template-columns: repeat(4, 245px);
-    gap: 80px;
+    gap: 63px 80px;
   }
 }
diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss
@@ -51,3 +51,9 @@
     margin-top: 0;
   }
 }
+
+@media (min-width: $desktop-width) {
+  .footer {
+    min-height: 169px;
+  }
+}
diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss
@@ -23,7 +23,7 @@
 
 @media (min-width: $tablet-width) {
   .header {
-    padding: 35 0 40px;
+    padding: 18px 0 31px;
     flex-wrap: nowrap;
   }
 
@@ -38,7 +38,7 @@
     min-height: 59px;
     padding-top: 50px;
     padding-bottom: 0;
-    margin-bottom: 29px;
+    margin-bottom: 24px;
   }
 
   .header__logo-image {

diff --git a/source/styles/blocks/input.scss b/source/styles/blocks/input.scss
@@ -5,7 +5,7 @@
   line-height: calc(3/2);
   color: $text-color-base;
   height: 56px;
-  padding: 10px;
+  padding: 12px;
   box-sizing: border-box;
   border: 1px solid $color-accent-7;