From 00485dbc704e971e99413447a1a8f0564998d52f Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Sun, 19 May 2024 12:26:30 +0200
Subject: [PATCH] wip design is mobile first with some bugs

---
 index.html                         | 10 ++++++++--
 styles/elements/banners.css        |  9 +++++++++
 styles/elements/hero.css           |  9 ++++++++-
 styles/elements/projects.css       | 18 ++++++++++++++++--
 styles/{elements => }/sections.css |  0
 5 files changed, 41 insertions(+), 5 deletions(-)
 rename styles/{elements => }/sections.css (100%)
diff --git a/index.html b/index.html
index b24fd80..979b6c3 100644
--- a/index.html
+++ b/index.html
@@ -11,10 +11,10 @@
 		<link href="./styles/style.css" type="text/css" rel="stylesheet">
 		<link href="./styles/global.css" type="text/css" rel="stylesheet">
 		<link href="./styles/text.css" type="text/css" rel="stylesheet">
+		<link href="./styles/sections.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/banners.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
-		<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/hero.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/projects.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/cv.css" type="text/css" rel="stylesheet">
@@ -33,6 +33,12 @@
 
 	<body id="body">
 
+		<!--
+			maybe move this outside, so that i can change my mind to put it or not wihtout having to change the grid rows height ?
+			or else, if all rows can be the same, like 1fr or auto, it will also works
+		-->
+		<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
+
 
 
 
@@ -40,7 +46,7 @@
 			HERO SECTION
 		-->
 		<section class="section hero" id="hero">
-			<div id="top_banner" class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
+
 			<header>
 				<h1 aria-label="hugo lamy" id="name" class="title">
 <span aria-hidden="true" class="pre pre_small">
diff --git a/styles/elements/banners.css b/styles/elements/banners.css
index fcc3d14..4092b07 100644
--- a/styles/elements/banners.css
+++ b/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%;
+}
diff --git a/styles/elements/hero.css b/styles/elements/hero.css
index 70b8ed5..3534cee 100644
--- a/styles/elements/hero.css
+++ b/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;
 	}
diff --git a/styles/elements/projects.css b/styles/elements/projects.css
index 566047d..fba0954 100644
--- a/styles/elements/projects.css
+++ b/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 {
diff --git a/styles/elements/sections.css b/styles/sections.css
similarity index 100%
rename from styles/elements/sections.css
rename to styles/sections.css
