astolfo/astolfo.org
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make footer and nav bar look wayyy better on mobile

Browse source
This commit is contained in:
Nico 2025-09-03 20:22:28 +10:00
parent c591fd2311
commit ab32b85150
Signed by: nico
SSH key fingerprint: SHA256:XuacYOrGqRxC3jVFjfLROn1CSvLz85Dec6N7O9Gwu/0
2 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
_includes/base.html
View file

@ -42,7 +42,7 @@
<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"> <div class="horizontal-flex flex hide-mobile">
<ul> <ul>
<li><a href="/">home</a></li> <li><a href="/">home</a></li>
<li><a href="/blog/">blog</a></li> <li><a href="/blog/">blog</a></li>

28
bundle.css
View file

@ -22,7 +22,8 @@ body {
background-image: url("/img/background.jpg"); background-image: url("/img/background.jpg");
background-position: 100% 100%; background-position: 100% 100%;
background-size: cover; background-size: cover;
backdrop-filter: blur(100px); background-repeat: repeat;
backdrop-filter: blur(5px);
} }
a { a {
@ -261,11 +262,7 @@ footer p,hr,div {
@media (max-width: 1000px) { @media (max-width: 1000px) {
header { header {
margin: none;
width: 100%;
height: auto; height: auto;
border-radius: 0px;
margin-top: 0px;
} }
header h1 { header h1 {
@ -277,6 +274,27 @@ footer p,hr,div {
flex-direction: column; flex-direction: column;
} }
#main-page {
flex-direction: column-reverse;
padding-left: 0px;
}
nav {
width: 100%;
ul {
display: flex;
justify-content: space-evenly;
}
li {
width: fit-content;
}
}
.hide-mobile {
display: none;
}
footer marquee { footer marquee {
width: auto !important; width: auto !important;
} }