refactor: extract and unify wrapper to baseof

lxndrblz · Feb 12, 2022 · eac53f6 · eac53f6
1 parent 13383f6
commit eac53f6
Show file tree

Hide file tree

Showing 8 changed files with 270 additions and 280 deletions.
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
@@ -2,14 +2,6 @@
   background-color: $accent;
   margin: 30px;
 
-  &-wrapper {
-    width: 100%;
-
-    @include desktop_and_print {
-      width: $content-width;
-    }
-  }
-
   &__more {
     font-size: 1.4rem;
   }

diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
@@ -19,14 +19,6 @@
     width: calc(var(--sidebar-width) - 20%);
   }
 
-  &-wrapper {
-    width: 100%;
-
-    @include desktop_and_print {
-      width: $sidebar-width;
-    }
-  }
-
   &__content {
     @include desktop_and_print {
       display: flex;

diff --git a/assets/scss/partials/components/_wrapper.scss b/assets/scss/partials/components/_wrapper.scss
@@ -5,4 +5,20 @@
   @include desktop {
     flex-direction: row;
   }
+
+  &__main {
+    width: 100%;
+
+    @include desktop_and_print {
+      width: $content-width;
+    }
+  }
+
+  &__sidebar {
+    width: 100%;
+
+    @include desktop_and_print {
+      width: $sidebar-width;
+    }
+  }
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -9,8 +9,12 @@
   <body class="body">
     <header class="header">{{ partial "navbar.html" . }}</header>
     <div class="wrapper">
-      {{- partial "sidebar.html" . -}}
-      {{- block "main" . }}{{- end }}
+      <aside class="wrapper__sidebar">
+        {{- partial "sidebar.html" . -}}
+      </aside>
+      <main class="wrapper__main">
+        {{- block "main" . }}{{- end }}
+      </main>
     </div>
 
     {{- partial "footer.html" (dict "context" . "footerClassModifier" "base") -}}

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,112 +1,110 @@
 {{ define "main" }}
-  <div class="post-wrapper">
-    <div
-      class="post {{ with .Site.Params.doNotLoadAnimations }}
-        .
-
-      {{ else }}
-        animated fadeInDown
-
-      {{ end }}"
-    >
-      {{ if .Params.thumbnail }}
-        <div class="post__thumbnail-wrapper">
-          <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+  <div
+    class="post {{ with .Site.Params.doNotLoadAnimations }}
+      .
+
+    {{ else }}
+      animated fadeInDown
+
+    {{ end }}"
+  >
+    {{ if .Params.thumbnail }}
+      <div class="post__thumbnail-wrapper">
+        <img class="post__thumbnail" src="{{ .Params.thumbnail | relURL }}" alt="Thumbnail image" />
+      </div>
+
+    {{ end }}
+    <div class="post__content">
+      <h1>{{ .Title }}</h1>
+      {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
+        <div class="info">
+          <em class="fas fa-calendar-day info__icon"></em>
+          <span class="date info__text"
+            >{{ if isset .Site.Params "singledateformat" }}
+              {{ .Date.Format .Site.Params.singleDateFormat }}
+
+
+            {{ else }}
+              {{ .Date.Format "Mon, Jan 2, 2006" }}
+
+
+            {{ end }}</span
+          >
+          <em class="fas fa-stopwatch info__icon"></em>
+          <span class="reading-time info__text">{{ i18n "reading_time" .ReadingTime }}</span>
         </div>
 
       {{ end }}
-      <div class="post__content">
-        <h1>{{ .Title }}</h1>
-        {{ if or (eq .Type "post") (eq .Type .Site.Params.postSectionName) }}
-          <div class="info">
-            <em class="fas fa-calendar-day info__icon"></em>
-            <span class="date info__text"
-              >{{ if isset .Site.Params "singledateformat" }}
-                {{ .Date.Format .Site.Params.singleDateFormat }}
-
 
-              {{ else }}
-                {{ .Date.Format "Mon, Jan 2, 2006" }}
+      {{- partial "expirationnote.html" . -}}
 
+      {{- if (eq .Params.toc true) -}}
+        <h3>Table of Contents</h3>
+        {{ .TableOfContents }}
 
-              {{ end }}</span
-            >
-            <em class="fas fa-stopwatch info__icon"></em>
-            <span class="reading-time info__text">{{ i18n "reading_time" .ReadingTime }}</span>
-          </div>
 
-        {{ end }}
+      {{- end -}}
 
-        {{- partial "expirationnote.html" . -}}
+      {{ .Content }}
 
-        {{- if (eq .Params.toc true) -}}
-          <h3>Table of Contents</h3>
-          {{ .TableOfContents }}
+      {{- if isset .Params "series" -}}
+        {{- partial "series.html" . -}}
 
 
-        {{- end -}}
+      {{- end -}}
 
-        {{ .Content }}
+      {{- if (eq .Params.contact true) -}}
+        {{- partial "contact.html" . -}}
 
-        {{- if isset .Params "series" -}}
-          {{- partial "series.html" . -}}
 
+      {{- end -}}
+    </div>
+    <div class="post__footer">
+      {{ with .Page.Params.Categories }}
+        {{ partial "taxonomy/categories.html" . }}
 
-        {{- end -}}
 
-        {{- if (eq .Params.contact true) -}}
-          {{- partial "contact.html" . -}}
+      {{ end }}
 
+      {{ with .Page.Params.Tags }}
+        {{ partial "taxonomy/tags.html" . }}
 
-        {{- end -}}
-      </div>
-      <div class="post__footer">
-        {{ with .Page.Params.Categories }}
-          {{ partial "taxonomy/categories.html" . }}
 
+      {{ end }}
+    </div>
 
-        {{ end }}
+    {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
+      {{- if .Site.DisqusShortname -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ template "_internal/disqus.html" . }}
+        </div>
 
-        {{ with .Page.Params.Tags }}
-          {{ partial "taxonomy/tags.html" . }}
+      {{- end -}}
+      {{- if .Site.Params.utterances.repo -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/utterances.html" . }}
+        </div>
 
+      {{- end -}}
+      {{- if .Site.Params.CommentoURL -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/commento.html" . }}
+        </div>
 
-        {{ end }}
-      </div>
+      {{- end -}}
+      {{- if .Site.Params.gitalk.repo -}}
+        <div id="comment">
+          <h2>{{ i18n "comments" }}</h2>
+          {{ partial "comments/gitalk.html" . }}
+        </div>
 
-      {{ if and (or (eq .Type "post") (eq .Type .Site.Params.postSectionName)) (ne .Page.Params.disableComments true) }}
-        {{- if .Site.DisqusShortname -}}
-          <div id="comment">
-            <h2>{{ i18n "comments" }}</h2>
-            {{ template "_internal/disqus.html" . }}
-          </div>
-
-        {{- end -}}
-        {{- if .Site.Params.utterances.repo -}}
-          <div id="comment">
-            <h2>{{ i18n "comments" }}</h2>
-            {{ partial "comments/utterances.html" . }}
-          </div>
-
-        {{- end -}}
-        {{- if .Site.Params.CommentoURL -}}
-          <div id="comment">
-            <h2>{{ i18n "comments" }}</h2>
-            {{ partial "comments/commento.html" . }}
-          </div>
-
-        {{- end -}}
-        {{- if .Site.Params.gitalk.repo -}}
-          <div id="comment">
-            <h2>{{ i18n "comments" }}</h2>
-            {{ partial "comments/gitalk.html" . }}
-          </div>
-
-        {{- end -}}
+      {{- end -}}
 
 
-      {{ end }}
-    </div>
+    {{ end }}
   </div>
 
 {{ end }}