ExploreCraft/website
ExploreCraft/website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Menu Bar Overhaul

Browse source
This commit is contained in:
Sangelo 2023-06-30 15:33:23 +02:00
parent 11f21f0248
commit 084805fa61
1 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/routes/Header.svelte
View file

@ -15,6 +15,9 @@
<li> <li>
<a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a> <a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a>
</li> </li>
<li>
<a href="/modlist" class="contrast {$page.url.pathname === '/modlist' ? 'current-page' : undefined}">Modlist</a>
</li>
<li> <li>
<a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a> <a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a>
</li> </li>
@ -29,6 +32,7 @@
</div> </div>
<hr class="separator" /> <hr class="separator" />
<style> <style>
.header { .header {
display: flex; display: flex;
@ -106,19 +110,45 @@
font-weight: 600; font-weight: 600;
} }
.navigation-bar a.current-page::after {
content: "";
display: block;
width: 20px;
height: 4px;
background-color: #000;
border-radius: 2px;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
[data-theme="dark"] .navigation-bar a.current-page { [data-theme="dark"] .navigation-bar a.current-page {
font-weight: 500; font-weight: 500;
} }
.navigation-bar a:hover { [data-theme="dark"] .navigation-bar a.current-page::after {
font-style: italic; content: "";
font-weight: 300; display: block;
width: 20px;
height: 4px;
background-color: #fff;
border-radius: 2px;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
} }
[data-theme="dark"] .navigation-bar a:hover {
/* .navigation-bar a:hover {
font-style: italic;
font-weight: 300;
} */
/* [data-theme="dark"] .navigation-bar a:hover {
font-style: italic; font-style: italic;
font-weight: 200; font-weight: 200;
} } */
.link { .link {
text-decoration: none; text-decoration: none;