From 49e9f904e2c20871e15c0b39454686498e8b72e8 Mon Sep 17 00:00:00 2001
From: Spedon <70063177+Sped0n@users.noreply.github.com>
Date: Mon, 22 Jan 2024 20:35:15 +0800
Subject: [PATCH] fix: fix article regresssion (#250)

* refactor: output article element when needed

* refactor: refactor container styles and media queries

- Add the `$tablet` variable to `_container.scss`
- Add a media query to `_container.scss`
- Import `_container.scss` in `critical.scss`
- Remove the import of `_container.scss` in `style.scss`
---
 assets/scss/_partial/_container.scss | 34 ++++++++++++++++------------
 assets/scss/critical.scss            |  1 +
 assets/scss/style.scss               |  1 -
 layouts/_default/single.html         |  8 ++++---
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/assets/scss/_partial/_container.scss b/assets/scss/_partial/_container.scss
index 330d239..f2476a9 100644
--- a/assets/scss/_partial/_container.scss
+++ b/assets/scss/_partial/_container.scss
@@ -1,19 +1,23 @@
-.container {
-  position: fixed;
-  top: 0;
-  z-index: 0;
+$tablet: map-get($breakpoints, 'tablet') - 1;
 
-  width: 100vw;
-  height: var(--window-height);
+@media (max-width: $tablet), (hover: none) {
+  .container {
+    position: fixed;
+    top: 0;
+    z-index: 0;
 
-  overflow-y: scroll;
-  overflow-x: hidden;
-  background: white;
+    width: 100vw;
+    height: var(--window-height);
 
-  overscroll-behavior: none;
-  -webkit-overflow-scrolling: none;
-}
-
-.disableScroll {
-  pointer-events: none;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    background: white;
+
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: none;
+  }
+
+  .disableScroll {
+    pointer-events: none;
+  }
 }
diff --git a/assets/scss/critical.scss b/assets/scss/critical.scss
index ef268d6..50640ea 100644
--- a/assets/scss/critical.scss
+++ b/assets/scss/critical.scss
@@ -9,3 +9,4 @@
 
 @import '_partial/nav';
 @import '_partial/article';
+@import '_partial/container';
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 053b88d..d3ded43 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -6,6 +6,5 @@
 
 @import '_partial/collection';
 @import '_partial/gallery';
-@import '_partial/container';
 
 @import 'node_modules/swiper/swiper.scss';
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index b5407f1..fa2b905 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,8 +7,10 @@
   </script>
   <div class="container">
     {{- partial "nav.html" . -}}
-    <article class="info">
-      {{ .Content }}
-    </article>
+    {{- with .Content -}}
+      <article class="info">
+        {{- . -}}
+      </article>
+    {{- end -}}
   </div>
 {{- end -}}