polsevev/polsevev.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reworked some of the navigation styling

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Header.astro
View file

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

3
src/components/HeaderLink.astro
View file

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

2
src/pages/index.astro
View file

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

3
src/styles/global.css
View file

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