update cvs and css

.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,60 +1,38 @@
-.cv {
+#cv {
-	width: auto;
+  header {
-	max-width: 900px;
+    height: 300px;
+  }
 }
 
 .cv {
-	display: flex;
+  display: flex;
-	text-align: left;
+  flex-direction: column;
-}
+  text-align: left;
-.cv summary {
+  width: auto;
-	position: relative;
+  max-width: 900px;
-	list-style-position: outside;
-	list-style-type: "▸ ";
-	font-size: 1.8rem;
-	margin: auto;
-	width: fit-content;
-}
-.cv summary .open {
-	display: none;
-}
-.cv summary .close {
-	display: inline;
-}
 
-.cv .cv_download {
+  > *:last-child {
-	display: inline-block;
+    margin-bottom: 100px;
-	width: 100%;
+  }
-	margin-top: 30px;
-	text-align: center;
-}
 
-.cv[open] summary {
+  .cv_download {
-	list-style-type: "▾ ";
+    display: flex;
-}
+    flex-wrap: wrap;
-.cv[open] summary .open {
+    gap: 10px;
-	display: inline;
+    margin-top: 30px;
-}
+  }
-.cv[open] summary .close {
-	display: none;
-}
 
-.cv > *:last-child {
+  .banner {
-	margin-bottom: 100px;
+    margin: 0px 0px 50px;
-}
+  }
 
-.cv .banner {
+  h2 {
-	margin: 0px 0px 50px;
+    margin-top: 100px;
-	/*
+  }
-	margin: 50px 50px;
+
-	width: calc(100% - 100px);
+  ul {
-	*/
+    border: 1px dashed black;
-}
+    padding: 20px;
-.cv h2 {
+    padding-left: 40px;
-	margin-top: 100px;
+  }
-}
-.cv ul {
-	border: 1px dashed black;
-	padding: 20px;
-	padding-left: 40px;
 }

styles/elements/hero.css

@@ -1,18 +1,19 @@
 #hero {
-	min-height: 100vh;
+  min-height: 100vh;
-	grid-template-columns: 1fr auto 1fr;
+  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: 50vh auto 1fr;
+  grid-template-rows: 50vh 1fr;
 }
 #hero .subtitle {
-	text-align: center;
+  text-align: center;
-	display:inline-block;
+  display: inline-block;
-	max-width: 700px;
+  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: fixed;
-	position: absolute;
+  top: 20px;
-	top: 20px;
+  right: 20px;
-	right: 20px;
+  padding: 10px;
-	padding: 10px;
+  cursor: pointer;
-	cursor: pointer;
+  z-index: 1;
-	z-index: 1;
-}
-label#language_label .flag {
-	width: 20px;
-}
-
 
+  .flag {
+    width: 20px;
+  }
+}
 
 /*
-* FR
+* SWITCH FLAG
 */
-input#language:not(:checked) + label #fr {
+#language {
-	display: inline;
+  &:not(:checked) + #language_label {
-}
+    #fr {
-input#language:checked + label #fr {
+      display: inline;
-	display: none;
+    }
-}
-input#language:not(:checked) ~ * span.fr {
-	display: none;
-}
-input#language:checked ~ * span.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;
+  }
+}