locally-fixed-grid

2024-10-07 01:15:28 +03:00 · 2024-10-07 01:15:28 +03:00 · 0046d4d3eb
commit 0046d4d3eb
parent 504b139df5 ed9810f413
5 changed files with 56 additions and 101 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -125,7 +125,7 @@
        "yjs": "13.6.19"
      },
      "engines": {
-        "node": ">= 20"
+        "node": "20.x"
      }
    },
    "node_modules/@0no-co/graphql.web": {
--- a/package.json
+++ b/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": {
--- a/src/styles/_grid.scss
+++ b/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 {
-        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}-around {
-        justify-content: space-around !important;
-      }
-
-      .#{$prefix}justify-content#{$infix}-evenly {
-        justify-content: space-evenly !important;
-      }
+      .#{$prefix}justify-content#{$infix}-start   { 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}-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} {
-          display: $value !important;
-        }
+        .#{$prefix}d#{$infix}-#{$value} { 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} {
-        display: $value !important;
-      }
+      .#{$prefix}d-print-#{$value} { 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 media-breakpoint-down(sm) {
-    // padding: 0 $container-padding-x * 0.5;
-  }
-
-  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);
-    }
-  }
-}
+@include make-grid-columns($grid-columns, $grid-breakpoints);
+@include make-display-classes;
+@include make-print-display-classes;
+@include make-justify-content;
--- a/src/styles/_theme.scss
+++ b/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;
--- a/src/styles/app.scss
+++ b/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;
@ -922,4 +957,4 @@ iframe {

 .img-align-column {
  clear: both;
-}
+}