diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 5eb0527..b701941 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -11,7 +11,6 @@
@@ -22,69 +21,40 @@
a {
text-decoration: inherit;
color: inherit;
- cursor: auto;
- }
- .bold {
- font-weight: bold;
- }
- .route-card {
- text-decoration: none;
- display: block;
- flex: 1;
- --route-card-radius: 45px;
- border-radius: var(--route-card-radius);
- box-shadow: 0 0 27px #ccc;
- margin: 0 auto;
- margin-top: 10px;
- margin-bottom: 10px;
- width: 90%;
- display: flex;
- background-color: var(--card-background-color);
-
- }
- .route-card-center {
- font-size: 18px;
- }
-
- .route-card > * {
- flex: 1;
- }
-
- .route-card-left {
- flex: 0 1 20%;
- border-top-left-radius: var(--route-card-radius);
- border-bottom-left-radius: var(--route-card-radius);
+ cursor: pointer;
display: grid;
- place-items: center;
- max-width: 30%;
+ grid-template-columns: 100px auto 100px;
+ max-width: 100%;
+ width: calc(100% - 20px);
+ margin: 0 auto;
}
- .route-card-left img {
- display: block;
- max-width: 55%;
- height: auto;
- }
-
.route-card-right {
- flex: 0 1 20%;
- border-top-right-radius: var(--route-card-radius);
- border-bottom-right-radius: var(--route-card-radius);
+ border-top-right-radius: 45px;
+ border-bottom-right-radius: 45px;
background-image: url('/images/test-1.jpg');
background-position: center;
background-size: cover;
- max-width: 30%;
}
- .route-card .name {
+ .route-card-left {
+ border-top-left-radius: 45px;
+ border-bottom-left-radius: 45px;
display: grid;
- height: 100%;
- align-content: center;
- padding: 0;
- margin-left: 10px;
- margin-right:10px;
- font-size: 27px;
+ place-content: center;
}
- .route-card .name > * {
- flex: 1;
+ .route-card-left img {
+ width: 100%;
+ }
+
+ .route-card-center {
+ display: grid;
+ place-content: center;
+ font-weight: bold;
+ font-size: 20px;
+ padding: 4px;
+ max-width: 100%;
+ text-overflow: ellipsis;
+ text-align: center;
}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index f28b725..396c332 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -48,5 +48,6 @@
grid-row-end: 7;
display: grid;
width: 100%;
+ gap: 5px;
}