This commit is contained in:
parent
f4ec06a1b1
commit
872109b0fd
7 changed files with 33 additions and 16 deletions
|
@ -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');
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue