Responsive!

This commit is contained in:
Nexus 2024-05-13 16:34:38 +01:00
parent e4dca5500f
commit 96f6b69e31
Signed by: nex
GPG key ID: 0FA334385D0B689F
3 changed files with 17 additions and 23 deletions

View file

@ -61,14 +61,12 @@ nav {
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline;
margin: 0 .25em;
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: center;
align-self: center;
}
table {

View file

@ -55,26 +55,26 @@
<div>
<span><img src="img/twemoji_trans.svg" width="32px" height="32px" alt="🏳️‍⚧️" class="icon"/></span>&nbsp;<i id="__name">Nexus</i>
</div>
<ul class="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="/chat/#/user/@nex:nexy7574.co.uk" class="icon"><img src="img/matrix-color.svg" width="32px" height="32px" alt="Chat" title="Chat" class="icon"/></a></li>
<li><a href="/status" class="icon"><img src="img/server.svg" alt="Service Status" title="Service Status" width="32px" height="32px" class="icon"/></a></li>
<li>
<div class="navbar">
<div><a href="index.html">Home</a></div>
<div><a href="/chat/#/user/@nex:nexy7574.co.uk" class="icon"><img src="img/matrix-color.svg" width="32px" height="32px" alt="Chat" title="Chat" class="icon"/></a></div>
<div><a href="/status" class="icon"><img src="img/server.svg" alt="Service Status" title="Service Status" width="32px" height="32px" class="icon"/></a></div>
<div>
<a href="https://github.com/nexy7574" rel="noopener noreferrer" target="_blank" class="icon">
<img src="img/github.svg" alt="GitHub" title="GitHub" width="32px" height="32px" class="icon">
</a>
</li>
<li>
</div>
<div>
<a href="https://git.i-am.nexus/nex/nexy7574.co.uk-b" rel="noopener" target="_blank" class="icon">
<img src="img/forgejo-color.svg" alt="Forgejo" title="Forgejo (git) & source code" width="32px" height="32px" class="icon">
</a>
</li>
<li>
</div>
<div>
<a href="https://mastodon.nexy7574.co.uk" rel="noopener noreferrer" target="_blank" class="icon">
<img src="img/mastodon-color.svg" alt="Mastodon" title="Mastodon" width="32px" height="32px" class="icon">
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>

View file

@ -24,12 +24,8 @@
nav {
flex-direction: column;
padding: 0;
}
ul.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2em;
padding: 1em 0;
}
.navbar span {
display: none