mirror of
https://github.com/SoPat712/fair-housing-map.git
synced 2025-08-21 07:38:45 -04:00
Better footer
This commit is contained in:
Josh Patra
@@ -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 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -3167,6 +3254,7 @@
|
||||
loadAllOverlays();
|
||||
</script>
|
||||
</body>
|
||||
<!-- Footer Section -->
|
||||
<footer class="footer">
|
||||
<span>
|
||||
Created by
|
||||
@@ -3174,13 +3262,48 @@
|
||||
>Josh Patra</a
|
||||
>
|
||||
</span>
|
||||
<a
|
||||
href="https://github.com/YOUR-REPO-LINK"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="github-button"
|
||||
>
|
||||
View Source on GitHub
|
||||
</a>
|
||||
|
||||
<div class="source-button-container">
|
||||
<!-- GitHub Link -->
|
||||
<a
|
||||
href="https://github.com/SoPat712/fair-housing-map"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="source-link github-link"
|
||||
title="View Source on GitHub"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
class="bi bi-github"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
|
||||
<!-- Gitea Mirror Link -->
|
||||
<a
|
||||
href="https://gitea.joshpatra.me/joshp/fair-housing-map"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="source-link gitea-link"
|
||||
title="View Source on Gitea (Mirror)"
|
||||
>
|
||||
<!-- PASTE YOUR GITEA SVG CODE HERE -->
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Gitea</title>
|
||||
<path
|
||||
d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Gitea</span>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user