From ea7cad51783cd868090472e1be80ebe8cda3e837 Mon Sep 17 00:00:00 2001 From: Elias Haugsbakk Date: Tue, 21 Jul 2026 17:55:32 +0200 Subject: simplify the projects page --- .../src/main/resources/public/css/projects.css | 86 +++++++++++----------- 1 file changed, 44 insertions(+), 42 deletions(-) (limited to 'clams-server/src/main/resources/public') diff --git a/clams-server/src/main/resources/public/css/projects.css b/clams-server/src/main/resources/public/css/projects.css index 58b33aa..d29f116 100644 --- a/clams-server/src/main/resources/public/css/projects.css +++ b/clams-server/src/main/resources/public/css/projects.css @@ -1,67 +1,69 @@ .projects-category { - margin-bottom: 80px; + margin-bottom: 60px; } -.project-item { - margin-bottom: 100px; +.project-list { + list-style: none; + padding: 0; + margin: 0; } -.project-item h3 { - margin-top: 0; - font-size: 1.5rem; +.project-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 20px; + padding: 20px 0; + border-bottom: 1px solid var(--border-color); } -.tech-stack { - margin: 10px 0 20px 0; +.project-item:last-child { + border-bottom: none; } -.tag { - display: inline-block; - background-color: rgba(0,0,0,0.05); - padding: 2px 8px; - border-radius: 4px; - font-size: 0.75rem; - font-weight: bold; - text-transform: uppercase; - letter-spacing: 1px; - margin-right: 5px; - border: 1px solid var(--border-color); +.project-item h3 { + margin: 0 0 8px 0; + font-size: 1.2rem; } -.project-links { - margin-top: 20px; - font-size: 0.9rem; +.project-item p { + margin: 0; } -.project-img, .project-placeholder { - width: 100%; - border: 1px solid var(--border-color); - border-radius: 8px; - display: block; +.project-meta { + flex: 1; } -.project-placeholder { - height: 200px; - background-color: #e0e0dc; +.project-actions { display: flex; - align-items: center; - justify-content: center; - color: #888; - font-size: 0.9rem; + flex-wrap: wrap; + gap: 10px; + justify-content: flex-end; + flex-shrink: 0; } -.simple-project-list { - margin-top: 30px; +.project-actions a { + font-size: 0.85rem; + text-decoration: none; + border: 1px solid var(--border-color); + padding: 4px 10px; + border-radius: 4px; + background: #e8e8e4; } -.simple-project-list li { - margin-bottom: 1.5rem; +.project-actions a:hover { + background: #ddd; } -.tech-stack-inline { - font-size: 0.85rem; - opacity: 0.6; - margin: 0 10px; +@media (max-width: 768px) { + .project-item { + flex-direction: column; + align-items: flex-start; + } + + .project-actions { + justify-content: flex-start; + } } -- cgit v1.2.3