update cvs and css

to have the cv in hero section again

This reverts commit 69b111b1e2.

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  // Use Prettier as the default formatter for HTML and CSS
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -1,4 +1,8 @@
 
+html validator : https://validator.w3.org/nu
+
+---
+
 start it with a server, like : `alive-server`                                                                      
 - https://www.npmjs.com/package/alive-server                                                                       
 - install : `npm install -g alive-server`

styles/elements/cv.css

@@ -1,15 +1,38 @@
-.cv {
-	display: flex;
-	flex-direction: column;
-	width: auto;
-	max-width: 900px;
-	margin-bottom: 100px;
-	text-align: left;
+#cv {
+  header {
+    height: 300px;
+  }
 }
 
-.cv .cv_download {
-	display: inline-block;
-	width: 100%;
-	margin-top: 30px;
-	text-align: center;
+.cv {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  width: auto;
+  max-width: 900px;
+
+  > *:last-child {
+    margin-bottom: 100px;
+  }
+
+  .cv_download {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 30px;
+  }
+
+  .banner {
+    margin: 0px 0px 50px;
+  }
+
+  h2 {
+    margin-top: 100px;
+  }
+
+  ul {
+    border: 1px dashed black;
+    padding: 20px;
+    padding-left: 40px;
+  }
 }

styles/elements/hero.css

@@ -1,15 +1,19 @@
 #hero {
-	min-height: 100vh;
-	grid-template-columns: 1fr auto 1fr;
-	/*
+  min-height: 100vh;
+  grid-template-columns: 1fr 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
+	* - the details element 'voir le cv' don't jump when we unroll it
 	*
 	grid-template-rows: 1fr auto 1fr;
+	grid-template-rows: auto auto 1fr;
 	*/
-	grid-template-rows: 1fr 1fr auto;
+  grid-template-rows: 50vh 1fr;
 }
 #hero .subtitle {
-	text-align: center;
+  text-align: center;
+  display: inline-block;
+  max-width: 700px;
+  margin: 0px auto;
 }

styles/elements/language.css

@@ -1,52 +1,59 @@
 input#language {
-	display: none;
+  display: none;
 }
 label#language_label {
-	position: fixed;
-	position: absolute;
-	top: 20px;
-	right: 20px;
-	padding: 10px;
-	cursor: pointer;
-	z-index: 1;
-}
-label#language_label .flag {
-	width: 20px;
-}
-
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 10px;
+  cursor: pointer;
+  z-index: 1;
 
+  .flag {
+    width: 20px;
+  }
+}
 
 /*
-* FR
+* SWITCH FLAG
 */
-input#language:not(:checked) + label #fr {
-	display: inline;
-}
-input#language:checked + label #fr {
-	display: none;
-}
-input#language:not(:checked) ~ * span.fr {
-	display: none;
-}
-input#language:checked ~ * span.fr {
-	display: inline;
-}
+#language {
+  &:not(:checked) + #language_label {
+    #fr {
+      display: inline;
+    }
 
+    #en {
+      display: none;
+    }
+  }
 
+  &:checked + #language_label {
+    #fr {
+      display: none;
+    }
+
+    #en {
+      display: inline;
+    }
+  }
+}
 
 /*
-* EN
+* SWITCH LANGUAGE
 */
-input#language:not(:checked) + label #en {
-	display: none;
-}
-input#language:checked + label #en {
-	display: inline;
-}
-input#language:not(:checked) ~ * span.en {
-	display: inline;
-}
-input#language:checked ~ * span.en {
-	display: none;
-}
 
+#language {
+  ~ * .fr,
+  ~ * .en {
+    display: none;
+  }
+
+  &:not(:checked) ~ * .en {
+    display: inline;
+  }
+
+  &:checked ~ * .fr {
+    display: inline;
+  }
+}

styles/sections.css

@@ -1,6 +1,5 @@
 section {
 	display: grid;
-	position: relative;
 	margin: 0px;
 	width: 100vw;
 	grid-template-columns: auto auto auto;