Fully working side carousel

frontend/src/lib/components/carousel-vertical.svelte

@@ -49,10 +49,27 @@
 		<div bind:this={movable}>
 			{#each posts as p, index}
 				{#if index > 0}
-					<div class="carousel-v-minpost">
+					<div
+						class="carousel-v-minpost"
+						role="button"
+						tabindex="0"
+						on:click={() => {
+							redirectTo(`/article/${p.slug}`);
+						}}
+						on:keydown={(event) => handleKeyDown(event, `/article/${p.slug}`)}
+					>
+						<img class="carousel-picture" alt="mainpicture" src={p.picture} />
+						<div class="flex-col align justify-center">
 							<h2>{p.title}</h2>
-						<p>{p.date}</p>
-						<p>{p.author}</p>
+							<div class="flex align-center margin-horizontal-05">
+								<SvgIcon type="mdi" path={mdiCalendarRange} size="26" />
+								{p.date}
+							</div>
+							<div class="flex align-center margin-horizontal-05">
+								<SvgIcon type="mdi" path={mdiAccount} size="26" />
+								{p.author}
+							</div>
+						</div>
 					</div>
 				{/if}
 			{/each}

frontend/src/lib/css/carousel.css

@@ -1,14 +1,14 @@
 .carousel-v-main {
-    box-shadow: #00000040 0px 8px 18px -1px;
     padding: 1rem;
-    margin-left: 15%;
-    width: 70%;
+    margin-left: 10dvw;
+    width: 80dvw;
     display: flex;
     flex-direction: row;
-    height: 50dvh;
+    height: calc(50dvh + 2rem*3);
     font-family: Urbanist;
     font-weight: 500;
     font-size: 1.1rem;
+    padding-bottom: 3rem;
 }
 
 .carousel-v-bigpost {
@@ -16,10 +16,12 @@
     width: 50%;
     height: 100%;
     box-shadow: #00000040 0px 8px 18px -1px;
-    margin: auto;
     transition: all .1s ease 0s;
     background-color: var(--color-background);
     z-index: 2;
+    margin-right: 1rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
 }
 
 .carousel-v-bigpost>div {
@@ -40,6 +42,10 @@
     flex-direction: column;
     overflow: hidden;
     position: relative;
+    width: 50%;
+    height: 100%;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
 }
 
 .carousel-v-main h2 {
@@ -51,7 +57,36 @@
     margin-right: 1rem;
 }
 
-.carousel-v-bigpost:hover {
+.carousel-v-bigpost:hover, .carousel-v-minpost:hover {
     cursor: pointer;
     transform: scale(1.01) translateY(-4px);
 }
+
+.carousel-v-minpost {
+    display: flex;
+    flex-direction: row;
+    height: calc(50dvh/3);
+    padding: 1rem;
+    box-shadow: #00000040 0px 8px 18px -1px;
+    transition: all .1s ease 0s;
+    margin-right: 1rem;
+    margin-left: 1rem;
+}
+
+.carousel-v-minpost img {
+    min-width: 50%;
+    max-width: 50%;
+    height: 100%;
+    object-fit: cover;
+    margin: 0;
+    margin-right: 1rem;
+}
+
+.carousel-v-minpost h2 {
+    margin: 0;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}

frontend/src/lib/css/navbar.css

@@ -123,7 +123,7 @@ a {
 /* Floating */
 
 .floating {
-    background-color: rgba(248, 241, 241, 0.1);
+    background-color: rgba(248, 241, 241, 0.5);
     box-shadow: #41354340 0px 8px 18px -1px;
     -webkit-backdrop-filter: blur(1rem);
     backdrop-filter: blur(1rem);