From 5ac83efd59ab85d0bdf82d5847fe9fe0b11232d9 Mon Sep 17 00:00:00 2001 From: Elias Haugsbakk Date: Wed, 22 Jul 2026 14:14:24 +0200 Subject: update article to post on the backend and blog on the frontend --- .../src/main/resources/public/css/article.css | 63 ----------- .../src/main/resources/public/css/articles.css | 125 --------------------- .../src/main/resources/public/css/post.css | 63 +++++++++++ .../src/main/resources/public/css/posts.css | 125 +++++++++++++++++++++ 4 files changed, 188 insertions(+), 188 deletions(-) delete mode 100644 clams-server/src/main/resources/public/css/article.css delete mode 100644 clams-server/src/main/resources/public/css/articles.css create mode 100644 clams-server/src/main/resources/public/css/post.css create mode 100644 clams-server/src/main/resources/public/css/posts.css (limited to 'clams-server/src/main/resources/public') diff --git a/clams-server/src/main/resources/public/css/article.css b/clams-server/src/main/resources/public/css/article.css deleted file mode 100644 index 318df62..0000000 --- a/clams-server/src/main/resources/public/css/article.css +++ /dev/null @@ -1,63 +0,0 @@ -.article-header { - display: flex; - justify-content: space-between; - margin-top: 2.8rem; - margin-bottom: 2.5rem; - font-size: 0.9rem; - opacity: 0.7; - border-bottom: 1px solid var(--border-color); - padding-bottom: 0.6rem; -} - -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); - margin-bottom: 5rem; -} - -.article-content p { - margin-bottom: 1.5rem; - font-size: inherit; -} - -.article-content p:has(img) { - margin: 2.4rem 0; - text-align: center; -} - -.article-content img { - width: 100%; - max-width: 34.4rem; - height: auto; - border: 1px solid var(--border-color); - border-radius: 8px; - display: inline-block; -} - -.article-nav { - display: flex; - justify-content: space-between; - margin-top: 3.8rem; - padding-top: 1.8rem; - border-top: 1px dashed var(--border-color); -} - -@media (max-width: 768px) { - .article-header { - margin-top: 10px; - flex-direction: column; - align-items: center; - gap: 10px; - } -} diff --git a/clams-server/src/main/resources/public/css/articles.css b/clams-server/src/main/resources/public/css/articles.css deleted file mode 100644 index 3ff7648..0000000 --- a/clams-server/src/main/resources/public/css/articles.css +++ /dev/null @@ -1,125 +0,0 @@ -.intro-text { - text-align: center; - max-width: 40ch; - margin: 0 auto 1.8rem auto; -} - -.articles-section { - margin-bottom: 3.8rem; -} - -.search-form { - text-align: center; - margin-bottom: 2.4rem; -} - -.search-form input { - font-family: var(--font-serif), serif; - padding: 0.4rem 0.6rem; - border: 1px solid var(--border-color); - border-radius: 4px; - background: transparent; - color: var(--text-color); - width: 11.2rem; - font-size: 0.8rem; -} - -.search-form button { - margin-left: 0.2rem; -} - -.year-accordion { - margin-bottom: 1.5rem; - cursor: pointer; -} - -.year-toggle { - font-size: 1.25rem; - font-weight: bold; - list-style: none; - margin-bottom: 0.5rem; - transition: color 0.2s ease; -} - -.year-toggle::-webkit-details-marker { - display: none; -} - -.year-toggle:hover { - color: var(--accent-color) -} - -.article-list { - margin-top: 0.625rem; - padding-left: 2.2rem !important; - border-left: 2px solid var(--border-color); -} - -.article-list-item, -.search-result-item { - margin-bottom: 0.8rem; - font-size: 1rem; - line-height: 1.6; -} - -.article-list a, -.search-result-item a { - font-size: 1rem; - font-weight: normal; -} - -.article-date { - display: inline-block; - font-size: 0.9rem; - color: var(--text-color); - opacity: 0.65; - margin-right: 0.9rem; - min-width: 6.8rem; -} - -.featured-desc { - font-weight: normal; - color: var(--text-color); - opacity: 0.85; -} - -.search-results-container { - max-width: 100%; - margin: 1.8rem 0 0 0; -} - -.search-results-list { - list-style-type: none; - margin: 0; - padding: 0 0 0 2.2rem !important; - border-left: 2px solid var(--border-color); -} - -.search-result-item a { - font-size: 1rem; -} - -.search-result-summary { - font-weight: normal; - color: var(--text-color); - opacity: 0.85; -} - -.no-results { - padding: 1.2rem; - background: #e8e8e4; - border-radius: 4px; - text-align: center; - font-style: italic; -} - -.back-to-articles { - margin-top: 2.4rem; - display: inline-block; -} - -@media (max-width: 768px) { - .search-form input { - width: 250px; - } -} diff --git a/clams-server/src/main/resources/public/css/post.css b/clams-server/src/main/resources/public/css/post.css new file mode 100644 index 0000000..a12af10 --- /dev/null +++ b/clams-server/src/main/resources/public/css/post.css @@ -0,0 +1,63 @@ +.post-header { + display: flex; + justify-content: space-between; + margin-top: 2.8rem; + margin-bottom: 2.5rem; + font-size: 0.9rem; + opacity: 0.7; + border-bottom: 1px solid var(--border-color); + padding-bottom: 0.6rem; +} + +h1 { + text-align: left; +} + +blockquote { + border-left: 4px solid var(--accent-color); + padding-left: 1rem; + margin-left: 0; + font-style: italic; +} + +.post-content { + line-height: 1.8; + font-size: var(--font-size-body); + margin-bottom: 5rem; +} + +.post-content p { + margin-bottom: 1.5rem; + font-size: inherit; +} + +.post-content p:has(img) { + margin: 2.4rem 0; + text-align: center; +} + +.post-content img { + width: 100%; + max-width: 34.4rem; + height: auto; + border: 1px solid var(--border-color); + border-radius: 8px; + display: inline-block; +} + +.post-nav { + display: flex; + justify-content: space-between; + margin-top: 3.8rem; + padding-top: 1.8rem; + border-top: 1px dashed var(--border-color); +} + +@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/posts.css b/clams-server/src/main/resources/public/css/posts.css new file mode 100644 index 0000000..f6b1565 --- /dev/null +++ b/clams-server/src/main/resources/public/css/posts.css @@ -0,0 +1,125 @@ +.intro-text { + text-align: center; + max-width: 40ch; + margin: 0 auto 1.8rem auto; +} + +.posts-section { + margin-bottom: 3.8rem; +} + +.search-form { + text-align: center; + margin-bottom: 2.4rem; +} + +.search-form input { + font-family: var(--font-serif), serif; + padding: 0.4rem 0.6rem; + border: 1px solid var(--border-color); + border-radius: 4px; + background: transparent; + color: var(--text-color); + width: 11.2rem; + font-size: 0.8rem; +} + +.search-form button { + margin-left: 0.2rem; +} + +.year-accordion { + margin-bottom: 1.5rem; + cursor: pointer; +} + +.year-toggle { + font-size: 1.25rem; + font-weight: bold; + list-style: none; + margin-bottom: 0.5rem; + transition: color 0.2s ease; +} + +.year-toggle::-webkit-details-marker { + display: none; +} + +.year-toggle:hover { + color: var(--accent-color) +} + +.post-list { + margin-top: 0.625rem; + padding-left: 2.2rem !important; + border-left: 2px solid var(--border-color); +} + +.post-list-item, +.search-result-item { + margin-bottom: 0.8rem; + font-size: 1rem; + line-height: 1.6; +} + +.post-list a, +.search-result-item a { + font-size: 1rem; + font-weight: normal; +} + +.post-date { + display: inline-block; + font-size: 0.9rem; + color: var(--text-color); + opacity: 0.65; + margin-right: 0.9rem; + min-width: 6.8rem; +} + +.featured-desc { + font-weight: normal; + color: var(--text-color); + opacity: 0.85; +} + +.search-results-container { + max-width: 100%; + margin: 1.8rem 0 0 0; +} + +.search-results-list { + list-style-type: none; + margin: 0; + padding: 0 0 0 2.2rem !important; + border-left: 2px solid var(--border-color); +} + +.search-result-item a { + font-size: 1rem; +} + +.search-result-summary { + font-weight: normal; + color: var(--text-color); + opacity: 0.85; +} + +.no-results { + padding: 1.2rem; + background: #e8e8e4; + border-radius: 4px; + text-align: center; + font-style: italic; +} + +.back-to-posts { + margin-top: 2.4rem; + display: inline-block; +} + +@media (max-width: 768px) { + .search-form input { + width: 250px; + } +} -- cgit v1.2.3