Reworked some of the navigation styling

This commit is contained in:
Rolf Martin Glomsrud 2024-08-04 21:29:22 +02:00
parent 2dc58f20ce
commit 429e7ff3b0
4 changed files with 13 additions and 10 deletions

View file

@ -7,10 +7,10 @@ import { SITE_TITLE } from '../consts';
<nav> <nav>
<h2><a href="/">{SITE_TITLE}</a></h2> <h2><a href="/">{SITE_TITLE}</a></h2>
<div class="internal-links"> <div class="internal-links">
<HeaderLink href="/">Home</HeaderLink> <HeaderLink href="/">~/</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink> <HeaderLink href="/blog">~/blog</HeaderLink>
<HeaderLink href="/about">About</HeaderLink> <HeaderLink href="/about">~/about</HeaderLink>
<HeaderLink href="/homelab">Homelab</HeaderLink> <HeaderLink href="/homelab">~/homelab</HeaderLink>
</div> </div>
<div class="social-links"> <div class="social-links">
<a href="https://github.com/polsevev" target="_blank"> <a href="https://github.com/polsevev" target="_blank">
@ -33,6 +33,7 @@ import { SITE_TITLE } from '../consts';
box-shadow: 0 2px 8px rgba(var(--black), 5%); box-shadow: 0 2px 8px rgba(var(--black), 5%);
border-radius: 10px; border-radius: 10px;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: white; color: white;
width: 100%; width: 100%;
} }
@ -59,7 +60,7 @@ import { SITE_TITLE } from '../consts';
} }
nav a.active { nav a.active {
text-decoration: none; text-decoration: none;
border-bottom-color: var(--accent); border-bottom-color: cyan;
} }
.social-links, .social-links,
.social-links a { .social-links a {

View file

@ -17,9 +17,10 @@ const isActive = href === pathname || href === '/' + subpath?.[0];
a { a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
a.active { a.active {
font-weight: bolder; font-weight: bolder;
text-decoration: underline; text-decoreation: underline;
} }
</style> </style>

View file

@ -65,7 +65,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
</p> </p>
</left> </left>
<right class="column"> <right class="column">
<img src="public/images/self.png"/> <img src="images/self.png"/>
</right > </right >
</box> </box>

View file

@ -32,6 +32,7 @@
} }
footer{ footer{
height: 4em; height: 4em;
} }
body { body {
@ -101,7 +102,7 @@ a {
color: white; color: white;
} }
a:hover { a:hover {
color: var(--accent); color: black;
} }
p { p {
margin-bottom: 1em; margin-bottom: 1em;