Design: update post list and post tag

gumgood · Oct 6, 2024 · b01932d · b01932d
1 parent 8989e2d
commit b01932d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 14 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<div id="post">
+<article id="post">
     <div class="post-info">
         <span class="post-info-category">
             {%- if page.categories.size > 0 -%}
@@ -43,4 +43,4 @@ <h1 class="post-info-title my-2 pb-1">
     </div>
 
     {%- include scripts/comment.html -%}
-</div>
+</article>
diff --git a/_sass/layouts/_default.scss b/_sass/layouts/_default.scss
@@ -357,6 +357,11 @@ main {
             background-color: var(--color-button-default-hover-bg);
         }
     }
+
+    span {
+        padding: 1rem;
+        @include ellipse;
+    }
 }
 
 #sidebar {
@@ -456,7 +461,7 @@ footer {
 
 .footer-content {
     @include flex-center;
-
+    @include ellipse;
     height: 100%;
     color: var(--color-fg-muted);
     font-size: var(--footer-font-size);

diff --git a/_sass/pages/_index.scss b/_sass/pages/_index.scss
@@ -1,9 +1,9 @@
 #post-summary {
     @include prevent-select;
+    margin: 0;
+    padding: 0;
 
     .post-summary-item {
-        display: flex;
-        flex-direction: row-reverse;
         margin-bottom: 1.5rem;
         overflow: hidden;
         background-color: var(--color-canvas-default);
@@ -12,17 +12,29 @@
         border-style: solid;
         border-width: var(--borderWidth-thin);
         transition: box-shadow .3s ease-in-out;
+
+        a {
+            display: flex;
+            flex-direction: row-reverse;
+
+            @media screen and (max-width: $break-small) {
+                flex-direction: column;
+            }
+        }
     }
 
     .post-summary-item:hover {
         box-shadow: rgba(104, 104, 104, 0.5) 0 2px 6px 0, rgba(211, 209, 209, 0.15) 0 0 0 1px;
     }
 
     .post-summary-item-thumbnail {
-        border-top-right-radius: var(--borderRadius-large);
-        border-bottom-right-radius: var(--borderRadius-large);
+        flex: 1;
         overflow: hidden;
 
+        @media screen and (max-width: $break-small) {
+            height: 10rem;
+        }
+
         img {
             height: 100%;
             width: 100%;
@@ -40,12 +52,13 @@
         padding: 1.25rem 1.75rem;
 
         @media screen and (max-width: $break-small) {
-            flex-direction: column;
             padding: 1rem;
         }
     }
 
     .post-summaries-item-title {
+        margin-top: 0;
+        margin-bottom: 1rem;
         margin: 0.5rem 0;
         color: var(--color-fg-default);
         font-size: 1.25rem;
@@ -88,6 +101,7 @@
     margin: 2rem 0;
     text-align: center;
     @include prevent-select;
+    @include ellipse;
 
     *:not(:last-child) {
         margin-right: 1rem;

diff --git a/index.html b/index.html
@@ -2,11 +2,11 @@
 layout: default
 ---
 
-<div id="post-summary">
+<ul id="post-summary">
 {%- for post in paginator.posts -%}
     {%- assign thumbnail = post.content | split: "<img" | slice: 1 | first | split: '/>' | first -%}
-    <a href="{{- post.url -}}">
-        <div class="post-summary-item">
+    <li class="post-summary-item">
+        <a href="{{- post.url -}}">
             {%- if thumbnail -%}
             <div class="post-summary-item-thumbnail">
                 <img {{ thumbnail }}/>
@@ -31,10 +31,10 @@ <h2 class="post-summaries-item-title">{{- post.title -}}</h2>
                     {%- endif -%}
                 </div>
             </div>
-        </div>
-    </a>
+        </a>
+    </li>
 {%- endfor -%}
-</div>
+</ul>
 
 <div id="paginate">
     {%- assign s = paginator.page | minus: 1 | divided_by: 8 | plus: 1 -%}