implement post searching

1 files changed, 76 insertions, 11 deletions

diff --git a/clams-server/src/main/resources/public/css/blog.css b/clams-server/src/main/resources/public/css/blog.css
index c0fd080..f323de4 100644
--- a/clams-server/src/main/resources/public/css/blog.css
+++ b/clams-server/src/main/resources/public/css/blog.css
@@ -1,3 +1,13 @@
+.content-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    margin-top: 30px;
+}
+
+.left-column { text-align: right; }
+.right-column { text-align: left; }
+
 .intro-text {
     text-align: center;
     max-width: 600px;
@@ -41,17 +51,6 @@
     background: #ddd;
 }
 
-@media (max-width: 850px) {
-    .search-form {
-        position: static;
-        text-align: center;
-        margin-bottom: 40px;
-    }
-    .search-form input {
-        width: 250px;
-    }
-}
-
 .year-accordion {
     margin-bottom: 1.5rem;
     cursor: pointer;
@@ -92,3 +91,69 @@
     color: var(--text-color);
     opacity: 0.85;
 }
+
+.search-results-container {
+    max-width: 600px;
+    margin: 30px auto 0 auto;
+}
+
+.search-results-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.search-result-item {
+    margin-bottom: 1.25rem;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+.search-result-date {
+    display: inline-block;
+    font-size: 0.9rem;
+    color: var(--text-color);
+    opacity: 0.65;
+    margin-right: 15px;
+    min-width: 110px;
+}
+
+.search-result-item a {
+    font-size: 1rem;
+}
+
+.search-result-summary {
+    font-weight: normal;
+    color: var(--text-color);
+    opacity: 0.85;
+}
+
+.no-results {
+    padding: 20px;
+    background: #e8e8e4;
+    border-radius: 4px;
+    text-align: center;
+    font-style: italic;
+}
+
+.back-to-blog {
+    margin-top: 40px;
+    display: inline-block;
+}
+
+@media (max-width: 768px) {
+    .content-grid {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+    .left-column, .right-column { text-align: center; }
+
+    .search-form {
+        position: static;
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    .search-form input {
+        width: 250px;
+    }
+}