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 { .navbar {
list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} display: grid;
grid-template-columns: repeat(6, 1fr);
.navbar li { align-items: center;
display: inline; align-self: center;
margin: 0 .25em;
} }
table { table {

View file

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

View file

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