Design: update post list and post tag

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

Hide file tree

Showing 5 changed files with 38 additions and 20 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/_pages/search.html b/_pages/search.html
@@ -43,12 +43,12 @@
 
         for (var i = 0; i < results.length; i++) {  // Iterate over them and generate html
             var item = store[results[i].ref];
-            appendString += '<a href="' + item.url + '">'
-            appendString += '<div class="post-summary-item">';
+            appendString += '<li class="post-summary-item">';
+            appendString += '<a href="' + item.url + '">';
             if (item.thumbnail) {
                 appendString += '<div class="post-summary-item-thumbnail">';
                 appendString += '<img ' + item.thumbnail + '/>';
-                appendString += '</div>'
+                appendString += '</div>';
             }
             appendString += '<div class="post-summaries-item-body">';
             appendString += '<h2 class="post-summaries-item-title">' + item.title + '</h2>';
@@ -64,10 +64,10 @@
             if (item.subcategory) {
                 appendString += '<span>&nbsp/&nbsp' + item.subcategory + '</span>';
             }
-            appendString += '</div></div></div></a>';
+            appendString += '</div></div></a></li>';
         }
 
-        searchResults.innerHTML = prependString + '<div id="post-summary">' + appendString + '</div>';
+        searchResults.innerHTML = prependString + '<ul id="post-summary">' + appendString + '</ul>';
     }
 
     function getQuery(variable) {

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) {
+            flex: 0 0 12rem;
+        }
+
         img {
             height: 100%;
             width: 100%;
@@ -40,13 +52,13 @@
         padding: 1.25rem 1.75rem;
 
         @media screen and (max-width: $break-small) {
-            flex-direction: column;
             padding: 1rem;
         }
     }
 
     .post-summaries-item-title {
-        margin: 0.5rem 0;
+        margin-top: 0;
+        margin-bottom: 0.75rem;
         color: var(--color-fg-default);
         font-size: 1.25rem;
         font-weight: 400;
@@ -88,6 +100,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 -%}