diff options
Diffstat (limited to 'clams-server/src/main/resources/public/css')
5 files changed, 153 insertions, 34 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; } +} |