improve: adjust footer layout

This commit is contained in:
h z
2024-12-09 09:25:56 +00:00
parent ba2274c76e
commit 379843404f
2 changed files with 21 additions and 5 deletions

View File

@@ -33,14 +33,22 @@
.footer-content { .footer-content {
margin-bottom: auto; margin-bottom: auto;
text-align: center; text-align: center;
width: 100%;
}
.footer-content a {
color: #fff;
font-size: 1.2rem;
text-decoration: underline;
} }
.footer-icons { .footer-icons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
align-items: flex-end; align-items: flex-start;
margin-right: 1rem; margin-left: 1rem;
width: 100%;
} }
.footer-icon { .footer-icon {

View File

@@ -25,7 +25,15 @@ const Footer = () => {
{isExpanded ? "↓" : "↑"} {isExpanded ? "↓" : "↑"}
</button> </button>
<div className={`footer-content`}> <div className={`footer-content`}>
<p>&copy; {new Date().getFullYear()} Hangman Lab. All rights reserved.</p> <p>&copy; {new Date().getFullYear()} Hangman Lab. {!isVisible && (<span>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="mailto:hzhang@hangman-lab.top">email</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="https://git.hangman-lab.top/hzhang/HangmanLab">git</a>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
</span>
)}</p>
{ {
isVisible && ( isVisible && (
<div <div
@@ -52,10 +60,10 @@ const Footer = () => {
> >
<img <img
src="/icons/git.png" src="/icons/git.png"
alt="GitHub" alt="Git"
className="footer-icon" className="footer-icon"
/> />
GitHub Git
</a> </a>
<a href="mailto:hzhang@hangman-lab.top"> <a href="mailto:hzhang@hangman-lab.top">
<img <img