summaryrefslogtreecommitdiff
path: root/clams-server/src/main/resources/public
diff options
context:
space:
mode:
Diffstat (limited to 'clams-server/src/main/resources/public')
-rw-r--r--clams-server/src/main/resources/public/css/404.css6
-rw-r--r--clams-server/src/main/resources/public/css/article.css22
-rw-r--r--clams-server/src/main/resources/public/css/articles.css30
-rw-r--r--clams-server/src/main/resources/public/css/common.css44
-rw-r--r--clams-server/src/main/resources/public/css/home.css10
-rw-r--r--clams-server/src/main/resources/public/css/projects.css12
6 files changed, 69 insertions, 55 deletions
diff --git a/clams-server/src/main/resources/public/css/404.css b/clams-server/src/main/resources/public/css/404.css
index 6ddf009..372f9a8 100644
--- a/clams-server/src/main/resources/public/css/404.css
+++ b/clams-server/src/main/resources/public/css/404.css
@@ -1,14 +1,14 @@
.error-container {
text-align: center;
- margin-top: 100px;
+ margin-top: 6.2rem;
}
.error-code {
font-size: 5rem;
- margin-bottom: 10px;
+ margin-bottom: 0.6rem;
opacity: 0.3;
}
.error-home-link {
- margin-top: 40px;
+ margin-top: 2.4rem;
}
diff --git a/clams-server/src/main/resources/public/css/article.css b/clams-server/src/main/resources/public/css/article.css
index faf6f90..2ba2b18 100644
--- a/clams-server/src/main/resources/public/css/article.css
+++ b/clams-server/src/main/resources/public/css/article.css
@@ -1,31 +1,37 @@
.article-header {
display: flex;
justify-content: space-between;
- margin-top: 45px;
- margin-bottom: 40px;
+ margin-top: 2.8rem;
+ margin-bottom: 2.5rem;
font-size: 0.9rem;
opacity: 0.7;
border-bottom: 1px solid var(--border-color);
- padding-bottom: 10px;
+ padding-bottom: 0.6rem;
+}
+
+h1 {
+ text-align: left;
}
.article-content {
line-height: 1.8;
- margin-bottom: 80px;
+ 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: 40px 0;
+ margin: 2.4rem 0;
text-align: center;
}
.article-content img {
width: 100%;
- max-width: 550px;
+ max-width: 34.4rem;
height: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
@@ -35,8 +41,8 @@
.article-nav {
display: flex;
justify-content: space-between;
- margin-top: 60px;
- padding-top: 30px;
+ margin-top: 3.8rem;
+ padding-top: 1.8rem;
border-top: 1px dashed var(--border-color);
}
diff --git a/clams-server/src/main/resources/public/css/articles.css b/clams-server/src/main/resources/public/css/articles.css
index b7b7b4f..a3050b0 100644
--- a/clams-server/src/main/resources/public/css/articles.css
+++ b/clams-server/src/main/resources/public/css/articles.css
@@ -1,32 +1,32 @@
.intro-text {
text-align: center;
- max-width: 600px;
- margin: 0 auto 30px auto;
+ max-width: 40ch;
+ margin: 0 auto 1.8rem auto;
}
.articles-section {
- margin-bottom: 60px;
+ margin-bottom: 3.8rem;
}
.search-form {
text-align: center;
- margin-bottom: 40px;
+ margin-bottom: 2.4rem;
}
.search-form input {
font-family: var(--font-serif), serif;
- padding: 6px 10px;
+ padding: 0.4rem 0.6rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background: transparent;
color: var(--text-color);
- width: 180px;
+ width: 11.2rem;
font-size: 0.8rem;
}
.search-form button {
font-family: var(--font-serif), serif;
- padding: 6px 12px;
+ padding: 0.4rem 0.7rem;
background: #e8e8e4;
color: var(--text-color);
border: 1px solid var(--border-color);
@@ -61,8 +61,8 @@
}
.article-list {
- margin-top: 10px;
- padding-left: 35px !important;
+ margin-top: 0.625rem;
+ padding-left: 2.2rem !important;
border-left: 2px solid var(--border-color);
}
@@ -82,8 +82,8 @@
}
.search-results-container {
- max-width: 600px;
- margin: 30px auto 0 auto;
+ max-width: 40ch;
+ margin: 1.8rem auto 0 auto;
}
.search-results-list {
@@ -103,8 +103,8 @@
font-size: 0.9rem;
color: var(--text-color);
opacity: 0.65;
- margin-right: 15px;
- min-width: 110px;
+ margin-right: 0.9rem;
+ min-width: 6.8rem;
}
.search-result-item a {
@@ -118,7 +118,7 @@
}
.no-results {
- padding: 20px;
+ padding: 1.2rem;
background: #e8e8e4;
border-radius: 4px;
text-align: center;
@@ -126,7 +126,7 @@
}
.back-to-articles {
- margin-top: 40px;
+ margin-top: 2.4rem;
display: inline-block;
}
diff --git a/clams-server/src/main/resources/public/css/common.css b/clams-server/src/main/resources/public/css/common.css
index 38c67f8..431d62e 100644
--- a/clams-server/src/main/resources/public/css/common.css
+++ b/clams-server/src/main/resources/public/css/common.css
@@ -6,6 +6,9 @@
--border-color: #ccc;
--font-serif: "Spectral", Georgia, serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+ --font-size-body: 1.05rem;
+ --font-size-small: 0.9rem;
+ --font-size-caption: 0.85rem;
}
h1, h2 {
@@ -19,7 +22,7 @@ html {
html, body {
height: 100%;
margin: 0;
- font-size: 18px;
+ font-size: 1rem;
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-serif), serif;
@@ -33,25 +36,30 @@ body {
}
.main-container {
- max-width: 800px;
+ max-width: 50rem;
width: 90%;
- padding: 20px;
+ padding: 1.25rem;
flex: 1;
position: relative;
}
h1 {
+ font-size: 1.7rem;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ line-height: 0;
text-align: center;
- margin-top: 40px;
- margin-bottom: 40px;
- font-size: 2.5rem;
+}
+
+p, .main-container p {
+ font-size: var(--font-size-body);
}
h2 {
font-size: 1.2rem;
border-bottom: 1px solid var(--border-color);
- margin-bottom: 20px;
- padding-bottom: 5px;
+ margin-bottom: 1.25rem;
+ padding-bottom: 0.3rem;
letter-spacing: 1px;
}
@@ -66,8 +74,8 @@ h2 {
.content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 60px;
- margin-top: 30px;
+ gap: 3.75rem;
+ margin-top: 1.875rem;
}
.left-column { text-align: right; }
@@ -85,10 +93,10 @@ a:hover {
}
footer {
- padding: 30px 20px;
+ padding: 1.875rem 1.25rem;
border-top: 1px solid var(--border-color);
width: 100%;
- font-size: 0.9rem;
+ font-size: var(--font-size-small);
}
footer p {
@@ -101,13 +109,13 @@ footer p {
.footer-left {
flex: 1;
text-align: right;
- padding-right: 15px;
+ padding-right: 0.9rem;
}
.footer-right {
flex: 1;
text-align: left;
- padding-left: 15px;
+ padding-left: 0.9rem;
}
.footer-separator {
@@ -134,7 +142,7 @@ footer p {
}
::-webkit-scrollbar {
- width: 10px;
+ width: 0.6rem;
}
::-webkit-scrollbar-track {
@@ -158,9 +166,9 @@ footer p {
.back-link-top {
position: absolute;
- top: 20px;
- left: 20px;
- font-size: 0.85rem;
+ top: 1.25rem;
+ left: 1.25rem;
+ font-size: var(--font-size-caption);
text-decoration: none;
font-weight: bold;
opacity: 0.7;
diff --git a/clams-server/src/main/resources/public/css/home.css b/clams-server/src/main/resources/public/css/home.css
index 268e371..0106703 100644
--- a/clams-server/src/main/resources/public/css/home.css
+++ b/clams-server/src/main/resources/public/css/home.css
@@ -1,8 +1,8 @@
.content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 60px;
- margin-top: 30px;
+ gap: 3.8rem;
+ margin-top: 1.8rem;
}
.left-column { text-align: right; }
@@ -14,15 +14,15 @@
.profile-img {
border: 3px solid var(--text-color);
border-radius: 20px;
- width: 200px;
+ width: 12.4rem;
display: block;
margin-left: auto;
- margin-bottom: 20px;
+ margin-bottom: 1.2rem;
}
.description {
display: block;
- font-size: 0.9rem;
+ font-size: var(--font-size-small);
opacity: 0.8;
white-space: normal;
overflow: visible;
diff --git a/clams-server/src/main/resources/public/css/projects.css b/clams-server/src/main/resources/public/css/projects.css
index d29f116..f56955b 100644
--- a/clams-server/src/main/resources/public/css/projects.css
+++ b/clams-server/src/main/resources/public/css/projects.css
@@ -1,5 +1,5 @@
.projects-category {
- margin-bottom: 60px;
+ margin-bottom: 3.8rem;
}
.project-list {
@@ -12,8 +12,8 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
- gap: 20px;
- padding: 20px 0;
+ gap: 1.2rem;
+ padding: 1.2rem 0;
border-bottom: 1px solid var(--border-color);
}
@@ -22,7 +22,7 @@
}
.project-item h3 {
- margin: 0 0 8px 0;
+ margin: 0 0 0.4rem 0;
font-size: 1.2rem;
}
@@ -37,7 +37,7 @@
.project-actions {
display: flex;
flex-wrap: wrap;
- gap: 10px;
+ gap: 0.6rem;
justify-content: flex-end;
flex-shrink: 0;
}
@@ -46,7 +46,7 @@
font-size: 0.85rem;
text-decoration: none;
border: 1px solid var(--border-color);
- padding: 4px 10px;
+ padding: 0.2rem 0.6rem;
border-radius: 4px;
background: #e8e8e4;
}