Merge pull request #36 from christoph3r3w/23-detail-pagina-layout-chris

23 detail pagina layout Chris Desktop layout
christoph3r3w · May 24, 2024 · 862e49e · 862e49e
2 parents 801cc01 + 6adecc1
commit 862e49e
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 30 deletions.
diff --git a/public/styles/detail.css b/public/styles/detail.css
@@ -8,7 +8,7 @@ body::after{
 	position: fixed;
 	top: 0;
 	z-index: 100;
-	background-color: red;
+	background-color: #e7432d;
 	width: 100%;
 	scale: 0 1;
 	transform-origin: left;
@@ -50,6 +50,7 @@ main{
 	display: grid;
 	grid-template-rows:auto ;
 	width: 100%;
+	position: relative;
 }
 
 /* post landing section */
@@ -63,6 +64,7 @@ main{
 	background-color: #F4F2EC;
 	padding-block:7%;
 	font-family: Tiempos-Text-Regular;
+	border-radius: 0 0 10px 10px;
 }
 
 .detail-landing-intro{
@@ -90,6 +92,7 @@ main{
 
 	.post-cat a{
 		color: #E85340;
+
 	}
 }
 
@@ -163,8 +166,7 @@ main{
 		width: 100%;
 		height:auto;
 		object-fit: cover;
-		/* padding: 5%; */
-		background-color: aqua;
+		border-radius: 10px;
 	}
 
 	.img-photographer{
@@ -180,18 +182,43 @@ main{
 #btn-nav{
 	grid-column: 1/-1;
 	grid-row: 2;
+	gap: 1rem;
 
 	display: grid;
+	grid-template-columns: subgrid;
 	height: fit-content;
-	gap: 1rem;
-
+	padding-block: 1rem;
+	border-bottom: 1px solid #C4C4C4;
+	;
 }
 
 .button-nav ul {
 	display: flex;
 	flex-direction: row;
 	gap: 1rem;
-	padding-inline: auto;
+	padding-inline: 3%;
+}
+
+button,input,select{
+	--btn-color : #C4C4C4;
+	--btn-color : #373636;
+
+	border: 1px solid var(--btn-color);
+	border-radius: 10px;
+	padding: 5%;
+	color: var(--btn-color) ;
+	background-color: transparent;
+
+	display: flex;
+	flex-direction: row;
+	height: min-content;
+	width: fit-content;
+	align-items: center;
+
+}
+
+select{
+	display: none;
 }
 
 /* //////////////////// */
@@ -261,15 +288,18 @@ main{
 	}
 
 	p {
-		margin-bottom: 1rem;
+		margin-bottom: 1.5rem;
 
 	}
 
 
 
+	em{
+		font-style: italic;
+		color: #373636;
+	}
 
-
-	em:nth-last-of-type(1){
+	:nth-last-child(1) em:nth-last-of-type(1) {
 		color: rgb(107, 107, 18);
 
 	}
@@ -290,8 +320,7 @@ footer{
 
 	body {
 
-	  /* background-color: var(--P-orange); */
-		/* grid-template-columns:
+		grid-template-columns:
 		minmax(0px, auto)
 		[ct-start]
 		repeat(3, 18px)
@@ -303,9 +332,8 @@ footer{
 		repeat(3, 18px)
 		[ct-end]
 		minmax(0px, auto);
+
 	  	column-gap: 30px;
-	  	background-color: rgba(255, 255, 255, 0.962); */
-		  /* background-color: rgb(52, 69, 18); */
 
 
   	}
@@ -317,10 +345,56 @@ footer{
 
 
 	main{
-		display: contents;
-		background-color: yellowgreen;
+		grid-column: 1/-1;
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-template-rows:auto ;
+		width: 100%;
+
 		height: fit-content;
 	}
+
+	#detail-landing{
+		grid-column: 1/-1;
+
+		:is(.detail-landing-intro,.img-container){
+			grid-column: ct;
+		}
+
+
+	}
+
+	#btn-nav{
+		grid-column: ct;
+		grid-row: 2;
+
+
+	}
+
+	#main-article{
+		grid-column: ct;
+		grid-row: 3;
+		display: grid;
+		grid-template-columns: subgrid;
+
+		> :is(
+			p,.wp-block-heading,
+			.wp-block-heading,
+			figure,
+			.wp-block-image,
+			.wp-element-caption,
+			.size-full,
+			.wp-block-quote,
+			em,
+			ul )
+			{
+			grid-column: ct;
+		}
+	}
+
+
+
+
 
 	footer {
 
@@ -332,9 +406,11 @@ footer{
 @media (min-width: 768px) {
 	body {
 	  /* background-color: var(--B-white); */
-	  /* background-color: var(--P-blue); */
-	  /* grid-template-columns:
-		minmax(0px, auto)
+	  --sides :minmax(0px, auto);
+		--bg-color: rgba(214, 168, 134, 0.985);
+
+	  grid-template-columns:
+		var(--sides)
 		[ct-start]
 		repeat(3, 24px)
 		[m-start]
@@ -344,12 +420,50 @@ footer{
 		[m-end]
 		repeat(3, 24px)
 		[ct-end]
-		minmax(0px, auto);
-	  column-gap: 40px; */
+		var(--sides)
+		;
+	  	column-gap: 40px;
 	}
 
 	main{
-		background-color: chocolate;
+		background-color: var(--bg-color) ;
+	}
+
+	.button-nav{
+		position: sticky;
+		top: 0;
+		backdrop-filter: blur(15px);
+		transition: 1s ease-in-out;
+	}
+	.button-nav:hover{
+		background-color: var(--bg-color);
+	}
+
+	#main-article{
+		grid-column: ct;
+		grid-row: 3;
+		display: grid;
+		grid-template-columns: subgrid;
+
+		> :is(
+			p,.wp-block-heading,
+			.wp-block-heading,
+			/* figure, */
+			/* .wp-block-image, */
+			.wp-element-caption,
+			.size-full,
+			.wp-block-quote,
+			em,
+			ul )
+			{
+			grid-column: ct-start/m-end;
+		}
+
+		.wp-block-img,figure{
+			grid-column: ct;
+
+		}
+
 	}
 
 	header{
@@ -362,7 +476,10 @@ footer{
 
 @media (min-width: 1200px) {
 	body {
-	  /* background-color: var(--P-yellow);
+	  /* background-color: var(--P-yellow); */
+	  --bg-color:rgb(176, 183, 162);
+
+
 	  grid-template-columns:
 		minmax(0px, auto)
 		[ct-start]
@@ -374,12 +491,49 @@ footer{
 		[m-end]
 		repeat(3, 60px)
 		[ct-end]
-		minmax(0px, auto); */
+		minmax(0px, auto);
 	}
 
 	main{
-		background-color: aqua;
+
+	}
+
+	#detail-landing{
+
+
+
+		.detail-landing-intro{
+			grid-column: ct-start/mid ;
+			gap: 0px;
+		}
+		.post-cat-date{
+			order: 4;
+		}
+
+		.author-leestijd{
+			width: 75%;
+		}
+
+		&:has(:hover) .img-contents img,.img-photographer {
+			transform: perspective(800px) rotateY(-15deg);				
+		}
+
+
+
+		.img-container{
+			grid-column: mid/ct-end;
+
+			.img-contents img{
+				/* outline: solid green; */
+				/* outline-offset: 3px; */
+				width: 87%;
+				transition: 1s ease-out .1s;
+
+
+			}
+		}
 	}
+
 
 	header {
 
@@ -390,6 +544,9 @@ footer{
   }
 @media (min-width: 1560px) {
 	body {
+		--bg-color: rgba(229, 229, 159, 0.873);
+
+
 	  /* background-color: var(--P-blue90); */
 	  /* grid-template-columns:
 		minmax(0px, auto)
@@ -408,7 +565,6 @@ footer{
 	}
 
 	main{
-		background-color: yellow;
 	}
 
 	header {

diff --git a/views/detail.ejs b/views/detail.ejs
@@ -54,6 +54,7 @@
 			<li><%- include('./partials/share') %></li>
 			<li><%- include('./partials/like') %></li>
 			<li><%- include('./partials/read-mode') %></li>
+			<li><%- include('./partials/speech') %></li>
 		</ul>
 	</nav>
 

diff --git a/views/partials/like.ejs b/views/partials/like.ejs
@@ -5,7 +5,7 @@
 
 	<button type="submit" aria-label="like button">
 		<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-thumb-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg>
-		<p> liked: <span><%= direct.likes %></span></p>
+		<p>  <span><%= direct.likes %></span></p>
 	</button>
 
 </form>
diff --git a/views/partials/share.ejs b/views/partials/share.ejs
@@ -4,9 +4,22 @@
 	<input type="hidden" name="share" value="shares">
 
 	<button type="submit" aria-label="share button">
-		<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
-		<p>gedeelt: <span><%= direct.shares %></span></p>
-
+		<p>Deel: <span><%= direct.shares %></span></p>
+		<!-- <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg> -->
+		<svg 
+		width="20" 
+		height="20" 
+		viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g clip-path="url(#clip0_109_983)">
+			<path d="M16.111 12.2229C15.4809 12.2235 14.8604 12.3773 14.3031 12.6711C13.7457 12.965 13.2682 13.39 12.9118 13.9096L7.48765 11.4605C7.87291 10.5301 7.8744 9.48519 7.49181 8.55378L12.9085 6.09212C13.4367 6.85608 14.2213 7.40542 15.1198 7.64049C16.0184 7.87556 16.9714 7.78079 17.8061 7.37337C18.6407 6.96595 19.3018 6.27287 19.6692 5.41984C20.0366 4.56681 20.0861 3.61034 19.8088 2.72393C19.5314 1.83751 18.9455 1.07986 18.1574 0.588413C17.3693 0.096962 16.4311 -0.0957392 15.5131 0.0452638C14.5951 0.186267 13.758 0.651634 13.1537 1.35695C12.5494 2.06227 12.2179 2.96082 12.2193 3.88962C12.2228 4.10945 12.2451 4.32858 12.286 4.54462L6.52765 7.16128C5.9746 6.64313 5.28224 6.29781 4.53563 6.16775C3.78901 6.03769 3.02067 6.12855 2.32499 6.42916C1.62931 6.72978 1.03658 7.22706 0.619644 7.85992C0.202703 8.49277 -0.0202981 9.23364 -0.0219633 9.99149C-0.0236284 10.7493 0.196115 11.4912 0.610271 12.1259C1.02443 12.7605 1.61496 13.2604 2.30931 13.5641C3.00367 13.8678 3.7716 13.962 4.51878 13.8352C5.26595 13.7084 5.95983 13.3662 6.51515 12.8505L12.2885 15.4571C12.2484 15.673 12.2264 15.8918 12.2226 16.1113C12.2225 16.8806 12.4505 17.6326 12.8777 18.2723C13.305 18.912 13.9124 19.4106 14.6231 19.7051C15.3338 19.9995 16.1158 20.0766 16.8703 19.9266C17.6249 19.7766 18.3179 19.4061 18.8619 18.8622C19.4058 18.3182 19.7763 17.6252 19.9263 16.8707C20.0763 16.1161 19.9992 15.3341 19.7048 14.6234C19.4103 13.9127 18.9117 13.3053 18.272 12.878C17.6323 12.4508 16.8803 12.2228 16.111 12.2229ZM16.111 1.66712C16.5506 1.66695 16.9804 1.79716 17.346 2.04127C17.7116 2.28538 17.9966 2.63243 18.1649 3.03853C18.3332 3.44462 18.3774 3.89152 18.2917 4.32269C18.206 4.75387 17.9944 5.14996 17.6837 5.46087C17.3729 5.77177 16.9769 5.98353 16.5457 6.06935C16.1146 6.15517 15.6676 6.11121 15.2615 5.94302C14.8553 5.77483 14.5082 5.48996 14.2639 5.12446C14.0197 4.75895 13.8893 4.32922 13.8893 3.88962C13.8898 3.30045 14.1239 2.73553 14.5405 2.31885C14.957 1.90217 15.5218 1.66778 16.111 1.66712ZM3.88931 12.2229C3.44971 12.2231 3.01993 12.0929 2.65433 11.8488C2.28873 11.6047 2.00374 11.2576 1.8354 10.8515C1.66705 10.4454 1.62292 9.99855 1.70858 9.56737C1.79425 9.1362 2.00585 8.74011 2.31664 8.4292C2.62743 8.11829 3.02344 7.90654 3.45459 7.82072C3.88573 7.73489 4.33264 7.77886 4.7388 7.94705C5.14496 8.11524 5.49212 8.4001 5.73636 8.76561C5.98061 9.13111 6.11098 9.56085 6.11098 10.0005C6.11032 10.5895 5.87607 11.1543 5.45959 11.571C5.04311 11.9876 4.47841 12.2221 3.88931 12.2229ZM16.111 18.3338C15.6714 18.3338 15.2417 18.2034 14.8762 17.9592C14.5107 17.715 14.2259 17.3679 14.0577 16.9618C13.8894 16.5557 13.8454 16.1088 13.9312 15.6777C14.0169 15.2466 14.2286 14.8506 14.5394 14.5397C14.8503 14.2289 15.2463 14.0172 15.6774 13.9315C16.1085 13.8457 16.5554 13.8897 16.9615 14.058C17.3676 14.2262 17.7147 14.511 17.9589 14.8765C18.2031 15.242 18.3335 15.6717 18.3335 16.1113C18.333 16.7006 18.0987 17.2656 17.682 17.6823C17.2653 18.099 16.7003 18.3333 16.111 18.3338Z" fill="black"/>
+			</g>
+			<defs>
+			<!-- <clipPath id="clip0_109_983">
+			<rect width="20" height="20" fill="white"/>
+			</clipPath> -->
+			</defs>
+			</svg>
+
 	</button>
 
 </form>