image in blog summery and recent post #62, Scrollbar styling

static/css/footer.css

@@ -16,6 +16,7 @@ footer .card {
     border-radius: .75rem;
     cursor: context-menu;
     overflow: hidden;
+    border: none;
 }
 
 footer .card:hover {
@@ -46,4 +47,17 @@ footer .card-footer a:hover {
 
 footer .card-footer a:focus {
     box-shadow: none !important;
+}
+
+footer .card > .card-header {
+    padding: 0 !important;
+    border: none !important;
+    background-color: var(--secondary-color) !important;
+}
+
+footer .card > .card-header .card-img-top {
+    width: 100%;
+    height: 250px !important;
+    object-fit: cover;
+    background-color: transparent !important;
 }

static/css/list.css

@@ -4,6 +4,7 @@
     border-radius: .75rem;
     cursor: context-menu;
     overflow: hidden;
+    border: none;
 }
 
 #list-page .card a {
@@ -15,7 +16,6 @@
 }
 
 #list-page .card:hover {
-    border: 1px solid var(--secondary-color);
     transition: all 0.3s ease-out;
     transform: translateY(-7px);
 }
@@ -47,6 +47,17 @@
     color: var(--primary-color) !important;
 }
 
+#list-page .card > .card-header {
+    padding: 0 !important;
+    border: none !important;
+    background-color: var(--secondary-color) !important;
+}
+
+#list-page .card > .card-header .card-img-top {
+    width: 100%;
+    height: 250px !important;
+    background-color: transparent !important;
+}
 
 /* pagination */
 #list-page ul li a {

static/js/search.js

@@ -9,7 +9,7 @@ async function searchOnChange(evt) {
       document.getElementById("search-content").style.width = "500px";
     } else {
       searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
-      document.getElementById("search-content").style.width = "430px";
+      document.getElementById("search-content").style.width = "300px";
     }
 
     document.getElementById("search-content").style.top =