From 0aba41a8080c4f6e23a23027341401479e859bbd Mon Sep 17 00:00:00 2001
From: Norbaev <timnrbv@gmail.com>
Date: Mon, 29 Jul 2024 17:28:35 +0500
Subject: [PATCH] =?UTF-8?q?=D0=90=D0=B2=D1=82=D0=BE=20=D0=B8=D1=81=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20scss=20?=
 =?UTF-8?q?=D1=81=20=D1=83=D1=87=D0=B5=D1=82=D0=BE=D0=BC=20=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=81=D1=82=D0=BE=D0=BC=D0=BD=D1=8B=D1=85=20=D0=BF=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D0=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/assets/css/mixins/text.scss       | 36 ++++----
 client/src/assets/css/module/app-footer.scss | 56 ++++++------
 client/src/assets/css/module/app.scss        |  8 +-
 client/src/assets/css/module/blog.scss       | 20 ++---
 client/src/assets/css/module/fiald.scss      | 12 +--
 client/src/assets/css/module/home.scss       | 95 ++++++++++----------
 client/src/assets/css/module/pagination.scss |  2 -
 client/src/assets/css/module/rubric.scss     | 16 ++--
 client/src/assets/css/module/song.scss       |  8 +-
 client/src/assets/css/module/tabs.scss       |  4 +-
 client/src/assets/css/module/team.scss       | 48 +++++-----
 11 files changed, 149 insertions(+), 156 deletions(-)

diff --git a/client/src/assets/css/mixins/text.scss b/client/src/assets/css/mixins/text.scss
index f0711ae..ab56620 100644
--- a/client/src/assets/css/mixins/text.scss
+++ b/client/src/assets/css/mixins/text.scss
@@ -34,6 +34,15 @@
 @define-mixin h1 {
   @mixin __p;
 
+  /* margin-top: 32px; */
+  margin-bottom: 1.5rem;
+  padding-bottom: 6px;
+
+  font-size: 100px;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--color-white);
+
   @mixin responsive-l {
     font-size: 84px;
   }
@@ -45,29 +54,11 @@
   @mixin responsive-s {
     font-size: 36px;
   }
-
-  /* margin-top: 32px; */
-  margin-bottom: 1.5rem;
-  padding-bottom: 6px;
-
-  font-size: 100px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--color-white);
 }
 
 @define-mixin h2 {
   @mixin __p;
 
-  @mixin responsive-l {
-    font-size: 40px;
-    line-height: 1.1;
-  }
-
-  @mixin responsive-m {
-    font-size: 32px;
-  }
-
   margin: 2.5rem 0;
   padding-bottom: 6px;
 
@@ -113,6 +104,15 @@
       color: var(--color-white);
     }
   }
