OwlBoard
/
owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Adjust CSS

This commit is contained in:
Fred Boniface 2024-04-17 10:11:45 +01:00
parent 33fb2a607f
commit 70fb62fd6f
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/navigation/nav.svelte
View File

@ -3,27 +3,31 @@
{ {
title: 'Home', title: 'Home',
path: '/', path: '/',
svgPath: '/images/navigation/home.svg' svgPath: '/images/navigation/home.svg',
icon: IconHome
}, },
{ {
title: 'PIS Finder', title: 'PIS Finder',
path: '/pis/', path: '/pis/',
svgPath: '/images/navigation/info.svg' svgPath: '/images/navigation/info.svg',
icon: IconNumbers
}, },
{ {
title: 'Menu', title: 'Menu',
path: '/more/', path: '/more/',
svgPath: '/images/navigation/more.svg' svgPath: '/images/navigation/more.svg',
icon: IconMenu2
} }
]; ];
import { page } from '$app/stores'; import { page } from '$app/stores';
import { IconHome, IconMenu2, IconNumbers } from '@tabler/icons-svelte';
</script> </script>
<footer> <footer>
{#each links as item} {#each links as item}
<a href={item.path} class:active={$page.url.pathname == item.path}> <a href={item.path} class:active={$page.url.pathname == item.path}>
<img src={item.svgPath} alt={item.title} /> <svelte:component this={item.icon} />
<br /> <br />
<span>{item.title}</span> <span>{item.title}</span>
</a> </a>

3
src/routes/more/+page.svelte
View File

@ -40,6 +40,7 @@
border-style: solid; border-style: solid;
border-left: none; border-left: none;
padding-left: 0.5rem; padding-left: 0.5rem;
overflow-x: hidden;
border-right: none; border-right: none;
height: 50px; height: 50px;
display: flex; display: flex;
@ -50,6 +51,7 @@
text-decoration: none; text-decoration: none;
height: 100%; height: 100%;
vertical-align: middle; vertical-align: middle;
overflow-x: hidden;
} }
p { p {
color: white; color: white;
@ -60,6 +62,7 @@
vertical-align: middle; vertical-align: middle;
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
overflow-x: hidden;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
p { p {