diff --git a/public/css/styles.css b/public/css/styles.css index 13275d1..45f9689 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,4 @@ +/* Base Styles */ body { font-family: 'Roboto', sans-serif; display: flex; @@ -5,15 +6,22 @@ body { min-height: 100vh; color: #333; margin: 0; + background-color: #f8f9fa; } main { flex-grow: 1; + padding: 20px; } a { color: #000; text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: #2c5364; } dl, ol, ul { @@ -21,33 +29,46 @@ dl, ol, ul { margin-bottom: 1rem; } +/* Primary Background */ .bg-primary { --bs-bg-opacity: 1; - background-color: rgb(0 0 0) !important; + background-color: rgb(0, 0, 0) !important; } +/* Navbar Styles */ .navbar { background-color: #121212; + padding: 10px 20px; } .navbar-brand { font-size: 1.75rem; font-weight: bold; color: #ffffff; + transition: color 0.2s ease; +} + +.navbar-brand:hover { + color: #2c5364; } .navbar-nav .nav-link { font-size: 1.15rem; padding-right: 1rem; color: #ffffff; + transition: color 0.2s ease; } +.navbar-nav .nav-link:hover { + color: #2c5364; +} + +/* Header */ header { - background: #000000; + background: #000; color: #fff; - padding: 2px 0; + padding: 10px 0; text-align: center; - height: auto; } h1 { @@ -57,9 +78,10 @@ h1 { p.lead { font-size: 1.5rem; + margin-bottom: 1.5rem; } -/* Read Article Button Styling */ +/* Button Styles */ .btn-outline-primary { font-size: 1.25rem; padding: 10px 20px; @@ -75,9 +97,11 @@ p.lead { color: #ffffff; } -/* Pagination Styling */ +/* Pagination Styles */ .pagination { margin-top: 20px; + display: flex; + justify-content: center; } .pagination .page-item .page-link { @@ -100,6 +124,7 @@ p.lead { color: #ffffff; } +/* Footer Styles */ footer { background-color: #121212; color: #fff; @@ -111,40 +136,21 @@ footer { .footer-logo { font-size: 1.5rem; font-weight: bold; + margin-bottom: 10px; } .footer-links a { color: #999; text-decoration: none; margin-right: 1rem; + transition: color 0.2s ease; } .footer-links a:hover { color: #fff; } -/* Custom Styles for Navbar and Dropdown */ -.navbar { - background-color: #121212; -} - -.navbar-brand { - font-size: 1.75rem; - font-weight: bold; - color: #ffffff; -} - -.navbar-nav .nav-link { - font-size: 1.15rem; - color: #ffffff; - padding-right: 1rem; -} - -.navbar-nav .nav-link:hover { - color: #2c5364; -} - -/* Custom Dropdown Styling */ +/* Dropdown Styles */ .custom-dropdown { background-color: #1e1e1e; border: none; @@ -159,21 +165,24 @@ footer { transition: background-color 0.3s ease, color 0.3s ease; } -.custom-dropdown .dropdown-item:hover { - background-color: #000000; - color: #ffffff; -} - +.custom-dropdown .dropdown-item:hover, .custom-dropdown .dropdown-item:active { background-color: #000000; color: #ffffff; } -/* Mobile Toggler */ +/* Mobile Navbar Toggler */ .navbar-toggler { border-color: #ffffff; } .navbar-toggler-icon { - color: #ffffff; + background-color: #ffffff; + width: 30px; + height: 3px; } + +.py-4 { + padding-top: 1.2rem !important; + padding-bottom: 1.5rem !important; +} \ No newline at end of file