fix showcase box

assets/sass/pages/_showcase.scss

@@ -14,8 +14,8 @@
   }
 
   &__nav {
-    margin: 0 0.5rem;
     padding: 0.5rem 0;
+    margin-bottom: 0.5rem;
     
     @include themify($themes) {
       border-bottom: 1px solid themed('hr-color');
@@ -65,18 +65,28 @@
   }
 
   &__title {
-    margin: 2rem 0.5rem 0.25rem 0.5rem;
+    margin: 2rem 0.5rem 0.25rem 0;
     font-size: 1.125rem;
   }
 
   &__box {
-    width: 25%;
+    width: 100%;
+    max-width: 48.2%;
     height: auto;
     border-radius: 0.2rem;
-    margin: 0.5rem;
     padding: 1rem;
     position: relative;
     
+    &:nth-child(odd) {
+      margin: 0.5rem;
+      margin-left: 0;
+    }
+
+    &:nth-child(even) {
+      margin: 0.5rem;
+      margin-right: 0;
+    }
+
     @include flexbox();
     @include flex-grow(1);
     @include flex-direction(column);
@@ -84,35 +94,28 @@
     @include themify($themes) {
       border: 1px solid themed('content-box-border-color');
     }
-    @include on-event {
+
     @include on-event {
       @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
       background-color: rgba(125, 125, 125, 0.1);
     }
+
+    @media only screen and (max-width: 1180px) {
+      max-width: 48.2%;
     }
-    @media only screen and (max-width: 960px) {
-      width: 35%;
+
+    @media only screen and (max-width: 769px) {
+      max-width: 100%;
+      margin: 0.5rem 0 !important;
     }
 
     &--wrapper {
       @include flexbox();
+      @include justify-content(flex-start);
       @include flex-wrap(wrap);
       @include animation('slide-in-left-little .2s .25s 1 ease-in both');
     }
 
-    &--dummy {
-      width: 25%;
-      margin: 0.5rem;
-
-      @include flex-grow(1);
-      @media only screen and (max-width: 960px) {
-        width: 35%;
-      }
-      @media only screen and (max-width: 600px) {
-        display: none;
-      }
-    }
-
     &--title {
       word-break: break-word;
       font-family: $title-font;
@@ -130,13 +133,13 @@
       font-family: $content-font;
       font-size: 0.9rem;
       margin: 0.25rem 0;
-      height: 60px;
-      overflow: hidden;
+      height: 70px;
     }
 
     &--img {
       width: auto;
       height: 100%;
+      margin: 0.5rem 0;
       max-height: 225px;
       object-fit: cover;
 

layouts/partials/showcase/show-pinned.html

@@ -1,24 +1,20 @@
 <div>
   {{ $pinnedNum := 0 }}
-  {{ $isOdd := false}}
 
   {{ range .Pages }}
     {{ $pinnedNum = add $pinnedNum (len (where .Pages "Params.pinned" true)) }}
   {{ end }}
 
-  {{ if eq (mod $pinnedNum 2) 1 }}
-    {{ $isOdd = true }}
-  {{ end }}
-
   {{ if gt $pinnedNum 0 }}
     <div class="showcase__title">
       {{ i18n "showcase-pinned" }}
     </div>
-    <div class="showcase__box--wrapper">
+    <div style="display: flex; justify-content: center">
+    <ol class="showcase__box--wrapper">
       {{ range .Pages }}
         {{ $category := .Params.category }}
         {{ range where .Pages "Params.pinned" true }}
-          <div class="showcase__box">
+          <li class="showcase__box">
             <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
             <span class="showcase__box--title">
               {{ .Title }}
@@ -38,13 +34,10 @@
                 Repository
               </a>
             </div>
-          </div>
+          </li>
         {{ end }}
       {{ end }}
-      
-      {{ if $isOdd }}
-        <div class="showcase__box--dummy"></div>
-      {{ end }}
+    </ol>
     </div>
   {{ end }}
 </div>

layouts/partials/showcase/show-section.html

@@ -1,10 +1,5 @@
 <div>
   {{ $sectionNum := (len .Pages) }}
-  {{ $isOdd := false}}
-
-  {{ if eq (mod $sectionNum 2) 1}}
-    {{ $isOdd = true }}
-  {{ end }}
 
   {{ if gt $sectionNum 0 }}
     <div class="showcase__box--wrapper">
@@ -36,10 +31,6 @@
           </div>
         </div>
       {{ end }}
-      
-      {{ if $isOdd }}
-        <div class="showcase__box--dummy"></div>
-      {{ end }}
     </div>
   {{ end }}
 </div>