chore: move Main grid to its children

This way I can use full width background for some blocks.

5 files changed, 148 insertions, 37 deletions

diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 3a8fd0e..49f483c 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -6,3 +6,14 @@
   gap: var(--spacing-md);
   margin: var(--spacing-md) 0;
 }
+
+.section {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+
+  > * {
+    grid-column: 2;
+  }
+}
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
new file mode 100644
index 0000000..1915148
--- /dev/null
+++ b/src/styles/pages/Listing.module.scss
@@ -0,0 +1,25 @@
+@use "@styles/abstracts/placeholders";
+
+.wrapper {
+  padding-bottom: var(--spacing-lg);
+}
+
+.list {
+  @extend %reset-ordered-list;
+}
+
+li.item {
+  margin: 0 0 var(--spacing-md) 0;
+}
+
+.body,
+.section {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+
+  > * {
+    grid-column: 2;
+  }
+}
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
new file mode 100644
index 0000000..667f913
--- /dev/null
+++ b/src/styles/pages/Page.module.scss
@@ -0,0 +1,112 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.article {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: center;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-template-columns:
+        minmax(0, var(--spacing-xl)) min(
+          calc(100vw - calc(var(--spacing-md) * 2)),
+          80ch
+        )
+        minmax(0, 1fr);
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+        minmax(0, 1fr);
+      column-gap: var(--spacing-2xl);
+    }
+  }
+
+  > header {
+    grid-column: 1 / -1;
+  }
+
+  > footer,
+  .body {
+    grid-column: 2;
+  }
+
+  &--no-comments {
+    margin-bottom: var(--spacing-md);
+  }
+}
+
+.toc {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("lg") {
+      grid-column: 1;
+      grid-row: 2 / 4;
+      align-self: stretch;
+      padding: 0 0 0 var(--spacing-lg);
+
+      ol:first-of-type {
+        font-size: var(--font-size-sm);
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.aside {
+  grid-column: 2;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-column: 3;
+      grid-row: 2 / 5;
+      align-self: stretch;
+      max-width: min-content;
+      margin-left: var(--spacing-2xl);
+    }
+
+    @include mix.dimensions("lg") {
+      grid-row: 2 / 4;
+      margin-left: 0;
+    }
+  }
+}
+
+.comments {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    minmax(0, 1fr);
+  align-items: center;
+  margin: var(--spacing-md) 0 0;
+  padding: var(--spacing-md) 0;
+  background: var(--color-bg-secondary);
+  border-top: fun.convert-px(3) solid var(--color-border-lighter);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-template-columns:
+        minmax(0, var(--spacing-xl)) min(
+          calc(100vw - calc(var(--spacing-md) * 2)),
+          80ch
+        )
+        minmax(0, 1fr);
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+        minmax(0, 1fr);
+    }
+  }
+
+  > * {
+    grid-column: 2;
+  }
+}
diff --git a/src/styles/pages/Subject.module.scss b/src/styles/pages/Subject.module.scss
deleted file mode 100644
index 01c3cb8..0000000
--- a/src/styles/pages/Subject.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.title {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.cover {
-  display: block;
-  width: fun.convert-px(50);
-  height: fun.convert-px(50);
-  position: relative;
-}
-
-.list {
-  @extend %reset-ordered-list;
-
-  margin: var(--spacing-md) auto;
-}
-
-li.item {
-  margin: var(--spacing-md) 0;
-}
diff --git a/src/styles/pages/Thematic.module.scss b/src/styles/pages/Thematic.module.scss
deleted file mode 100644
index 0b9aa2d..0000000
--- a/src/styles/pages/Thematic.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %reset-ordered-list;
-
-  margin: var(--spacing-md) auto;
-}
-
-li.item {
-  margin: var(--spacing-md) 0;
-}