implement post searching

9 files changed, 221 insertions, 38 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;
+    }
+}
diff --git a/clams-server/src/main/resources/public/css/common.css b/clams-server/src/main/resources/public/css/common.css
index ffed73f..f5f6d2a 100644
--- a/clams-server/src/main/resources/public/css/common.css
+++ b/clams-server/src/main/resources/public/css/common.css
@@ -1,10 +1,19 @@
 * { box-sizing: border-box; }
 
 :root {
-    --bg-color: #efefeb;
-    --text-color: #373838;
+    --bg-color: #f4f4f0;
+    --text-color: #363737;
     --border-color: #ccc;
-    --font-serif: "Times New Roman", serif;
+    --font-serif: "Spectral", Georgia, serif;
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+h1, h2 {
+    font-family: var(--font-sans), serif;
+}
+
+html {
+    scrollbar-gutter: stable;
 }
 
 html, body {
@@ -43,20 +52,9 @@ h2 {
     border-bottom: 1px solid var(--border-color);
     margin-bottom: 20px;
     padding-bottom: 5px;
-    text-transform: uppercase;
     letter-spacing: 1px;
 }
 
-.content-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 60px;
-    margin-top: 30px;
-}
-
-.left-column { text-align: right; }
-.right-column { text-align: left; }
-
 .main-container ul {
     list-style-type: none;
     padding: 0;
@@ -106,13 +104,7 @@ footer p {
     opacity: 0.5;
 }
 
-@media (max-width: 600px) {
-    .content-grid {
-        grid-template-columns: 1fr;
-        gap: 40px;
-    }
-    .left-column, .right-column { text-align: center; }
-
+@media (max-width: 768px) {
     footer p {
         flex-direction: column;
         gap: 10px;
@@ -148,3 +140,29 @@ footer p {
     scrollbar-width: thin;
     scrollbar-color: #d1d1cd var(--bg-color);
 }
+
+.back-link-top {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 0.85rem;
+    text-decoration: none;
+    font-weight: bold;
+    opacity: 0.7;
+    transition: opacity 0.2s;
+}
+
+.back-link-top:hover {
+    opacity: 1;
+}
+
+@media (max-width: 768px) {
+    .back-link-top {
+        position: static;
+        display: block;
+        margin-top: 10px;
+        margin-bottom: 20px;
+        text-align: left;
+    }
+}
+
diff --git a/clams-server/src/main/resources/public/css/home.css b/clams-server/src/main/resources/public/css/home.css
index 2cf0bd8..742ed38 100644
--- a/clams-server/src/main/resources/public/css/home.css
+++ b/clams-server/src/main/resources/public/css/home.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; }
+
 .profile-img {
     border: 3px solid var(--text-color);
     border-radius: 20px;
@@ -16,7 +26,13 @@
     word-wrap: break-word;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 768px) {
+    .content-grid {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+    .left-column, .right-column { text-align: center; }
+
     .profile-img {
         margin: 0 auto 20px auto;
     }
diff --git a/clams-server/src/main/resources/public/css/post.css b/clams-server/src/main/resources/public/css/post.css
index 8c4b91d..6a237e1 100644
--- a/clams-server/src/main/resources/public/css/post.css
+++ b/clams-server/src/main/resources/public/css/post.css
@@ -1,6 +1,7 @@
 .post-header {
     display: flex;
     justify-content: space-between;
+    margin-top: 45px;
     margin-bottom: 40px;
     font-size: 0.9rem;
     opacity: 0.7;
@@ -39,8 +40,9 @@
     border-top: 1px dashed var(--border-color);
 }
 
-@media (max-width: 600px) {
+@media (max-width: 768px) {
     .post-header {
+        margin-top: 10px;
         flex-direction: column;
         align-items: center;
         gap: 10px;
diff --git a/clams-server/src/main/resources/public/css/projects.css b/clams-server/src/main/resources/public/css/projects.css
index 4886a6d..3e5ccc0 100644
--- a/clams-server/src/main/resources/public/css/projects.css
+++ b/clams-server/src/main/resources/public/css/projects.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; }
+
 .projects-category {
     margin-bottom: 80px;
 }
@@ -63,3 +73,11 @@
     opacity: 0.6;
     margin: 0 10px;
 }
+
+@media (max-width: 768px) {
+    .content-grid {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+    .left-column, .right-column { text-align: center; }
+}
diff --git a/clams-server/src/main/resources/templates/blog-search.html b/clams-server/src/main/resources/templates/blog-search.html
new file mode 100644
index 0000000..e2188cf
--- /dev/null
+++ b/clams-server/src/main/resources/templates/blog-search.html
@@ -0,0 +1,41 @@
+{% extends "templates/layout.html" %}
+
+{% block content %}
+<main class="main-container">
+    <a href="/blog" class="back-link-top">&larr; back</a>
+    <header>
+        <h1>Elias Haugsbakk's Blog</h1>
+        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching posts</p>
+
+        <form action="/blog" method="GET" class="search-form">
+            <input type="text" name="search" value="{{ search_term }}" placeholder="Search posts..." aria-label="Search blog posts">
+            <button type="submit">Search</button>
+        </form>
+    </header>
+
+    <div class="search-results-container">
+        {% if results is empty %}
+            <div class="no-results">
+                {% if search_term is empty %}
+                    <p>Please enter a search term to search the blog posts. Or <a href="/blog">go back to all posts</a>.</p>
+                {% else %}
+                    <p>Found no posts matching <strong>"{{ search_term }}"</strong>. <br>
+                        <a href="/blog">Go back to all posts</a>.</p>
+                {% endif %}
+            </div>
+        {% else %}
+            <ul class="search-results-list">
+                {% for post in results %}
+                    <li class="search-result-item">
+                        <span class="search-result-date">{{ post.formattedDate }}</span>
+                        <a href="/blog/{{ post.slug }}">{{ post.title }}</a>
+                        {% if post.summary is not empty %}
+                            <span class="search-result-summary">-- {{ post.summary }}</span>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+</main>
+{% endblock %}
diff --git a/clams-server/src/main/resources/templates/blog.html b/clams-server/src/main/resources/templates/blog.html
index 200a144..2c484a1 100644
--- a/clams-server/src/main/resources/templates/blog.html
+++ b/clams-server/src/main/resources/templates/blog.html
@@ -4,10 +4,12 @@
 <main class="main-container">
     <header>
         <h1>Elias Haugsbakk's Blog</h1>
-        <p class="intro-text">This is the home page for my blog. The list of blog posts is a diverse collection of some of my writings; if you're just browsing, this might be a good place to start.</p>
+        <p class="intro-text">This is the home page for my blog. The featured list is a diverse collection of some
+            of my writings; if you're just browsing, this might be a good place to start.</p>
 
         <form action="/blog" method="GET" class="search-form">
-            <input type="text" name="search" value="{{ search_value }}" placeholder="Search posts..." aria-label="Search blog posts">
+            <input type="text" name="search" value="{{ search_value }}" placeholder="Search posts..."
+                   aria-label="Search blog posts">
             <button type="submit">Search</button>
         </form>
     </header>
@@ -16,14 +18,29 @@
         <div class="left-column">
             <section id="all" class="blog-section">
                 <h2>All Posts</h2>
-                {{ all_posts| raw }}
+                {% for group in posts_by_year %}
+                <details class="year-accordion" {% if loop.first %}open{% endif %}>
+                    <summary class="year-toggle">{{ group.key }}</summary>
+                    <ul class="post-list">
+                        {% for post in group.value %}
+                        <li><a href="/blog/{{ post.slug }}">{{ post.title }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </details>
+                {% endfor %}
             </section>
         </div>
 
         <div class="right-column">
             <section id="recent" class="blog-section">
                 <h2>Featured</h2>
-                {{ recent_posts | raw }}
+                <ul class="recent-list">
+                    {% for post in featured_posts %}
+                    <li>
+                        <a href="/blog/{{ post.slug }}">{{ post.title }}</a> <span class="featured-desc">-- {{ post.summary }}</span>
+                    </li>
+                    {% endfor %}
+                </ul>
             </section>
         </div>
     </div>
diff --git a/clams-server/src/main/resources/templates/layout.html b/clams-server/src/main/resources/templates/layout.html
index 4c8b8dc..1460721 100644
--- a/clams-server/src/main/resources/templates/layout.html
+++ b/clams-server/src/main/resources/templates/layout.html
@@ -6,6 +6,11 @@
     <title>{{ page_title }}</title>
     <link rel="stylesheet" href="/css/common.css">
     <link rel="stylesheet" href="/css/{{ page_css }}.css">
+
+    <!-- Google Fonts link for Spectral (Regular 400 and Italic) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
 </head>
 <body>
 
diff --git a/clams-server/src/main/resources/templates/post.html b/clams-server/src/main/resources/templates/post.html
index 7e99e1f..7899099 100644
--- a/clams-server/src/main/resources/templates/post.html
+++ b/clams-server/src/main/resources/templates/post.html
@@ -2,6 +2,7 @@
 
 {% block content %}
 <main class="main-container">
+    <a href="/blog" class="back-link-top">&larr; back</a>
     <header class="post-header">
         <span class="post-date">{{ published_date }}</span>
         <span class="post-author">{{ author }}</span>