From 59c7d4567380d1a9c80e96eb958fdbdd512ce006 Mon Sep 17 00:00:00 2001
From: Alexander Neonxp Kiryukhin <i@neonxp.ru>
Date: Sun, 3 Nov 2024 20:08:36 +0300
Subject: новая жизнь блога
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/hugo-theme-stack/assets/scss/grid.scss | 101 ++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 themes/hugo-theme-stack/assets/scss/grid.scss

(limited to 'themes/hugo-theme-stack/assets/scss/grid.scss')

diff --git a/themes/hugo-theme-stack/assets/scss/grid.scss b/themes/hugo-theme-stack/assets/scss/grid.scss
new file mode 100644
index 0000000..9284da9
--- /dev/null
+++ b/themes/hugo-theme-stack/assets/scss/grid.scss
@@ -0,0 +1,101 @@
+.container {
+    margin-left: auto;
+    margin-right: auto;
+
+    .left-sidebar {
+        order: -3;
+        max-width: var(--left-sidebar-max-width);
+    }
+
+    .right-sidebar {
+        order: -1;
+        max-width: var(--right-sidebar-max-width);
+
+        /// Display right sidebar when min-width: lg
+        @include respond(lg) {
+            display: flex;
+        }
+    }
+
+    &.extended {
+        @include respond(md) {
+            max-width: 1024px;
+            --left-sidebar-max-width: 25%;
+            --right-sidebar-max-width: 30%;
+        }
+
+        @include respond(lg) {
+            max-width: 1280px;
+            --left-sidebar-max-width: 20%;
+            --right-sidebar-max-width: 30%;
+        }
+
+        @include respond(xl) {
+            max-width: 1536px;
+            --left-sidebar-max-width: 15%;
+            --right-sidebar-max-width: 25%;
+        }
+    }
+
+    &.compact {
+        @include respond(md) {
+            --left-sidebar-max-width: 25%;
+            max-width: 768px;
+        }
+
+        @include respond(lg) {
+            max-width: 1024px;
+            --left-sidebar-max-width: 20%;
+        }
+
+        @include respond(xl) {
+            max-width: 1280px;
+        }
+    }
+}
+
+.flex {
+    display: flex;
+    flex-direction: row;
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.on-phone--column {
+        flex-direction: column;
+        @include respond(md) {
+            flex-direction: unset;
+        }
+    }
+
+    .full-width {
+        width: 100%;
+    }
+}
+
+main.main {
+    order: -2;
+    min-width: 0;
+    max-width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-separation);
+
+    @include respond(md) {
+        padding-top: var(--main-top-padding);
+    }
+}
+
+.main-container {
+    min-height: 100vh;
+    align-items: flex-start;
+    padding: 0 15px;
+    gap: var(--section-separation);
+    padding-top: var(--main-top-padding);
+    
+    @include respond(md) {
+        padding: 0 20px;
+    }
+}
-- 
cgit v1.2.3