feat: card'ify term and section

Signed-off-by: Khusika Dhamar Gusti <[email protected]>

Author: khusika

assets/css/_core/_media.scss

@@ -17,6 +17,10 @@
     width: 60%;
   }
 
+  .archive-compact {
+    width: 50% !important;
+  }
+
   #header-desktop .header-wrapper {
     padding: 0 1rem;
   }
@@ -49,6 +53,10 @@
     width: 56%;
   }
 
+  .archive-compact {
+    width: 52% !important;
+  }
+
   .home[data-home=posts] {
     .summary{
       min-height: 23rem;
@@ -61,6 +69,10 @@
     width: 52%;
   }
 
+  .archive-compact {
+    width: 70% !important;
+  }
+
   .single-card {
     padding: 1rem 2rem;
   }
@@ -118,6 +130,11 @@
 }
 
 @media only screen and (max-width: 680px) {
+
+  .archive-compact {
+    width: 100% !important;
+  }
+
   .wrapper {
     main {
       .container {

assets/css/_page/_archive.scss

@@ -53,6 +53,13 @@
     color: inherit;
     text-decoration: none;
     transition: transform 0.2s ease-in-out;
+    padding: 0.5rem;
+    @include border-radius(4px);
+    background: $global-background-card-color;
+    @include box-shadow(0 2px 4px -1px rgba(0, 0, 0, 0.2));
+    [theme=dark] & {
+      background: $global-background-card-color-dark;
+    }
     &:hover {
       transform: scale(1.02);
       .item-title {
@@ -96,7 +103,7 @@
   .item-with-image {
     display: flex;
     align-items: center;
-    margin-left: 1.5rem;
+    margin-left: 0;
   }
 
   .item-image {
@@ -106,12 +113,7 @@
     height: 68px;
     overflow: hidden;
     @include border-radius(4px);
-    background: $global-background-card-color;
-    @include box-shadow(0 2px 10px rgba(0, 0, 0, 0.1));
-    [theme=dark] & {
-      background: $global-background-card-color-dark;
-      @include box-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
-    }
+
     img {
       width: 100%;
       height: 100%;
@@ -128,14 +130,12 @@
     width: 68px;
     height: 68px;
     @include border-radius(4px);
-    background: $global-background-card-color;
+    background-color: $global-background-color;
     font-size: 2rem;
     color: #495057;
-    @include box-shadow(0 2px 10px rgba(0, 0, 0, 0.1));
     [theme=dark] & {
-      background: $global-background-card-color-dark;
+      background-color: $global-background-color-dark;
       color: #adb5bd;
-      @include box-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
     }
   }
 
@@ -149,14 +149,15 @@
   .timeline {
     position: relative;
     overflow: hidden;
+    padding-left: 2rem;
     &::before {
       content: '';
       display: inline-block;
       position: absolute;
       top: 0;
-      left: 5px;
+      left: 4.5px;
       background: $global-font-secondary-color;
-      width: 2px;
+      width: 3px;
       height: 100%;
       z-index: 1;
       [theme=dark] & {
@@ -176,9 +177,9 @@
       transform: translateY(-50%);
       border: 2px solid $global-background-color;
       @include border-radius(50%);
-      left: 1px;
-      width: 10px;
-      height: 10px;
+      left: 0;
+      width: 12px;
+      height: 12px;
       z-index: 2;
       transition: transform 0.2s ease-in-out;
       [theme=dark] & {
@@ -191,7 +192,7 @@
         transform: scale(1.02);
       }
       &::before {
-        transform: translateY(-50%) scale(1.5);
+        transform: translateY(-50%) scale(1.25);
       }
     }
   }

assets/css/_page/_home.scss

@@ -143,10 +143,10 @@
       padding: 30% 0 0;
       position: relative;
       margin: 0 auto;
-      background-color: #f2f2f2;
+      background-color: $global-background-color;
       @include border-radius(.5rem .5rem 0 0);
       [theme=dark] & {
-        background-color: #292a2d;
+        background-color: $global-background-color-dark;
       }
       a {
         position: absolute;

layouts/section.html

@@ -3,7 +3,7 @@
 {{- end -}}
 
 {{- define "content" -}}
-    <div class="page archive">
+    <div class="page archive archive-compact">
         {{- /* Title */ -}}
         <h2 class="single-title animated fadeInDown faster">
             {{- .Params.Title | default (T .Section) | default .Section | dict "Some" | T "allSome" -}}

layouts/term.html

@@ -3,7 +3,7 @@
 {{- end -}}
 
 {{- define "content" -}}
-    <div class="page archive">
+    <div class="page archive archive-compact">
         {{- /* Title */ -}}
         <h2 class="single-title animated fadeInDown faster">
             {{- $taxonomy := .Data.Singular -}}