wip cv grid

src/modules/cv.html

@@ -4,17 +4,6 @@
       height: 300px;
     }
 
-    .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;
@@ -22,18 +11,41 @@
       margin-top: 30px;
     }
 
+    .cv {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 20px;
+      text-align: left;
+      width: auto;
+      max-width: 900px;
+
+      @media (max-width: 750px) {
+        grid-template-columns: 1fr;
+      }
+
+      > *:last-child {
+        margin-bottom: 100px;
+      }
+
       .banner {
         margin: 0px 0px 50px;
       }
 
       h2 {
-        margin-top: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .dashed {
         border: 1px dashed black;
         padding: 20px;
+        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,9 +93,8 @@
         </h1>
   </header>
 
-  <div class="cv">
   <!--
-      CV DOWNLLOAD
+    CV DOWNLOAD
   -->
 
   <div class="cv_download">
@@ -138,6 +145,7 @@
     CV CONTENT
   -->
 
+  <div class="cv">
     <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 {
+    article {
       display: flex;
       flex-direction: column;
       place-content: center;
-    height: 200px;
+
+      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>