stylus mixins

src/styles/index.styl

@@ -1,10 +1,28 @@
-.navbar
+// Миксины для переиспользования
+double-border()
     border-top double thick silver
     border-bottom double thick silver
-    font-size 0
+
+flex-center()
+    display flex
+    align-items center
+    justify-content center
+
+text-center-bold()
+    text-align center
+    font-weight bold
+    display block
+
+grid-responsive(columns)
     display grid
-    grid-template-columns repeat(7, min-content)
+    grid-template-columns columns
     grid-template-rows 1fr
+
+// Основные стили
+.navbar
+    double-border()
+    font-size 0
+    grid-responsive(repeat(7, min-content))
     justify-items start
     
     &__link__wrapper
@@ -45,9 +63,7 @@
             margin-top 10px
 
 .main-container
-    display grid
-    grid-template-columns 3fr 1fr
-    grid-template-rows 1fr
+    grid-responsive(3fr 1fr)
     
 
 .info-block
@@ -56,20 +72,14 @@
     margin 1vw 0
     
     &__header
-        display block
-        font-weight bold
-        text-align center
+        text-center-bold()
         
     &__container
         &_layout-a
-            display grid
-            grid-template-columns 3fr 3fr 2fr
-            grid-template-rows 1fr
+            grid-responsive(3fr 3fr 2fr)
             
         &_layout-b
-            display grid
-            grid-template-columns 4fr 7fr 4fr
-            grid-template-rows 1fr
+            grid-responsive(4fr 7fr 4fr)
             
         & > *
             margin 2vw
@@ -93,16 +103,13 @@
 
 .small-card
     margin 20px 10px 0
-    display grid
-    grid-template-columns 1fr 1fr
-    grid-template-rows auto
+    grid-responsive(1fr 1fr)
     
     &__content
         text-align justify
         
     &__header
-        display block
-        font-weight bold
+        text-center-bold()
         text-align right
         
     &__link
@@ -126,7 +133,7 @@
 
 @media screen and (max-width: 800px)
     .navbar
-        grid-template-columns 1fr 1fr
+        grid-responsive(1fr 1fr)
         grid-template-rows 1fr 1fr 1fr
         justify-items center
         
@@ -154,6 +161,6 @@
         
     .info-block
         &__container
-            &_layout_a, &_layout_b
+            &_layout-a, &_layout-b
                 display flex
                 flex-direction column