Responsive!
This commit is contained in:
parent
e4dca5500f
commit
96f6b69e31
3 changed files with 17 additions and 23 deletions
|
@ -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 {
|
||||
|
|
|
@ -55,26 +55,26 @@
|
|||
<div>
|
||||
<span><img src="img/twemoji_trans.svg" width="32px" height="32px" alt="🏳️⚧️" class="icon"/></span> <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>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue