From 5ccf30034808332aa9a3ac59d203700ebe5d6300 Mon Sep 17 00:00:00 2001 From: fOuttaMyPaint Date: Mon, 23 Dec 2024 16:52:52 -0500 Subject: [PATCH] Refactor UI styles for footer and main content Adjust the styles of the footer and main content to improve the layout and responsiveness. Specifically, the padding and margin of the footer and main sections have been modified to achieve a better visual appearance and spacing. Additionally, the padding-bottom property has been removed from the body element to eliminate unnecessary space at the bottom of the page. These changes ensure a more consistent and visually appealing user experience across different screen sizes. --- css/styles.css | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/css/styles.css b/css/styles.css index 354ef86..7e8041a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -39,6 +39,7 @@ body { min-height: 100vh; display: flex; flex-direction: column; + padding-bottom: 0; } /* Header */ @@ -337,7 +338,7 @@ h2 { padding: 2.5rem; border-radius: 1.25rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); - margin-top: 2rem; + margin-bottom: 4rem; } .dark-mode .improvements-section { @@ -994,8 +995,6 @@ h2 { border-top: 1px solid var(--border-color); background: white; width: 100%; - position: relative; - bottom: 0; } .dark-mode .site-footer { @@ -1095,10 +1094,12 @@ h2 { min-height: 100vh; display: flex; flex-direction: column; + padding-bottom: 0; } main { flex: 1 0 auto; + margin-bottom: 2rem; } @keyframes heartbeat { @@ -1126,4 +1127,15 @@ main { clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .improvements-section { + margin-bottom: 3rem; + } + + main { + margin-bottom: 1.5rem; + } } \ No newline at end of file