locally-fixed-grid

package-lock.json

@@ -125,7 +125,7 @@
         "yjs": "13.6.19"
       },
       "engines": {
-        "node": ">= 20"
+        "node": "20.x"
       }
     },
     "node_modules/@0no-co/graphql.web": {

package.json

@@ -136,7 +136,7 @@
     "y-prosemirror": "1.2.12"
   },
   "engines": {
-    "node": ">= 20"
+    "node": "20.x"
   },
   "trustedDependencies": ["@biomejs/biome", "@swc/core", "esbuild", "protobufjs"],
   "dependencies": {

src/styles/_grid.scss

@@ -104,12 +104,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: calc($size / $columns);
 
-  margin-left: if($num ==0, 0, calc(100% * #{$num}));
+  margin-left: if($num == 0, 0, calc(100% * #{$num}));
 }
 
 // Миксин row-cols
 @mixin row-cols($count) {
-  >* {
+  > * {
     flex: 0 0 auto;
     width: 100% / $count;
   }
@@ -118,7 +118,7 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 // Миксин make-grid-columns
 @mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
-    $infix: if($breakpoint =='xs', '', "-#{$breakpoint}");
+    $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Добавляем класс col-auto
@@ -143,31 +143,14 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-justify-content($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
 
-      .#{$prefix}justify-content#{$infix}-start {
+      .#{$prefix}justify-content#{$infix}-start   { justify-content: flex-start !important; }
-        justify-content: flex-start !important;
+      .#{$prefix}justify-content#{$infix}-end     { justify-content: flex-end !important; }
-      }
+      .#{$prefix}justify-content#{$infix}-center  { justify-content: center !important; }
-
+      .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
-      .#{$prefix}justify-content#{$infix}-end {
+      .#{$prefix}justify-content#{$infix}-around  { justify-content: space-around !important; }
-        justify-content: flex-end !important;
+      .#{$prefix}justify-content#{$infix}-evenly  { justify-content: space-evenly !important; }
-      }
-
-      .#{$prefix}justify-content#{$infix}-center {
-        justify-content: center !important;
-      }
-
-      .#{$prefix}justify-content#{$infix}-between {
-        justify-content: space-between !important;
-      }
-
-      .#{$prefix}justify-content#{$infix}-around {
-        justify-content: space-around !important;
-      }
-
-      .#{$prefix}justify-content#{$infix}-evenly {
-        justify-content: space-evenly !important;
-      }
     }
   }
 }
@@ -176,12 +159,10 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-display-classes($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
 
       @each $value in $displays {
-        .#{$prefix}d#{$infix}-#{$value} {
+        .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
-          display: $value !important;
-        }
       }
     }
   }
@@ -191,48 +172,11 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-print-display-classes() {
   @media print {
     @each $value in $displays {
-      .#{$prefix}d-print-#{$value} {
+      .#{$prefix}d-print-#{$value} { display: $value !important; }
-        display: $value !important;
-      }
-    }
-  }
-}
-
-// Добавляем новый миксин для генерации классов порядка
-@mixin make-order-classes($breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
-
-      .order#{$infix}-first {
-        order: -1 !important;
-      }
-
-      .order#{$infix}-last {
-        order: 9999 !important;
-      }
-
-      .order#{$infix}-0 {
-        order: 0 !important;
-      }
-
-      @for $i from 1 through 5 {
-        .order#{$infix}-#{$i} {
-          order: $i !important;
-        }
-      }
     }
   }
 }
 
-// Добавляем вызов нового миксина в конец файла
-@include make-grid-columns($grid-columns, $grid-breakpoints);
-@include make-display-classes;
-@include make-print-display-classes;
-@include make-justify-content;
-@include make-order-classes;
-
-
 // Генерация классов контейнера и ряда
 .container,
 .container-fluid {
@@ -247,29 +191,7 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
   }
 }
 
-.container {
+@include make-grid-columns($grid-columns, $grid-breakpoints);
-  @include media-breakpoint-down(sm) {
+@include make-display-classes;
-    // padding: 0 $container-padding-x * 0.5;
+@include make-print-display-classes;
-  }
+@include make-justify-content;
-
-  max-width: 1500px;
-  width: auto;
-}
-
-.row {
-  @include media-breakpoint-down(md) {
-    > * {
-      margin-bottom: 2.4rem;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    margin-left: divide(-$container-padding-x, 2);
-    margin-right: divide(-$container-padding-x, 2);
-
-    > * {
-      padding-left: divide($container-padding-x, 2);
-      padding-right: divide($container-padding-x, 2);
-    }
-  }
-}

src/styles/_theme.scss

@@ -1,8 +1,6 @@
-@import 'vars';
-
 :root {
   --background-color: #fff;
-  --default-color: #{$default-color};
+  --default-color: #000;
   --background-color-invert: #000;
   --default-color-invert: #fff;
   --link-color: #000;

src/styles/app.scss

@@ -715,6 +715,24 @@ figure {
   }
 }
 
+.row {
+  @include media-breakpoint-down(md) {
+    > * {
+      margin-bottom: 2.4rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    margin-left: divide(-$container-padding-x, 2);
+    margin-right: divide(-$container-padding-x, 2);
+
+    > * {
+      padding-left: divide($container-padding-x, 2);
+      padding-right: divide($container-padding-x, 2);
+    }
+  }
+}
+
 #app {
   display: flex;
   flex-direction: column;
@@ -737,6 +755,15 @@ figure {
   padding-top: 0;
 }
 
+.container {
+  @include media-breakpoint-down(sm) {
+    // padding: 0 $container-padding-x * 0.5;
+  }
+
+  max-width: 1500px;
+  width: auto;
+}
+
 .container--static-page {
   @include media-breakpoint-up(md) {
     padding-top: 1.5em;
@@ -808,6 +835,14 @@ figure {
   }
 }
 
+.load-more-container {
+  text-align: center;
+
+  button {
+    padding: 0.6em 1.5em;
+  }
+}
+
 details {
   @include media-breakpoint-down(md) {
     padding-left: 3rem;