From 59382b8d21ba580a34019d200325a4f88fa7309b Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Wed, 6 Dec 2023 15:45:28 +0100
Subject: [PATCH] added navbar

---
 index.html                   | 66 +++++++++++-------------------------
 styles/elements/hero.css     | 15 ++++++++
 styles/elements/home.css     | 14 --------
 styles/elements/nav.css      |  4 +--
 styles/elements/sections.css |  1 +
 5 files changed, 37 insertions(+), 63 deletions(-)
 create mode 100644 styles/elements/hero.css
 delete mode 100644 styles/elements/home.css
diff --git a/index.html b/index.html
index 9398150..9962874 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/nav.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
-		<link href="./styles/elements/home.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">
 		<link href="./styles/elements/infos.css" type="text/css" rel="stylesheet">
@@ -35,11 +35,23 @@
 	-->
 
 	<body id="body">
-	<main>
+	<main id="top">
 
 
-		<header>
-			<h1 aria-label="hugo lamy" id="name" class="title">
+		<nav>
+			<a href="#top">accueil</a>
+			<a href="#projects">projets</a>
+			<a href="#cv">cv</a>
+			<a href="#infos">contact</a>
+		</nav>
+
+
+		<!--
+			HERO SECTION
+		-->
+		<section class="section hero" id="hero">
+			<header>
+				<h1 aria-label="hugo lamy" id="name" class="title">
 <span aria-hidden="true" class="pre">
          
                 
@@ -54,8 +66,8 @@
                  
              
 </span>
-			</h1>
-			<h1 aria-label="programmeur informatique" id="title" class="title">
+					</h1>
+					<h1 aria-label="programmeur informatique" id="title" class="title">
 <span aria-hidden="true" class="pre">
                          
                                          
@@ -70,33 +82,9 @@
                                                   
                                  
 </span>
-			</h1>
-		</header>
-		<nav>
-			<a href="#home">accueil</a>
-			<a href="#projects">projets</a>
-			<a href="#cv">cv</a>
-			<a href="#infos">contacte</a>
-		</nav>
-
-
-
-
-
-
-
-
-		<!--
-			HOME
-		-->
-		<section class="section home" id="home">
-
-			<header>
+				</h1>
 			</header>
 
-			<article>
-			</article>
-
 			<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
 <pre class="frame f1" aria-hidden="true">
        
@@ -190,14 +178,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
 </pre>
 			</div>
-
 		</section>
-		<!--
-			END TITLE AREA
-		-->
-
-
-
 
 
 
@@ -330,9 +311,6 @@
 			</div>
 
 		</section>
-		<!--
-			END PROJECTS
-		-->
 
 
 
@@ -494,9 +472,6 @@
 			</div>
 
 		</section>
-		<!--
-			END CV
-		-->
 
 
 
@@ -584,9 +559,6 @@
 			</div>
 
 		</section>
-		<!--
-			END CV
-		-->
 
 
 
diff --git a/styles/elements/hero.css b/styles/elements/hero.css
new file mode 100644
index 0000000..d766a92
--- /dev/null
+++ b/styles/elements/hero.css
@@ -0,0 +1,15 @@
+
+#hero {
+	grid-template-rows: 1fr auto auto;
+	height: 100vh;
+/*
+	grid-template-rows: 1fr 50px auto auto;
+*/
+}
+#hero header {
+}
+#hero .mouse {
+}
+#hero .banner {
+}
+
diff --git a/styles/elements/home.css b/styles/elements/home.css
deleted file mode 100644
index eadb1e2..0000000
--- a/styles/elements/home.css
+++ /dev/null
@@ -1,14 +0,0 @@
-
-#home {
-	height: 100vh;
-	grid-template-rows: 1fr 1fr auto auto;
-/*
-	grid-template-rows: 1fr 50px auto auto;
-*/
-}
-#home article {
-/*
-	height: 10000vh;
-*/
-}
-
diff --git a/styles/elements/nav.css b/styles/elements/nav.css
index 8f2e9f4..81776a7 100644
--- a/styles/elements/nav.css
+++ b/styles/elements/nav.css
@@ -3,11 +3,11 @@ nav {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
-	position: -webkit-sticky;
-	position: sticky;
+	position: fixed;
 	top: 0;
 	background-color: #f6f6f6;
 	z-index: 1;
+	width: 100vw;
 }
 nav a {
 	position: relative;
diff --git a/styles/elements/sections.css b/styles/elements/sections.css
index 5637e01..b02339f 100644
--- a/styles/elements/sections.css
+++ b/styles/elements/sections.css
@@ -16,6 +16,7 @@ section {
 	  / 1fr       auto      1fr      ;
 	grid-gap: 10px;
 	gap: 10px;
+	min-height: 100vh;
 }
 
 section header {
