diff --git a/hunterdon_fair_housing_map.html b/hunterdon_fair_housing_map.html
index ae83b98..1d4b040 100644
--- a/hunterdon_fair_housing_map.html
+++ b/hunterdon_fair_housing_map.html
@@ -144,29 +144,116 @@
grid-template-columns: 1fr;
}
}
+ /* --- Footer & Split Button CSS --- */
.footer {
text-align: center;
padding: 20px;
+ margin-top: 20px;
background-color: #e9ecef;
color: #495057;
border-top: 1px solid #dee2e6;
- margin-top: 20px;
+ }
+ .footer > span {
+ /* Target the "Created by" text */
+ display: block;
+ margin-bottom: 15px;
}
.footer a {
- color: #2c5aa0;
+ color: #ffffff;
text-decoration: none;
font-weight: bold;
}
- .footer .github-button {
- background-color: #333;
- color: white;
- padding: 8px 15px;
- border-radius: 5px;
- margin-left: 15px;
- transition: background-color 0.3s;
+ .footer a:hover {
+ text-decoration: underline;
}
- .footer .github-button:hover {
- background-color: #555;
+ /* --- Style for "Josh Patra" link only --- */
+ .footer span a {
+ color: #2c5aa0; /* This is a blue from your header for a consistent look */
+ text-decoration: none; /* Removes the default underline */
+ }
+
+ /* Adds the underline back only when you hover over the name */
+ .footer span a:hover {
+ text-decoration: underline;
+ }
+
+ /* The main container for our two buttons */
+ .source-button-container {
+ display: inline-flex; /* Use inline-flex to keep it centered and sized to content */
+ border-radius: 8px;
+ overflow: hidden; /* Crucial for keeping the rounded corners on the inner links */
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ width: 90px; /* Starting width */
+ transition: width 0.4s ease;
+ }
+
+ /* Style for each link (GitHub and Gitea) */
+ .source-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1; /* Each starts by taking up equal space */
+ padding: 10px;
+ gap: 8px; /* Space between icon and text when it appears */
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ transition:
+ flex-grow 0.4s ease,
+ background-color 0.3s;
+ }
+
+ /* When the container is hovered, expand it */
+ .source-button-container:hover {
+ width: 240px;
+ }
+
+ /* When a specific link is hovered, make it grow much larger */
+ .source-link:hover {
+ flex-grow: 10; /* This makes the hovered link expand significantly */
+ }
+
+ /* Specific colors for each button */
+ .github-link {
+ background-color: #333;
+ }
+ .github-link:hover {
+ background-color: #111;
+ text-decoration: none;
+ }
+
+ .gitea-link {
+ background-color: #7ba956;
+ } /* Gitea's brand green */
+ .gitea-link:hover {
+ background-color: #2a6140;
+ text-decoration: none;
+ }
+
+ /* Styling for the icons inside the buttons */
+ .source-link svg {
+ width: 20px;
+ height: 20px;
+ fill: currentColor;
+ flex-shrink: 0; /* Prevents the icon from being squished */
+ }
+
+ /* The text inside the button, hidden by default */
+ .source-link span {
+ max-width: 0;
+ opacity: 0;
+ overflow: hidden;
+ white-space: nowrap; /* Prevents text wrapping during animation */
+ transition:
+ max-width 0.4s ease-in-out,
+ opacity 0.2s ease;
+ }
+
+ /* On hover, reveal the text */
+ .source-link:hover span {
+ max-width: 80px; /* Make room for the text to appear */
+ opacity: 1;
+ transition-delay: 0.1s; /* Slight delay so the box expands first */
}
@@ -3167,6 +3254,7 @@
loadAllOverlays();
+