+
+  @mixin responsive-l {
+    font-size: 40px;
+    line-height: 1.1;
+  }
+
+  @mixin responsive-m {
+    font-size: 32px;
+  }
 }
 
 @define-mixin h3 {
diff --git a/client/src/assets/css/module/app-footer.scss b/client/src/assets/css/module/app-footer.scss
index 1715548..c078662 100644
--- a/client/src/assets/css/module/app-footer.scss
+++ b/client/src/assets/css/module/app-footer.scss
@@ -9,11 +9,6 @@
   }
 
   &__question {
-    @mixin responsive-xs {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
     display: flex;
     gap: 10px;
     align-items: center;
@@ -22,6 +17,11 @@
     &-button {
       margin-left: auto;
     }
+
+    @mixin responsive-xs {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 
   &__bottom {
@@ -31,20 +31,6 @@
   }
 
   &__menu {
-    @mixin responsive-m {
-      grid-row-gap: 10px;
-      grid-template-columns: min-content min-content min-content;
-      grid-template-rows: min-content;
-
-      width: 100%;
-      margin-bottom: var(--space-between-block);
-    }
-
-    @mixin responsive-s {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
     display: grid;
     grid-gap: var(--space-between-block) var(--space-between-sections);
     grid-template-columns: var(--space-between-sections) var(--space-between-sections);
@@ -59,29 +45,43 @@
     &-link {
       font-size: 1.2rem;
     }
+
+    @mixin responsive-m {
+      grid-row-gap: 10px;
+      grid-template-columns: min-content min-content min-content;
+      grid-template-rows: min-content;
+
+      width: 100%;
+      margin-bottom: var(--space-between-block);
+    }
+
+    @mixin responsive-s {
+      display: flex;
+      flex-wrap: wrap;
+    }
   }
 
   &__social {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-between-block);
+
     @mixin responsive-m {
       grid-row-gap: 10px;
       margin-bottom: var(--space-between-block);
     }
-
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-between-block);
   }
 
   &__connection {
-    @mixin responsive-m {
-      align-items: flex-start;
-      width: 100%;
-    }
-
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: flex-end;
     justify-content: space-between;
+
+    @mixin responsive-m {
+      align-items: flex-start;
+      width: 100%;
+    }
   }
 }
diff --git a/client/src/assets/css/module/app.scss b/client/src/assets/css/module/app.scss
index 404c7ca..c185953 100644
--- a/client/src/assets/css/module/app.scss
+++ b/client/src/assets/css/module/app.scss
@@ -29,15 +29,15 @@
   }
 
   &__content {
-    @mixin responsive-l {
-      padding: 0 20px;
-    }
-
     max-width: var(--container);
     margin: 0 auto;
     padding: 0 50px;
 
     .m--indentation {
     }
+
+    @mixin responsive-l {
+      padding: 0 20px;
+    }
   }
 }
diff --git a/client/src/assets/css/module/blog.scss b/client/src/assets/css/module/blog.scss
index 936b73d..6dc3f78 100644
--- a/client/src/assets/css/module/blog.scss
+++ b/client/src/assets/css/module/blog.scss
@@ -15,29 +15,24 @@
     }
 
     &-btn {
+      margin-left: auto;
+
       @mixin responsive-xxs {
         width: 100%;
       }
-
-      margin-left: auto;
     }
   }
 
   &__content {
+    display: flex;
+    gap: 80px;
+
     @mixin responsive-m {
       flex-direction: column;
     }
-
-    display: flex;
-    gap: 80px;
   }
 
   &__cover {
-    @mixin responsive-m {
-      height: calc(var(--base-content-size) / 2);
-      max-height: none;
-    }
-
     position: relative;
     z-index: 2;
 
@@ -46,6 +41,11 @@
 
     background: url('./assets/img/bg/blog.svg') no-repeat center;
     background-size: cover;
+
+    @mixin responsive-m {
+      height: calc(var(--base-content-size) / 2);
+      max-height: none;
+    }
   }
 
   &__list {
diff --git a/client/src/assets/css/module/fiald.scss b/client/src/assets/css/module/fiald.scss
index fa4f9cc..392a98e 100644
--- a/client/src/assets/css/module/fiald.scss
+++ b/client/src/assets/css/module/fiald.scss
@@ -63,18 +63,10 @@
       font-size: 1rem;
       color: var(--color-white-opacity);
 
-      &:hover {
-        cursor: url('./assets/img/icon/cursor.svg'), auto;
-      }
-
       &::before {
         cursor: pointer;
         content: '';
         user-select: none;
-        user-select: none;
-        user-select: none;
-        user-select: none;
-        user-select: none;
 
         position: absolute;
         left: 0;
@@ -110,6 +102,10 @@
 
         transition: all 0.3s ease;
       }
+
+      &:hover {
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      }
     }
 
     &-input {
diff --git a/client/src/assets/css/module/home.scss b/client/src/assets/css/module/home.scss
index 15ab396..c6f9d53 100644
--- a/client/src/assets/css/module/home.scss
+++ b/client/src/assets/css/module/home.scss
@@ -65,10 +65,6 @@
   }
 
   &__subtitle {
-    @mixin responsive-l {
-      padding: 0 20px;
-    }
-
     max-width: 600px;
     margin: 0 auto;
     text-align: center;
@@ -106,6 +102,10 @@
     span {
       font-weight: 700;
     }
+
+    @mixin responsive-l {
+      padding: 0 20px;
+    }
   }
 
   &__title {
@@ -123,7 +123,6 @@
       var(--color-white) 106.11%
     );
     background-clip: text;
