auxolotl/website
24
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: make header max-w-4xl

Browse source
This commit is contained in:
marshmallow 2024-05-06 19:08:56 +10:00
parent 0130e4020f
commit 0aa1c80e8d
1 changed files with 16 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/components/Header.astro
View file

@ -9,81 +9,23 @@ const lang = getLangFromUrl(Astro.url);
const translation = useTranslations(lang); const translation = useTranslations(lang);
--- ---
<header> <header class="sticky flex justify-between top-0 bg-[rgb(var(--background))] z-10 max-w-4xl mx-auto p-4 text-lg">
<div class="left"> <div class="flex items-center">
<a href="https://auxolotl.org" class="brand"> <a href="https://auxolotl.org" class="flex items-center text-lg gap-4">
<Image class="icon" src={aux} alt="auxolotl.org logo" /> <Image class="w-12 h-12" src={aux} alt="auxolotl.org logo" />
<span class="title">auxolotl.org</span> <span>Auxolotl</span>
</a> </a>
</div> </div>
<div class="right">
<nav>
<ul>
<!--
<li><a href="https://auxolotl.org/contribute">Contribute</a></li>
-->
<li><a href="https://wiki.auxolotl.org">Wiki</a></li> <nav>
<li><a href="https://forum.auxolotl.org">{translation("header.community")}</a></li> <ul class="flex gap-4 items-center h-full">
<li><a href="https://github.com/auxolotl">GitHub</a></li> <!--
</ul> <li><a href="https://auxolotl.org/contribute">Contribute</a></li>
</nav> -->
</div>
<li><a href="https://wiki.auxolotl.org">Wiki</a></li>
<li><a href="https://forum.auxolotl.org">{translation("header.community")}</a></li>
<li><a href="https://github.com/auxolotl">GitHub</a></li>
</ul>
</nav>
</header> </header>
<style>
header {
position: sticky;
display: flex;
justify-content: space-between;
top: 0;
background: rgb(var(--background));
padding: 0.5rem 0;
z-index: 100;
}
.left {
display: flex;
align-items: center;
padding-left: 0.5rem;
}
.left .brand {
display: flex;
align-items: center;
font-size: 1.5rem;
}
.left .brand .title {
padding-left: 0.5rem;
}
.icon {
width: 48px;
height: 48px;
}
.right {
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 1rem;
}
.right nav {
display: flex;
align-items: center;
}
.right nav ul {
display: flex;
list-style: none;
}
.right nav ul li {
}
.right nav ul li:not(:last-child) {
margin-right: 1rem;
}
</style>