style: archive page use grid

xianmin · Nov 11, 2024 · 412ee13 · 412ee13
1 parent 7cc5dd9
commit 412ee13
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 20 deletions.
diff --git a/assets/sass/_page/_archive.scss b/assets/sass/_page/_archive.scss
@@ -1,18 +1,37 @@
+.archive-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 10.5rem minmax(0, 1fr) 10.5rem;
+  grid-template-areas: 'archive-right-sidebar archive archive-left-sidebar';
+  gap: 1rem;
+
+  @include style-to-mobile() {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: 'archive-right-sidebar' 'archive' ' archive-left-sidebar';
+  }
+
+  .archive-right-sidebar {
+    grid-area: archive-right-sidebar;
+  }
+
+  .archive {
+    grid-area: archive;
+  }
+
+  .archive-left-sidebar {
+    grid-area: archive-left-sidebar;
+  }
+}
+
 .archive {
   margin: 0 auto;
+  width: 100%;
   max-width: $article-max-width;
 
   .archive-group {
     margin-bottom: 2rem;
   }
 
-  .archive-categories {
-    margin-bottom: 2rem;
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-  }
-
   .archive-title {
     display: flex;
     justify-content: space-between;
@@ -32,3 +51,14 @@
     }
   }
 }
+
+.archive-categories {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  flex-direction: column;
+
+  @include style-to-mobile() {
+    flex-direction: row;
+  }
+}
diff --git a/layouts/partials/archive-list.html b/layouts/partials/archive-list.html
@@ -3,19 +3,23 @@
 {{ $context := .context }}
 {{ $show_category_nav := .show_category_nav | default false }}
 
-<!-- Show category nav only in archive and category pages -->
-{{ if $show_category_nav }}
-  {{ partial "widget/category_nav.html" $context }}
-{{ end }}
+<div class="archive-wrapper">
+  <aside class="archive-right-sidebar">
 
-<section id="archive" class="archive">
-  {{ if .title_block }}
+    <!-- Show category nav only in archive and category pages -->
+    {{ if $show_category_nav }}
+    {{ partial "widget/category_nav.html" $context }}
+    {{ end }}
+  </aside>
+
+  <section id="archive" class="archive">
+    {{ if .title_block }}
     {{ .title_block | safeHTML }}
-  {{ end }}
+    {{ end }}
 
-  {{ range $paginator.Pages }}
+    {{ range $paginator.Pages }}
     <div class="archive-post">
-      <time datetime="{{ .Date.Format "2006-01-02" }}" class="archive-post-time">
+      <time datetime="{{ .Date.Format " 2006-01-02" }}" class="archive-post-time">
         {{ .Date.Format "2006-01-02" }}
       </time>
       <span class="archive-post-title">
@@ -24,9 +28,13 @@
         </a>
       </span>
     </div>
-  {{ end }}
+    {{ end }}
 
-  {{ if .paginator }}
+    {{ if .paginator }}
     {{ partial "pagination.html" $context }}
-  {{ end }}
-</section>
+    {{ end }}
+  </section>
+
+  <aside class="archive-left-sidebar"></aside>
+
+</div>