From cac49da46688680195e26d6c99a15d0976054282 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Wed, 6 Dec 2023 14:19:27 +0100
Subject: [PATCH] edited readme

---
 README.md                    | 26 ++++++++++++++++++++
 index.html                   | 47 +++++++++++++++++++++++-------------
 styles/elements/cv.css       |  2 +-
 styles/elements/home.css     | 13 +++++++++-
 styles/elements/infos.css    |  2 +-
 styles/elements/nav.css      | 29 ++++++++++++++++++++++
 styles/elements/projects.css |  2 +-
 styles/frames.css            |  2 --
 styles/style.css             | 14 ++++++++++-
 9 files changed, 113 insertions(+), 24 deletions(-)
 create mode 100644 styles/elements/nav.css
 delete mode 100644 styles/frames.css

diff --git a/README.md b/README.md
index fa2ebfd..e050efc 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,30 @@
 
+difficulties :
+
+- [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible)
+  - I finally decided to go with a structure like this :
+		```
+		<h1 aria-label="hugo lamy">
+			<span aria-hidden="true" class="pre">
+				         
+				                
+				           
+				               
+				      
+			</span>
+			<span aria-hidden="true" class="pre">
+				               
+				              
+				             
+				                 
+				             
+			</span>
+		</h1>
+		```
+- [create the full screen hero section with the navbar under the title](https://stackoverflow.com/questions/77596781/in-css-how-to-make-a-sticky-navbar-after-the-header-in-an-hero-section/)
+
+---
+
 projects :
 
 - [/] ljdp
diff --git a/index.html b/index.html
index 914304c..9f59841 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
 		<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/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/projects.css" type="text/css" rel="stylesheet">
@@ -41,20 +42,8 @@
 	<main>
 
 
-
-
-
-
-
-
-
-		<!--
-			HOME
-		-->
-		<section class="section home">
-
-			<header>
-				<h1 aria-label="hugo lamy" id="name" class="title">
+		<header>
+			<h1 aria-label="hugo lamy" id="name" class="title">
 <span aria-hidden="true" class="pre">
          
                 
@@ -69,8 +58,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">
                          
                                          
@@ -85,9 +74,33 @@
                                                   
                                  
 </span>
-				</h1>
+			</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>
 			</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">
        
diff --git a/styles/elements/cv.css b/styles/elements/cv.css
index 2136fda..2d19c99 100644
--- a/styles/elements/cv.css
+++ b/styles/elements/cv.css
@@ -34,5 +34,5 @@
 	padding: 10px 0px;
 }
 #cv .mouse {
-	margin-top: 150px;
+	margin-top: 100px;
 }
diff --git a/styles/elements/home.css b/styles/elements/home.css
index 68f610d..eadb1e2 100644
--- a/styles/elements/home.css
+++ b/styles/elements/home.css
@@ -1,3 +1,14 @@
-.home {
+
+#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/infos.css b/styles/elements/infos.css
index 523c10c..7d5ce38 100644
--- a/styles/elements/infos.css
+++ b/styles/elements/infos.css
@@ -3,5 +3,5 @@
 	display: flex;
 	flex-direction: column;
 	place-content: center;
-	height: 400px;
+	height: 200px;
 }
diff --git a/styles/elements/nav.css b/styles/elements/nav.css
new file mode 100644
index 0000000..8f2e9f4
--- /dev/null
+++ b/styles/elements/nav.css
@@ -0,0 +1,29 @@
+
+nav {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+	background-color: #f6f6f6;
+	z-index: 1;
+}
+nav a {
+	position: relative;
+	padding: 10px 20px;
+	height: fit-content;
+	text-decoration: none;
+	color: inherit;
+}
+nav a:before {
+	content: "•";
+	position: absolute;
+	left: 0px;
+}
+nav a:after {
+	content: "•";
+	position: absolute;
+	right: 0px;
+}
+
diff --git a/styles/elements/projects.css b/styles/elements/projects.css
index c8a6b94..2649e37 100644
--- a/styles/elements/projects.css
+++ b/styles/elements/projects.css
@@ -27,5 +27,5 @@
 	margin: 0px 0px 10px 0px;
 }
 #projects .mouse {
-	margin-top: 150px;
+	margin-top: 100px;
 }
diff --git a/styles/frames.css b/styles/frames.css
deleted file mode 100644
index 139597f..0000000
--- a/styles/frames.css
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/styles/style.css b/styles/style.css
index 02fa946..a6a825a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -6,7 +6,7 @@ html {
 	font-size: var(--base_font_size);
 }
 body, main {
-	overflow-x: hidden;
+	overflow-x: clip;
 	margin: auto;
 	width: fit-content;
 	background-color: #f6f6f6;
@@ -18,3 +18,15 @@ pre {
 	margin: 10px 0px;
 }
 
+/* https://css-tricks.com/slow-movement/#h-you-can-implement-native-smooth-scrolling-in-css */
+/* Animate scrolling only if users don’t prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+
+	/* Add some spacing between the target and the top of the viewport */
+	:target {
+		scroll-margin-top: 0px;
+	}
+}