diff options
Diffstat (limited to 'clams-server/src/main/resources')
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">← 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">← back</a> <header class="post-header"> <span class="post-date">{{ published_date }}</span> <span class="post-author">{{ author }}</span> |