add navbar to footer

This commit is contained in:
Nico 2025-08-04 23:42:46 +10:00
parent d0560cb6f4
commit bb4ea44b3e
Signed by: nico
SSH key fingerprint: SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
2 changed files with 49 additions and 28 deletions

View file

@ -18,10 +18,22 @@
<div style="padding: 2em;">{{ content }}</div> <div style="padding: 2em;">{{ content }}</div>
<footer> <footer class="horizontal-flex">
<marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee> <marquee id="footer-scroll" style="font-size: 13vw; width: 50%; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; background-color: var(--accent2); border-radius: var(--rounding)">astolfo.org</marquee>
<!-- idk put astolfo in a train here, learn pixel art someday --> <!-- idk put astolfo in a train here, learn pixel art someday -->
<div> <div>
<div style="display: flex;" class="horizontal-flex">
<ul>
<li><a href="/">home</a></li>
<li><a href="/blog/">blog</a></li>
<li><a href="/store">store</a></li>
<li><a href="https://status.astolfo.org">status</a></li>
</ul>
<ul>
<li><a href="https://git.astolfo.org">git</a></li>
<li><a href="https://sso.astolfo.org">sso</a></li>
</ul>
</div>
<hr> <hr>
<p>site build at commit [PUT COMMIT HERE]. <br>source avaliable at <a href="https://git.nijika.astolfo.org/astolfo/astolfo.org">git.nijika.astolfo.org/astolfo/astolfo.org</a></p> <p>site build at commit [PUT COMMIT HERE]. <br>source avaliable at <a href="https://git.nijika.astolfo.org/astolfo/astolfo.org">git.nijika.astolfo.org/astolfo/astolfo.org</a></p>
<p>all text, html and css licensed under <a href="https://opensource.org/license/0bsd">BSD0</a> unless noted otherwise.</p> <p>all text, html and css licensed under <a href="https://opensource.org/license/0bsd">BSD0</a> unless noted otherwise.</p>

View file

@ -172,32 +172,6 @@ footer p,hr,div {
} }
} }
@media (max-width: 1000px) {
header {
margin: none;
width: 100%;
height: auto;
border-radius: 0px;
margin-top: 0px;
}
header h1 {
top: 0.3em;
}
footer {
flex-direction: column;
}
footer marquee {
width: auto !important;
}
.blog-content {
width: 90vw !important;
}
}
/* /*
* blog * blog
*/ */
@ -211,3 +185,38 @@ footer p,hr,div {
font-family: Serif; font-family: Serif;
font-size: 3rem; font-size: 3rem;
} }
/*
* responsive webpage
*/
.horizontal-flex {
display: flex;
flex-direction: row;
}
@media (max-width: 1000px) {
header {
margin: none;
width: 100%;
height: auto;
border-radius: 0px;
margin-top: 0px;
}
header h1 {
top: 0.3em;
}
.horizontal-flex {
flex-direction: column;
}
footer marquee {
width: auto !important;
}
.blog-content {
width: 90vw !important;
}
}