-    background-clip: text;
 
     span {
       color: var(--color-black);
@@ -148,31 +147,22 @@
   }
 
   &__description {
-    @mixin responsive-m {
-      gap: var(--space-between-block);
-    }
-
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 
     margin-top: calc(var(--space-between-sections) / 2);
     margin-bottom: var(--space-between-sections);
+
+    @mixin responsive-m {
+      gap: var(--space-between-block);
+    }
   }
 
   &__info {
-    @mixin responsive-m {
-      width: 100%;
-    }
-
     width: 60%;
 
     &--item {
-      @mixin responsive-s {
-        flex-direction: column;
-        gap: 10px;
-      }
-
       display: flex;
       justify-content: space-between;
 
@@ -185,13 +175,6 @@
         align-items: end;
 
         &::before {
-          @mixin responsive-s {
-            width: 80px;
-            height: 80px;
-            margin-right: auto;
-            background-size: contain;
-          }
-
           content: '';
 
           display: block;
@@ -200,10 +183,21 @@
           height: 130px;
 
           background: url('./assets/img/icon/circleGradient.svg') no-repeat center;
+
+          @mixin responsive-s {
+            width: 80px;
+            height: 80px;
+            margin-right: auto;
+            background-size: contain;
+          }
         }
       }
 
       span {
+        width: 57%;
+        font-weight: 400;
+        color: var(--color-white);
+
         @mixin responsive-m {
           width: 75%;
         }
@@ -211,35 +205,23 @@
         @mixin responsive-s {
           width: 100%;
         }
-
-        width: 57%;
-        font-weight: 400;
-        color: var(--color-white);
       }
+
+      @mixin responsive-s {
+        flex-direction: column;
+        gap: 10px;
+      }
+    }
+
+    @mixin responsive-m {
+      width: 100%;
     }
   }
 
   &__content {
-    @mixin responsive-m {
-      display: flex;
-      flex-wrap: wrap;
-      gap: calc(var(--space-between-block) / 2);
-      align-items: flex-start;
-
-      max-width: none;
-    }
-
     max-width: 360px;
 
     &--item {
-      @mixin responsive-m {
-        width: calc((100% - var(--space-between-block)) / 3);
-      }
-
-      @mixin responsive-s {
-        width: 100%;
-      }
-
       position: relative;
       z-index: 2;
 
@@ -283,6 +265,23 @@
         background-image: var(--linear-gradient);
         background-clip: text;
       }
+
+      @mixin responsive-m {
+        width: calc((100% - var(--space-between-block)) / 3);
+      }
+
+      @mixin responsive-s {
+        width: 100%;
+      }
+    }
+
+    @mixin responsive-m {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--space-between-block) / 2);
+      align-items: flex-start;
+
+      max-width: none;
     }
   }
 
@@ -318,11 +317,11 @@
     }
 
     &--description {
+      max-width: 45%;
+
       @mixin responsive-xs {
         max-width: 100%;
       }
-
-      max-width: 45%;
     }
 
     &--btns {
diff --git a/client/src/assets/css/module/pagination.scss b/client/src/assets/css/module/pagination.scss
index 6ab0b0d..2b972b8 100644
--- a/client/src/assets/css/module/pagination.scss
+++ b/client/src/assets/css/module/pagination.scss
@@ -30,10 +30,8 @@
 
     &::after {
       content: '';
-
       position: absolute;
       inset: 0;
-
       margin: 5px;
     }
 
diff --git a/client/src/assets/css/module/rubric.scss b/client/src/assets/css/module/rubric.scss
index b673a22..f376cb3 100644
--- a/client/src/assets/css/module/rubric.scss
+++ b/client/src/assets/css/module/rubric.scss
@@ -14,10 +14,6 @@
     }
 
     &__description{
-      @mixin responsive-xxs {
-        max-width: none;
-      }
-
       max-width: 60%;
       margin-bottom: 2.5rem;
 
@@ -26,6 +22,10 @@
         max-width: 50%;
         margin-bottom: 0;
       }
