wip design is mobile first with some bugs

styles/elements/banners.css

@@ -91,3 +91,12 @@
 	--banner_height: calc(var(--base_banner_height) * 5);
 	--dot_size: calc(var(--base_dot_size) * 5);
 }
+
+
+/* specific banners */
+#top_banner {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+}

styles/elements/hero.css

@@ -1,7 +1,14 @@
 #hero {
 	min-height: 100vh;
 	grid-template-columns: 1fr auto 1fr;
-	grid-template-rows: auto auto auto 1fr;
+	/*
+	* WIP : trying to find a solution to have both qualities :
+	* - elements are spread across the page vertically ('hugo lamy developpeur' is not compacted on top)
+	* - the details element 'voir le cv' dont jump when we unroll it
+	*
+	grid-template-rows: 1fr auto 1fr;
+	*/
+	grid-template-rows: auto auto 1fr;
 	.subtitle {
 		text-align: center;
 	}

styles/elements/projects.css

@@ -5,15 +5,29 @@
 	article {
 		display: grid;
 		grid-gap: 20px;
-		grid-auto-columns: repeat(auto-fill, minmax(500px, 1fr));
+		/*
+		* trying to create a responsive design, but still some bugs
+		* so for now stick to mobile first
+		*
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		*/
+		grid-template-columns: auto;
 		p {
 			grid-column: 1 / span 2;
+			grid-column: 1;
+		}
+		img:first-of-type {
+			grid-column: 1;
 		}
 		img {
+			width: 600px;
+		/*
+			min-width: 300px;
+			width: 100%;
 			max-height: 500px;
 			max-width: 500px;
-			width: 100%;
 			margin: 0px auto;
+		*/
 		}
 	}
 	.mouse {

styles/elements/sections.css

@@ -1,39 +0,0 @@
-section {
-	display: grid;
-	margin: 0px;
-	width: 100vw;
-	grid-template-columns: auto auto auto;
-	grid-auto-rows: auto;
-	grid-gap: 10px;
-	gap: 10px;
-	min-height: 100vh;
-	justify-items: center;
-	text-align: center;
-
-	header {
-		display: flex;
-		flex-direction: column;
-		place-content: center;
-
-		h1 {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			justify-content: center;
-		}
-	}
-	article {
-		text-align: left;
-	}
-
-	> * {
-		grid-column: 2 / span 1;
-	}
-	> .grid_full_width {
-		grid-column: 1 / span 3;
-	}
-
-	.banner {
-		overflow-x: hidden;
-	}
-}