Finalize contact page

Author: codefl0w

assets/css/style.css

@@ -336,11 +336,39 @@ main > #readme {
 }
 
 .contact-card h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
   margin: 0 0 0.35rem;
   font-size: 1.05rem;
   color: #ff8ff5;
 }
 
+.contact-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+  flex: 0 0 1.2rem;
+}
+
+.contact-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.contact-card[href*="github.com"] .contact-icon svg,
+.contact-card[href*="xdaforums.com"] .contact-icon svg {
+  fill: currentColor;
+  stroke: none;
+}
+
 .contact-card p {
   margin: 0;
   color: #a0a0a0;

contact.md

@@ -1,34 +1,63 @@
 ---
 layout: default
-title: Contact
+title: Contact Me
 description: "Contact fl0w through GitHub, Telegram, XDA, or email."
 ---
 
 <section class="about-hero">
   <div class="about-grid">
     <div>
       <div class="about-badge">Contact</div>
-      <p class="about-kicker">Reach out through the platform that fits best</p>
-      <p class="about-lead">Use this page as the canonical contact endpoint for my apps, tools, and project pages.</p>
+      <p class="about-lead">You can contact me through these links:</p>
 
       <div class="contact-grid">
         <a class="contact-card" href="https://github.com/codefl0w" target="_blank" rel="noopener">
-          <h2>GitHub</h2>
+          <h2>
+            <span class="contact-icon" aria-hidden="true">
+              <svg viewBox="0 -0.5 25 25" xmlns="http://www.w3.org/2000/svg">
+                <path d="m12.301 0h.093c2.242 0 4.34.613 6.137 1.68l-.055-.031c1.871 1.094 3.386 2.609 4.449 4.422l.031.058c1.04 1.769 1.654 3.896 1.654 6.166 0 5.406-3.483 10-8.327 11.658l-.087.026c-.063.02-.135.031-.209.031-.162 0-.312-.054-.433-.144l.002.001c-.128-.115-.208-.281-.208-.466 0-.005 0-.01 0-.014v.001q0-.048.008-1.226t.008-2.154c.007-.075.011-.161.011-.249 0-.792-.323-1.508-.844-2.025.618-.061 1.176-.163 1.718-.305l-.076.017c.573-.16 1.073-.373 1.537-.642l-.031.017c.508-.28.938-.636 1.292-1.058l.006-.007c.372-.476.663-1.036.84-1.645l.009-.035c.209-.683.329-1.468.329-2.281 0-.045 0-.091-.001-.136v.007c0-.022.001-.047.001-.072 0-1.248-.482-2.383-1.269-3.23l.003.003c.168-.44.265-.948.265-1.479 0-.649-.145-1.263-.404-1.814l.011.026c-.115-.022-.246-.035-.381-.035-.334 0-.649.078-.929.216l.012-.005c-.568.21-1.054.448-1.512.726l.038-.022-.609.384c-.922-.264-1.981-.416-3.075-.416s-2.153.152-3.157.436l.081-.02q-.256-.176-.681-.433c-.373-.214-.814-.421-1.272-.595l-.066-.022c-.293-.154-.64-.244-1.009-.244-.124 0-.246.01-.364.03l.013-.002c-.248.524-.393 1.139-.393 1.788 0 .531.097 1.04.275 1.509l-.01-.029c-.785.844-1.266 1.979-1.266 3.227 0 .025 0 .051.001.076v-.004c-.001.039-.001.084-.001.13 0 .809.12 1.591.344 2.327l-.015-.057c.189.643.476 1.202.85 1.693l-.009-.013c.354.435.782.793 1.267 1.062l.022.011c.432.252.933.465 1.46.614l.046.011c.466.125 1.024.227 1.595.284l.046.004c-.431.428-.718 1-.784 1.638l-.001.012c-.207.101-.448.183-.699.236l-.021.004c-.256.051-.549.08-.85.08-.022 0-.044 0-.066 0h.003c-.394-.008-.756-.136-1.055-.348l.006.004c-.371-.259-.671-.595-.881-.986l-.007-.015c-.198-.336-.459-.614-.768-.827l-.009-.006c-.225-.169-.49-.301-.776-.38l-.016-.004-.32-.048c-.023-.002-.05-.003-.077-.003-.14 0-.273.028-.394.077l.007-.003q-.128.072-.08.184c.039.086.087.16.145.225l-.001-.001c.061.072.13.135.205.19l.003.002.112.08c.283.148.516.354.693.603l.004.006c.191.237.359.505.494.792l.01.024.16.368c.135.402.38.738.7.981l.005.004c.3.234.662.402 1.057.478l.016.002c.33.064.714.104 1.106.112h.007c.045.002.097.002.15.002.261 0 .517-.021.767-.062l-.027.004.368-.064q0 .609.008 1.418t.008.873v.014c0 .185-.08.351-.208.466h-.001c-.119.089-.268.143-.431.143-.075 0-.147-.011-.214-.032l.005.001c-4.929-1.689-8.409-6.283-8.409-11.69 0-2.268.612-4.393 1.681-6.219l-.032.058c1.094-1.871 2.609-3.386 4.422-4.449l.058-.031c1.739-1.034 3.835-1.645 6.073-1.645h.098-.005z"></path>
+              </svg>
+            </span>
+            GitHub
+          </h2>
           <p>codefl0w</p>
         </a>
 
         <a class="contact-card" href="https://t.me/codefl0w#" target="_blank" rel="noopener">
-          <h2>Telegram</h2>
+          <h2>
+            <span class="contact-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M21.5 4.5 18.4 19a1 1 0 0 1-1.5.6l-4.3-3.2-2.2 2.1a1 1 0 0 1-1.7-.6l.3-4.2 7.7-7c.2-.2 0-.5-.3-.3L7 12.2 3 10.8a1 1 0 0 1 0-1.9l17-6.5c.8-.3 1.7.4 1.5 1.1Z"></path>
+              </svg>
+            </span>
+            Telegram
+          </h2>
           <p>@codefl0w</p>
         </a>
 
         <a class="contact-card" href="https://xdaforums.com/m/fl0w.12361087/" target="_blank" rel="noopener">
-          <h2>XDA</h2>
+          <h2>
+            <span class="contact-icon" aria-hidden="true">
+              <svg viewBox="0 0 26.9 33.6" xmlns="http://www.w3.org/2000/svg">
+                <path d="M16 4.4V.1h10.9v24.5H16v-4.2h6.4v-16z"></path>
+                <path d="M10.9 4.4V.1H0v24.5h5.5l5.4 9V20.4H4.5v-16z"></path>
+              </svg>
+            </span>
+            XDA
+          </h2>
           <p>fl0w on XDA Forums</p>
         </a>
 
         <a class="contact-card" href="mailto:fl0w_dev@protonmail.com">
-          <h2>Email</h2>
+          <h2>
+            <span class="contact-icon" aria-hidden="true">
+              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M4 6h16v12H4z"></path>
+                <path d="m4 7 8 6 8-6"></path>
+              </svg>
+            </span>
+            Email
+          </h2>
           <p>fl0w_dev@protonmail.com</p>
         </a>
       </div>

index.html

@@ -12,15 +12,15 @@
       <p class="about-lead">I'm fl0w, an Android developer mainly focused on automation and researching and documenting chipset behavior. I also have community tools, check out my archive below.</p>
 
       <div class="about-links">
-        <a class="pill" href="/archive">
+        <a class="pill pill-primary" href="/archive">
           <svg viewBox="0 0 24 24" aria-hidden="true">
             <path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H9l2 2h7.5A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11Z" />
             <path d="M3 9h18" />
           </svg>
           Archive
         </a>
 
-        <a class="pill pill-primary" href="/contact">
+        <a class="pill" href="/contact">
           <svg viewBox="0 0 24 24" aria-hidden="true">
             <path d="M4 6h16v12H4z" />
             <path d="m4 7 8 6 8-6" />