+
+      @mixin responsive-xxs {
+        max-width: none;
+      }
     }
 
     &__link{
@@ -64,10 +64,6 @@
 
       padding: 20px 0;
 
-      &:hover{
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-      }
-
       &::after{
         content: '';
 
@@ -80,6 +76,10 @@
         background: #000;
         background: var(--linear-gradient);
       }
+
+      &:hover{
+        cursor: url("./assets/img/icon/cursor.svg"), auto;
+      }
     }
 
     &__title{
diff --git a/client/src/assets/css/module/song.scss b/client/src/assets/css/module/song.scss
index 123387c..9db8f5c 100644
--- a/client/src/assets/css/module/song.scss
+++ b/client/src/assets/css/module/song.scss
@@ -10,10 +10,6 @@
     }
 
     &-item {
-        @mixin responsive-m {
-            width: 100%;
-        }
-
         position: relative;
         z-index: 2;
 
@@ -215,6 +211,10 @@
             align-items: center;
             margin-left: auto;
         }
+
+        @mixin responsive-m {
+            width: 100%;
+        }
     }
 }
 
diff --git a/client/src/assets/css/module/tabs.scss b/client/src/assets/css/module/tabs.scss
index b3bce97..d3f5735 100644
--- a/client/src/assets/css/module/tabs.scss
+++ b/client/src/assets/css/module/tabs.scss
@@ -4,14 +4,14 @@
   margin-bottom: var(--space-between-block);
 
   &.m--btns{
+    gap: 10px;
+
     @mixin responsive-xs {
       .button{
         width: 100%;
       }
     }
 
-    gap: 10px;
-
   }
 
   &__item {
diff --git a/client/src/assets/css/module/team.scss b/client/src/assets/css/module/team.scss
index 3602e60..af582f4 100644
--- a/client/src/assets/css/module/team.scss
+++ b/client/src/assets/css/module/team.scss
@@ -1,8 +1,4 @@
 .team {
-    @mixin responsive-xl {
-        padding: 0 0 0 20px;
-    }
-
     position: relative;
     z-index: 2;
 
@@ -11,6 +7,13 @@
     margin-left: auto;
 
     &__header {
+        display: flex;
+
+        max-width: var(--container);
+        margin-right: auto;
+        margin-bottom: var(--space-between-block);
+        padding: 0 50px;
+
         @mixin responsive-xl {
             column-gap: var(--space-between-block);
             padding: 0 40px 0 0;
@@ -19,13 +22,6 @@
         @mixin responsive-s {
             flex-wrap: wrap;
         }
-
-        display: flex;
-
-        max-width: var(--container);
-        margin-right: auto;
-        margin-bottom: var(--space-between-block);
-        padding: 0 50px;
     }
 
     &__title {
@@ -49,14 +45,6 @@
     }
 
     &__tools {
-        @mixin responsive-xl {
-            padding: 0 80px 0 35px;
-        }
-
-        @mixin responsive-l {
-            padding: 0 40px 0 0;
-        }
-
         display: flex;
         flex-wrap: wrap;
         row-gap: 1.5rem;
@@ -75,13 +63,17 @@
                 width: 100%;
             }
         }
+
+        @mixin responsive-xl {
+            padding: 0 80px 0 35px;
+        }
+
+        @mixin responsive-l {
+            padding: 0 40px 0 0;
+        }
     }
 
     &__progress {
-        @mixin responsive-s {
-            max-width: none;
-        }
-
         position: relative;
 
         overflow: hidden;
@@ -104,6 +96,10 @@
 
             background: var(--color-white);
         }
+
+        @mixin responsive-s {
+            max-width: none;
+        }
     }
 
     &__cover {
@@ -127,6 +123,8 @@
     }
 
     &__description {
+        max-width: 820px;
+
         @mixin responsive-xl {
             max-width: calc(100% - var(--space-between-block));
         }
@@ -135,7 +133,9 @@
             width: 100%;
             max-width: none;
         }
+    }
 
-        max-width: 820px;
+    @mixin responsive-xl {
+        padding: 0 0 0 20px;
     }
 }