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

@@ -1,19 +1,23 @@
-.container {
+$tablet: map-get($breakpoints, 'tablet') - 1;
-  position: fixed;
-  top: 0;
-  z-index: 0;
 
-  width: 100vw;
+@media (max-width: $tablet), (hover: none) {
-  height: var(--window-height);
+  .container {
+    position: fixed;
+    top: 0;
+    z-index: 0;
 
-  overflow-y: scroll;
+    width: 100vw;
-  overflow-x: hidden;
+    height: var(--window-height);
-  background: white;
 
-  overscroll-behavior: none;
+    overflow-y: scroll;
-  -webkit-overflow-scrolling: none;
+    overflow-x: hidden;
-}
+    background: white;
-
+
-.disableScroll {
+    overscroll-behavior: none;
-  pointer-events: none;
+    -webkit-overflow-scrolling: none;
+  }
+
+  .disableScroll {
+    pointer-events: none;
+  }
 }

assets/scss/critical.scss

@@ -9,3 +9,4 @@
 
 @import '_partial/nav';
 @import '_partial/article';
+@import '_partial/container';

assets/scss/style.scss

@@ -6,6 +6,5 @@
 
 @import '_partial/collection';
 @import '_partial/gallery';
-@import '_partial/container';
 
 @import 'node_modules/swiper/swiper.scss';

layouts/_default/single.html

@@ -7,8 +7,10 @@
   </script>
   <div class="container">
     {{- partial "nav.html" . -}}
-    <article class="info">
+    {{- with .Content -}}
-      {{ .Content }}
+      <article class="info">
-    </article>
+        {{- . -}}
+      </article>
+    {{- end -}}
   </div>
 {{- end -}}