From 8a4935f7ba29cc39781c0d3169e81d6af3bd5761 Mon Sep 17 00:00:00 2001
From: Elias Haugsbakk <elias.haugsbakk@gmail.com>
Date: Wed, 22 Jul 2026 00:23:50 +0200
Subject: refine article styling

---
 .../src/main/resources/public/css/article.css      |  7 ++++
 .../src/main/resources/public/css/common.css       |  9 ++---
 .../src/main/resources/templates/article.html      |  2 --
 .../main/resources/templates/articles-search.html  | 41 ++++++++++++++++++++++
 .../src/main/resources/templates/blog-search.html  | 41 ----------------------
 5 files changed, 53 insertions(+), 47 deletions(-)
 create mode 100644 clams-server/src/main/resources/templates/articles-search.html
 delete mode 100644 clams-server/src/main/resources/templates/blog-search.html

(limited to 'clams-server/src/main/resources')

diff --git a/clams-server/src/main/resources/public/css/article.css b/clams-server/src/main/resources/public/css/article.css
index 2ba2b18..318df62 100644
--- a/clams-server/src/main/resources/public/css/article.css
+++ b/clams-server/src/main/resources/public/css/article.css
@@ -13,6 +13,13 @@ h1 {
     text-align: left;
 }
 
+blockquote {
+    border-left: 4px solid var(--accent-color);
+    padding-left: 1rem;
+    margin-left: 0;
+    font-style: italic;
+}
+
 .article-content {
     line-height: 1.8;
     font-size: var(--font-size-body);
diff --git a/clams-server/src/main/resources/public/css/common.css b/clams-server/src/main/resources/public/css/common.css
index 431d62e..89748f0 100644
--- a/clams-server/src/main/resources/public/css/common.css
+++ b/clams-server/src/main/resources/public/css/common.css
@@ -4,9 +4,10 @@
     --bg-color: #f4f4f0;
     --text-color: #363737;
     --border-color: #ccc;
+    --accent-color: #8fae8f;
     --font-serif: "Spectral", Georgia, serif;
     --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    --font-size-body: 1.05rem;
+    --font-size-body: 1.2rem;
     --font-size-small: 0.9rem;
     --font-size-caption: 0.85rem;
 }
@@ -85,11 +86,11 @@ a {
     color: var(--text-color);
     text-decoration: underline;
     font-weight: bold;
-    transition: opacity 0.2s;
+    transition: color 0.2s ease;
 }
 
 a:hover {
-    opacity: 0.7;
+    color: var(--accent-color);
 }
 
 footer {
@@ -172,7 +173,7 @@ footer p {
     text-decoration: none;
     font-weight: bold;
     opacity: 0.7;
-    transition: opacity 0.2s;
+    transition: color 0.2s ease;
 }
 
 .back-link-top:hover {
diff --git a/clams-server/src/main/resources/templates/article.html b/clams-server/src/main/resources/templates/article.html
index 7d0c23f..98b135b 100644
--- a/clams-server/src/main/resources/templates/article.html
+++ b/clams-server/src/main/resources/templates/article.html
@@ -8,8 +8,6 @@
         <span class="article-author">{{ author }}</span>
     </header>
 
-    <h1>{{ title }}</h1>
-
     <article class="article-content">
         {{ content | raw }}
     </article>
diff --git a/clams-server/src/main/resources/templates/articles-search.html b/clams-server/src/main/resources/templates/articles-search.html
new file mode 100644
index 0000000..dd435e5
--- /dev/null
+++ b/clams-server/src/main/resources/templates/articles-search.html
@@ -0,0 +1,41 @@
+{% extends "templates/layout.html" %}
+
+{% block content %}
+<main class="main-container">
+    <a href="/articles" class="back-link-top">&larr; back</a>
+    <header>
+        <h1>My articles</h1>
+        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching articles</p>
+
+        <form action="/articles" method="GET" class="search-form">
+            <input type="text" name="search" value="{{ search_term }}" placeholder="Search articles..." aria-label="Search articles">
+            <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 articles. Or <a href="/articles">go back to all articles</a>.</p>
+                {% else %}
+                    <p>Found no articles matching <strong>"{{ search_term }}"</strong>. <br>
+                        <a href="/articles">Go back to all articles</a>.</p>
+                {% endif %}
+            </div>
+        {% else %}
+            <ul class="search-results-list">
+                {% for article in results %}
+                    <li class="search-result-item">
+                        <span class="search-result-date">{{ article.formattedDate }}</span>
+                        <a href="/articles/{{ article.slug }}">{{ article.title }}</a>
+                        {% if article.summary is not empty %}
+                            <span class="search-result-summary">-- {{ article.summary }}</span>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+</main>
+{% endblock %}
diff --git a/clams-server/src/main/resources/templates/blog-search.html b/clams-server/src/main/resources/templates/blog-search.html
deleted file mode 100644
index dd435e5..0000000
--- a/clams-server/src/main/resources/templates/blog-search.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{% extends "templates/layout.html" %}
-
-{% block content %}
-<main class="main-container">
-    <a href="/articles" class="back-link-top">&larr; back</a>
-    <header>
-        <h1>My articles</h1>
-        <p class="intro-text">For search: "<strong>{{ search_term }}</strong>" -- Found {{ results_count }} matching articles</p>
-
-        <form action="/articles" method="GET" class="search-form">
-            <input type="text" name="search" value="{{ search_term }}" placeholder="Search articles..." aria-label="Search articles">
-            <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 articles. Or <a href="/articles">go back to all articles</a>.</p>
-                {% else %}
-                    <p>Found no articles matching <strong>"{{ search_term }}"</strong>. <br>
-                        <a href="/articles">Go back to all articles</a>.</p>
-                {% endif %}
-            </div>
-        {% else %}
-            <ul class="search-results-list">
-                {% for article in results %}
-                    <li class="search-result-item">
-                        <span class="search-result-date">{{ article.formattedDate }}</span>
-                        <a href="/articles/{{ article.slug }}">{{ article.title }}</a>
-                        {% if article.summary is not empty %}
-                            <span class="search-result-summary">-- {{ article.summary }}</span>
-                        {% endif %}
-                    </li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-    </div>
-</main>
-{% endblock %}
-- 
cgit v1.2.3