Update view
All checks were successful
ci/woodpecker/push/build Pipeline was successful

This commit is contained in:
Alessio Davoli 2023-07-10 20:01:15 +02:00
parent f4ec06a1b1
commit 872109b0fd
7 changed files with 33 additions and 16 deletions

View file

@ -46,10 +46,6 @@
place-items: center; place-items: center;
} }
.bold {
font-weight: bold;
}
@font-face { @font-face {
font-family: 'Roboto-Regular'; font-family: 'Roboto-Regular';
src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType'); src: url('/fonts/roboto/Roboto-Regular.ttf') format('TrueType');

View file

@ -18,6 +18,9 @@
border-radius: 90px; border-radius: 90px;
box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
background-color: var(--card-background-color); background-color: var(--card-background-color);
position: absolute;
bottom: 0;
margin-bottom: 10px;
} }
#container > a { #container > a {

View file

@ -2,10 +2,10 @@
export let route: App.Route; export let route: App.Route;
</script> </script>
<a href="/routes/{route.id}" <a href="/routes/{route.id}">
><img src="/images/test-1.jpg" alt="route" /> <div id="image" style="background-image: url(/images/test-1.jpg" />
<p>{route.name}</p> <p>{route.name}</p>
{route.duration} <p>{route.duration}</p>
</a> </a>
<style> <style>
@ -13,12 +13,19 @@
display: block; display: block;
box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
border-radius: 30px; border-radius: 30px;
padding: 10px; max-width: 150px;
height: 200px;
max-width: 150px;
} }
a img {
#image {
width: 100%; width: 100%;
height: 150px;
object-fit: cover; object-fit: cover;
border-radius: 30px;
}
a p {
text-decoration: inherit;
color: inherit;
cursor: auto;
padding: 5px;
} }
</style> </style>

View file

@ -18,7 +18,8 @@
<style> <style>
img { img {
position: absolute; position: absolute;
height: 100vh; z-index: 99;
height: 100%;
margin: 0 auto; margin: 0 auto;
} }
</style> </style>

View file

@ -4,7 +4,7 @@
import Splash from '$lib/components/Splash.svelte'; import Splash from '$lib/components/Splash.svelte';
</script> </script>
<Splash></Splash> <Splash />
<header> <header>
<div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div> <div id="welcome-message">Benvenuti a <span class="bold">Pianello Val Tidone</span></div>
</header> </header>
@ -17,9 +17,15 @@
</div> </div>
</main> </main>
<style> <style>
main {
width: 100%;
margin: 0px;
font-family: 'Roboto-Regular';
display: grid;
place-items: center;
}
.bold { .bold {
font-weight: bold; font-weight: bold;
} }

View file

@ -8,7 +8,8 @@ export async function load({ params }) {
routes: [ routes: [
{id: 1, name: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123}, {id: 1, name: 'Percorso Pianello 1', image: '/images/test-1.jpg', duration: 123123123},
{id: 2, name: 'Percorso Pianello 2', image: '/images/test-1.jpg', duration: 123123123}, {id: 2, name: 'Percorso Pianello 2', image: '/images/test-1.jpg', duration: 123123123},
{id: 3, name: 'Percorso Pianello 3', image: '/images/test-1.jpg', duration: 123123123} {id: 3, name: 'Percorso Pianello 3', image: '/images/test-1.jpg', duration: 123123123},
{id: 4, name: 'Percorso Pianello 4', image: '/images/test-1.jpg', duration: 123123123}
] ]
} }
} }

View file

@ -14,7 +14,10 @@
<style> <style>
div { div {
margin-top: 10px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
gap: 30px;
} }
</style> </style>