From 5b39b0f8b180a588b50804324e764f31f6f7a60f Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 30 Jan 2025 10:38:01 +0100
Subject: [PATCH] working on block styles

---
 resources/css/blocks/chapter-section.css      | 46 +++++++++++++++++++
 .../css/blocks/gallery-website-screens.css    | 15 ++++++
 resources/css/blocks/portfolio-header.css     | 36 +++++++++++++++
 resources/css/blocks/simple-screen.css        | 17 +++++++
 4 files changed, 114 insertions(+)
 create mode 100644 resources/css/blocks/chapter-section.css
 create mode 100644 resources/css/blocks/gallery-website-screens.css
 create mode 100644 resources/css/blocks/portfolio-header.css
 create mode 100644 resources/css/blocks/simple-screen.css

diff --git a/resources/css/blocks/chapter-section.css b/resources/css/blocks/chapter-section.css
new file mode 100644
index 0000000..af78323
--- /dev/null
+++ b/resources/css/blocks/chapter-section.css
@@ -0,0 +1,46 @@
+.chapter-section {
+	@apply flex items-center justify-center  2xl:gap-12 !my-0;
+	/* min-height: 80vh; */
+	@apply xl:pt-32;
+
+	@apply mx-auto;
+
+	& + *:not(.simple-screen) {
+		@apply xl:mt-32;
+	}
+	&--right {
+		@apply flex-row-reverse;
+	}
+	&__content {
+		flex-shrink: 0;
+		p {
+			@apply text-neutral-600;
+		}
+	}
+	&__innerblocks {
+		@apply max-w-xl;
+		p {
+			@apply max-w-md;
+		}
+	}
+	&__cover {
+		@apply object-contain;
+		min-width: 0;
+		flex-shrink: 1;
+		max-width: 100%; /* Empêche de dépasser son conteneur */
+		display: block;
+
+		&--large {
+			@apply !h-96;
+		}
+		&--grande {
+			@apply !h-80;
+		}
+		&--medium {
+			@apply !h-64;
+		}
+		&--small {
+			@apply !h-12;
+		}
+	}
+}
diff --git a/resources/css/blocks/gallery-website-screens.css b/resources/css/blocks/gallery-website-screens.css
new file mode 100644
index 0000000..467e572
--- /dev/null
+++ b/resources/css/blocks/gallery-website-screens.css
@@ -0,0 +1,15 @@
+.gallery-website-screens {
+	@apply bg-neutral-100 p-10 w-screen;
+	margin: 0 calc(50% - 50vw);
+	ul {
+		@apply gap-4 px-0 md:px-4 lg:px-12 justify-center list-none mx-auto;
+		&.is-grid {
+			@apply grid grid-cols-2 lg:grid-cols-3;
+		}
+		&.is-flex {
+			@apply flex flex-nowrap;
+		}
+
+		max-width: 1800px;
+	}
+}
diff --git a/resources/css/blocks/portfolio-header.css b/resources/css/blocks/portfolio-header.css
new file mode 100644
index 0000000..6cdbeba
--- /dev/null
+++ b/resources/css/blocks/portfolio-header.css
@@ -0,0 +1,36 @@
+.portfolio-header {
+	@apply p-6 relative !w-screen;
+	box-sizing: border-box;
+	margin: 0 calc(50% - 50vw);
+	max-width: 100vw !important;
+	dispay: block;
+
+	&__cover {
+		@apply absolute inset-0 bg-red-400 w-full !h-full object-cover;
+		z-index: -1;
+	}
+
+	&__content {
+		@apply relative z-10 flex flex-col;
+		min-height: 80vh;
+	}
+	&__project-details {
+		@apply my-auto text-sm;
+	}
+
+	&__heading-infos {
+		@apply flex items-center justify-between text-white;
+		@apply text-xs;
+		.project-type {
+			@apply my-0 leading-relaxed;
+		}
+	}
+
+	.client-logo {
+		@apply w-72 h-auto object-contain object-center mx-auto block my-12;
+	}
+
+	&__innerblocks {
+		@apply mx-auto max-w-lg text-white p-8 rounded-lg text-center text-sm;
+	}
+}
diff --git a/resources/css/blocks/simple-screen.css b/resources/css/blocks/simple-screen.css
new file mode 100644
index 0000000..04fd595
--- /dev/null
+++ b/resources/css/blocks/simple-screen.css
@@ -0,0 +1,17 @@
+.simple-screen {
+	@apply alignfull my-0;
+	img {
+		@apply mx-auto;
+	}
+
+	&--full {
+		img {
+			@apply w-full h-auto;
+		}
+	}
+	&--large {
+		img {
+			@apply w-full max-w-screen-2xl h-auto;
+		}
+	}
+}