|
6 | 6 | } |
7 | 7 |
|
8 | 8 | .news-card .card-title, .home-page-highlighted-paper-card .card-title { |
9 | | - color: #006747; |
| 9 | + color: #21543E; |
10 | 10 | } |
11 | 11 |
|
12 | 12 | .card { |
|
24 | 24 |
|
25 | 25 | @media screen and (min-width:576px){//This messes with extra small sizes |
26 | 26 | .container { |
27 | | - width: 1140px;//This is the maximum width a container can ever be |
| 27 | + width: 100% !important;//This is the maximum width a container can ever be |
28 | 28 | } |
29 | 29 | } |
30 | 30 |
|
|
34 | 34 | } |
35 | 35 |
|
36 | 36 | .nav-bg-color { |
37 | | - background-color: rgba(230,230,230,0.95); |
| 37 | + background-color: #21543E |
38 | 38 | } |
39 | 39 |
|
40 | 40 | /* These styles will force the links to be inline */ |
@@ -119,6 +119,19 @@ body { |
119 | 119 | } |
120 | 120 | } |
121 | 121 |
|
| 122 | +.navbar-collapse { |
| 123 | + background-color: #21543E; /* Match the header background color */ |
| 124 | + padding: 10px; |
| 125 | + border-top: 2px solid rgba(255, 255, 255, 0.3); /* Subtle white line for visual separation */ |
| 126 | + width: 100%; |
| 127 | + position: relative; |
| 128 | +} |
| 129 | + |
| 130 | +.container-fluid { |
| 131 | + padding-left: 0; |
| 132 | + padding-right: 0; |
| 133 | +} |
| 134 | + |
122 | 135 | .navbar .navbar-nav .nav-link:hover, |
123 | 136 | .navbar .navbar-nav .nav-link:focus { |
124 | 137 | color: rgb(245, 184, 90); |
@@ -146,22 +159,61 @@ nav .navbar { |
146 | 159 | margin-right: 2.0rem; |
147 | 160 | } |
148 | 161 |
|
| 162 | +.carousel-control { |
| 163 | + font-size: 50pt; |
| 164 | + color: black; |
| 165 | +} |
| 166 | + |
149 | 167 | #home-page-carousel .carousel-indicators li { |
150 | | - background-color: #999; |
151 | | - background-color: rgba(70,70,70,.25); |
| 168 | + background-color: rgba(70, 70, 70, 0.25); |
| 169 | + width: 15px; /* Increase size */ |
| 170 | + height: 15px; |
| 171 | + border-radius: 50%; /* Make it a perfect circle */ |
| 172 | + margin: 5px; |
152 | 173 | } |
153 | 174 |
|
154 | 175 | #home-page-carousel .carousel-indicators .active { |
155 | 176 | background-color: #444; |
| 177 | + transform: scale(1.3); /* Enlarge the active indicator slightly */ |
156 | 178 | } |
157 | 179 |
|
158 | | -.carousel-control { |
159 | | - font-size: 50pt; |
160 | | - color: black; |
| 180 | +#home-page-carousel .carousel-indicators li:hover { |
| 181 | + background-color: rgba(0, 0, 0, 0.684); |
| 182 | +} |
| 183 | + |
| 184 | +/* Default styles for larger screens (e.g., desktops) */ |
| 185 | +#home-page-carousel { |
| 186 | + height: 400px; /* Fixed height for larger screens */ |
| 187 | + overflow: hidden; |
161 | 188 | } |
162 | 189 |
|
163 | 190 | .carousel-inner > .carousel-item > a > img { |
164 | 191 | width: 100%; |
| 192 | + height: 350px; /* Same height as the carousel for desktops */ |
| 193 | + object-fit: cover; /* Ensures the image fills the container without distortion */ |
| 194 | + object-position: center; |
| 195 | +} |
| 196 | + |
| 197 | +/* Responsive adjustments for smaller screens (e.g., tablets, mobile devices) */ |
| 198 | +@media (max-width: 768px) { |
| 199 | + #home-page-carousel { |
| 200 | + height: 150px; /* Reduced height for mobile and tablets */ |
| 201 | + } |
| 202 | + |
| 203 | + .carousel-inner > .carousel-item > a > img { |
| 204 | + height: 100px; /* Adjusted height to match the carousel container */ |
| 205 | + } |
| 206 | +} |
| 207 | + |
| 208 | +/* Very small screens (e.g., phones) */ |
| 209 | +@media (max-width: 480px) { |
| 210 | + #home-page-carousel { |
| 211 | + height: 150px; /* Further reduced height for very small screens */ |
| 212 | + } |
| 213 | + |
| 214 | + .carousel-inner > .carousel-item > a > img { |
| 215 | + height: 100px; /* Adjusted height to maintain visual consistency */ |
| 216 | + } |
165 | 217 | } |
166 | 218 |
|
167 | 219 | .no-padding { |
@@ -216,7 +268,7 @@ nav .navbar { |
216 | 268 | list-style-type: none; |
217 | 269 | } |
218 | 270 |
|
219 | | -$button-active-color: #006747; |
| 271 | +$button-active-color: #21543E; |
220 | 272 |
|
221 | 273 | .paper-btns.btn-group { |
222 | 274 | display: flex; |
@@ -278,7 +330,7 @@ $button-active-color: #006747; |
278 | 330 | } |
279 | 331 |
|
280 | 332 | .paper_card_header .paper_card_header_name:hover, .grant_card_header .grant_card_header_name:hover { |
281 | | - color: #006747; |
| 333 | + color: #21543E; |
282 | 334 | } |
283 | 335 |
|
284 | 336 | .paper_card .padded-inner-card-block { |
|
0 commit comments