wip cv grid

src/modules/cv.html

@@ -4,22 +4,27 @@
       height: 300px;
     }
 
-    .cv {
+    .cv_download {
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 30px;
+    }
+
+    .cv {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 20px;
       text-align: left;
       width: auto;
       max-width: 900px;
 
-      > *:last-child {
+      @media (max-width: 750px) {
-        margin-bottom: 100px;
+        grid-template-columns: 1fr;
       }
 
-      .cv_download {
+      > *:last-child {
-        display: flex;
+        margin-bottom: 100px;
-        flex-wrap: wrap;
-        gap: 10px;
-        margin-top: 30px;
       }
 
       .banner {
@@ -27,13 +32,20 @@
       }
 
       h2 {
-        margin-top: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .dashed {
         border: 1px dashed black;
         padding: 20px;
-        padding-left: 40px;
+        box-sizing: border-box;
+        margin: 0px;
+
+        &:is(ul) {
+          padding-left: 40px;
+        }
 
         &.split_columns {
           display: grid;
@@ -44,10 +56,6 @@
           @media (min-width: 900px) {
             grid-auto-flow: column;
             grid-template-rows: auto 1fr;
-
-            ul {
-              padding-left: 0px;
-            }
           }
         }
       }
@@ -85,59 +93,59 @@
         </h1>
   </header>
 
+  <!--
+    CV DOWNLOAD
+  -->
+
+  <div class="cv_download">
+    <p>
+      <span class="fr">télécharger </span>
+      <span class="en">download </span>
+      :
+    </p>
+    <a
+      href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_FR.pdf"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="link to pdf CV version graphical FR"
+    >
+      <span class="fr">[Graphique FR]</span>
+      <span class="en">[Graphical FR]</span>
+    </a>
+    <a
+      href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_EN.pdf"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="link to pdf CV version graphical EN"
+    >
+      <span class="fr">[Graphique EN]</span>
+      <span class="en">[Graphical EN]</span>
+    </a>
+    <a
+      href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_FR.pdf"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="link to pdf CV version ats FR"
+    >
+      <span class="fr">[ATS FR]</span>
+      <span class="en">[ATS FR]</span>
+    </a>
+    <a
+      href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_EN.pdf"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="link to pdf CV version ats EN"
+    >
+      <span class="fr">[ATS EN]</span>
+      <span class="en">[ATS EN]</span>
+    </a>
+  </div>
+
+  <!--
+    CV CONTENT
+  -->
+
   <div class="cv">
-    <!--
-      CV DOWNLLOAD
-    -->
-
-    <div class="cv_download">
-      <p>
-        <span class="fr">télécharger </span>
-        <span class="en">download </span>
-        :
-      </p>
-      <a
-        href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_FR.pdf"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="link to pdf CV version graphical FR"
-      >
-        <span class="fr">[Graphique FR]</span>
-        <span class="en">[Graphical FR]</span>
-      </a>
-      <a
-        href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_EN.pdf"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="link to pdf CV version graphical EN"
-      >
-        <span class="fr">[Graphique EN]</span>
-        <span class="en">[Graphical EN]</span>
-      </a>
-      <a
-        href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_FR.pdf"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="link to pdf CV version ats FR"
-      >
-        <span class="fr">[ATS FR]</span>
-        <span class="en">[ATS FR]</span>
-      </a>
-      <a
-        href="docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_EN.pdf"
-        target="_blank"
-        rel="noopener noreferrer"
-        title="link to pdf CV version ats EN"
-      >
-        <span class="fr">[ATS EN]</span>
-        <span class="en">[ATS EN]</span>
-      </a>
-    </div>
-
-    <!--
-      CV CONTENT
-    -->
-
     <h2 class="dashed">
       <span class="fr">COMPÉTENCES</span>
       <span class="en">SKILLS</span>

src/modules/infos.html

@@ -1,9 +1,35 @@
 <style>
-  #infos article {
+  #infos {
-    display: flex;
+    article {
-    flex-direction: column;
+      display: flex;
-    place-content: center;
+      flex-direction: column;
-    height: 200px;
+      place-content: center;
+
+      a {
+        margin: 20px 0px;
+
+        &.mail {
+          &::before {
+            content: "📧";
+            margin-right: 10px;
+          }
+        }
+
+        &.site {
+          &::before {
+            content: "🌐";
+            margin-right: 10px;
+          }
+        }
+
+        &.git {
+          &::before {
+            content: "💾";
+            margin-right: 10px;
+          }
+        }
+      }
+    }
   }
 </style>
 
@@ -23,7 +49,21 @@
 
 <section id="infos" class="footer section">
   <article>
-    <a href="mailto:hugogogo@protonmail.com">hugogogo@protonmail.com</a>
+    <a href="mailto:hugogogo@protonmail.com" class="mail"
+      >hugogogo@protonmail.com</a
+    >
+    <a
+      href="https://hugulumu.fr"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="site"
+    ></a>
+    <a
+      href="gitea.hugulumu.com"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="git"
+    ></a>
   </article>
 
   <div class="mouse"><div class="frames mouse_4 pre"></div></div>