15 website moet functioneel zijn

public/styles/detail.css

@@ -149,6 +149,10 @@ main:has(.elementor-widget-container) {
 	}
 }
 
+b:has(footer){
+	grid-column: 1/-1;
+}
+
 
 
 /* -intro text- */
@@ -353,17 +357,18 @@ select{
 	figure img{
 		width: 100% !important;
 		height: auto;
+
 	}
 
 	.wp-block-image{
 		width: 100% !important;
-		margin-block: 5% ;
+		margin-block: 10% ;
 
 		transition: 1s  forwards ;
 		animation: appear-subtopic 1s forwards ease-out  ;
         animation-timeline: view();
-        animation-range:entry 1rem ;
-        /* animation-range:exit  ; */
+        animation-range-start:entry  ;
+        animation-range-end:contain ;
         opacity: 0;
 	    z-index: 0 ;
 		max-height: 40%;
@@ -413,7 +418,7 @@ select{
 		content: close-quote;
 		position: absolute;
 		top: 34%;
-		left: 95%;
+		left: 99%;
 		/* outline: solid rgb(0, 145, 255); */
 	}
 
@@ -431,11 +436,11 @@ select{
 
 	em{
 		font-style: italic;
-		color: #373636;
+		color: #373434;
 	}
 
 	:nth-last-child(1) em:nth-last-of-type(1) {
-		color: rgb(107, 107, 18);
+		color: rgb(114, 114, 23);
 
 	}
 }
@@ -789,5 +794,19 @@ footer{
 		fill: var(--text-dm-color);
 	}
 
-
+	#main-article em{
+
+		color: #625b5b;
+		color: var(--bg-color);
+		mix-blend-mode:difference;
+		filter:hue-rotate(10deg)saturate(70%);
+
+		/* :nth-last-child(1) em:nth-last-of-type(1) {
+			color: rgb(114, 114, 23);
+			mix-blend-mode:difference;
+			filter: none !important;
+
+		} */
+
+	}
 }

public/styles/header.css

@@ -115,6 +115,11 @@ header nav{
     width: min(220px,100%);
 }
 
+.mobile-logo,.desktop-logo{
+
+    width: min(220px,100%);
+}
+
 .desktop-menu a svg {
     width:fit-content ;
 }
@@ -335,6 +340,10 @@ header nav{
         }
     }
 
+    .mobile-menu {
+        border-bottom: solid 1px white;
+    }
+
     #mobile-menu-window .menu-exit svg path {
         stroke: var(--text-dm-color);
     }
@@ -347,9 +356,9 @@ header nav{
        fill: var(--text-dm-color);
     }
 
-    
+
     /* .desktop-menu a svg {
-        fill: white;
+        fill: #fff;
     } */
 
     :is(.desktop-logo,.mobile-logo,.desktop-pages) svg  {

public/styles/home-page.css

@@ -166,17 +166,23 @@ main{
 		background-size: cover;
 	}
 
+	article.highlighted-post .post-image:hover, section.carousel li:hover{
+		transform: translateY(-2.8px);
+		transition: transform 70ms ease-out;
+	}
+
 	article.highlighted-post .overlay {
 		position: absolute;
 		bottom: 0;
 		left: 0;
 		width: 100%;
-		height: 125px;
+		height: 145px;
 		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
 	}
 
 	article.highlighted-post .post-title, 
 	article.highlighted-post .post-meta {
+		font-family: sans-serif;
 		width: 90%;
 		position: absolute;
 		bottom: 15px;
@@ -186,6 +192,7 @@ main{
 		z-index: 1;
 	}
 
+
 	/* First Highlighted Post */
 	article.highlighted-post:first-of-type {
 		grid-column: 1 / 3;
@@ -196,33 +203,41 @@ main{
 	}
 
 	article.highlighted-post:first-of-type .post-title {
-		font-size: 1em;
-		bottom: 40px;
-		-webkit-line-clamp: 2;
+		font-family: sans-serif;
+		font-size: 1.25em;
+		left: 20px;
+		bottom: 50px;
+		-webkit-line-clamp: 3;
 	}
 
 	article.highlighted-post:first-of-type .post-meta {
-		bottom: 10px;
+		left: 20px;
+		bottom: 20px;
 		display: flex;
 		justify-content: space-between;
 		color: #B1B1B1;
-		font-size: 12px;
+		font-size: 1em;
 		background-color: unset;
 		height: unset;
 	}
 
 	/* Carousel Section */
 	section.carousel ul {
+		position: relative;
 		display: flex;
 		overflow: auto;
 		scroll-snap-type: x mandatory;
 		gap: 2em;
+		/* outline: solid blue; */
+		/* height: 34dvh; */
 	}
 
 	section.carousel li {
+		position: relative;
 		margin-block: 2em;
 		text-align: center;
-		width: 70vw;
+		width: 70dvw;
+		/* height: 27dvh; */
 		flex: 70vw 0 0;
 		scroll-snap-align: center;
 	}
@@ -235,7 +250,14 @@ main{
 	}
 
 	section.carousel .post-title {
-		margin: 0 0 1.5rem;
+		margin: 0 0 1rem;
+		height: 7dvh;
+		height: 100%;
+	}
+
+	section.carousel .post-meta {
+		position: relative;
+
 	}
 
 	/* Scrollbar Support */

views/partials/header.ejs

@@ -99,7 +99,20 @@
 					</svg>
 					<span>Nieuwsbrief</span>
 				</div>
-				<div class="theme">		
+				<div class="theme">
+					<svg width="30" height="30" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+						<g id="Layer_2" data-name="Layer 2">
+						  <g id="Icons">
+							<g>
+							  <rect width="30" height="30" fill="none"/>
+							  <g>
+								<path d="M14,24A10,10,0,0,0,24,34V14A10,10,0,0,0,14,24Z"/>
+								<path d="M24,2A22,22,0,1,0,46,24,21.9,21.9,0,0,0,24,2ZM6,24A18.1,18.1,0,0,1,24,6v8a10,10,0,0,1,0,20v8A18.1,18.1,0,0,1,6,24Z"/>
+							  </g>
+							</g>
+						  </g>
+						</g>
+					  </svg>		
 					<span>
 						<details class="dropdown" hidden>
 							<summary class="dropbtn">

views/partials/like.ejs

@@ -1,5 +1,5 @@
 
-<form method="post" action="/post/<%= post.id %>/likes">
+<form method="post" action="/detail/<%= post.id %>/likes">
 
 	<input type="hidden" name="like" value="like">
 

views/partials/share.ejs

@@ -1,5 +1,5 @@
 
-<form method="post" action="/post/<%= post.id %>/share">
+<form method="post" action="/detail/<%= post.id %>/share">
 
 	<input type="hidden" name="share" value="shares">