Add SVG logos to contact links and fix long URL wrapping

Author: Bikram Gole

contact.html

@@ -72,23 +72,59 @@ <h1 id="hero-name" data-name="Open Channel ✉️">Open Channel ✉️</h1>
       <h2>Direct Links 🔗</h2>
       <div class="contact-list tilt-zone">
         <a class="contact-item tilt" href="mailto:Bikramgole.genius@keemail.me">
-          <h3>Primary Email</h3>
+          <h3 class="contact-title">
+            <span class="contact-logo" aria-hidden="true">
+              <svg viewBox="0 0 24 24" role="img" focusable="false">
+                <path d="M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm9 7L4.8 8h14.4L12 13Z"/>
+              </svg>
+            </span>
+            Primary Email
+          </h3>
           <p>Bikramgole.genius@keemail.me</p>
         </a>
         <a class="contact-item tilt" href="mailto:Develope.genius@gmail.com">
-          <h3>Backup Email</h3>
+          <h3 class="contact-title">
+            <span class="contact-logo" aria-hidden="true">
+              <svg viewBox="0 0 24 24" role="img" focusable="false">
+                <path d="M3 6h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm9 7L4.8 8h14.4L12 13Z"/>
+              </svg>
+            </span>
+            Backup Email
+          </h3>
           <p>Develope.genius@gmail.com</p>
         </a>
         <a class="contact-item tilt" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">
-          <h3>GitHub</h3>
+          <h3 class="contact-title">
+            <span class="contact-logo" aria-hidden="true">
+              <svg viewBox="0 0 24 24" role="img" focusable="false">
+                <path d="M12 .5a12 12 0 0 0-3.79 23.4c.6.11.82-.26.82-.58v-2.2c-3.34.72-4.04-1.61-4.04-1.61a3.17 3.17 0 0 0-1.33-1.75c-1.08-.75.08-.74.08-.74a2.5 2.5 0 0 1 1.82 1.23 2.54 2.54 0 0 0 3.47 1 2.54 2.54 0 0 1 .76-1.59c-2.66-.3-5.47-1.33-5.47-5.92a4.63 4.63 0 0 1 1.24-3.22 4.3 4.3 0 0 1 .12-3.17s1.01-.32 3.3 1.23a11.4 11.4 0 0 1 6.01 0c2.28-1.55 3.3-1.23 3.3-1.23a4.3 4.3 0 0 1 .12 3.17 4.62 4.62 0 0 1 1.23 3.22c0 4.6-2.81 5.61-5.49 5.91a2.84 2.84 0 0 1 .81 2.2v3.27c0 .32.22.69.83.58A12 12 0 0 0 12 .5Z"/>
+              </svg>
+            </span>
+            GitHub
+          </h3>
           <p>github.com/DevXtechnic</p>
         </a>
         <a class="contact-item tilt" href="https://discord.com/users/1471849836931190945" target="_blank" rel="noopener noreferrer">
-          <h3>Discord</h3>
+          <h3 class="contact-title">
+            <span class="contact-logo" aria-hidden="true">
+              <svg viewBox="0 0 24 24" role="img" focusable="false">
+                <path d="M20.32 4.37A19.8 19.8 0 0 0 16.4 3.1a.07.07 0 0 0-.08.04c-.17.31-.37.73-.5 1.05a18.26 18.26 0 0 0-5.63 0c-.13-.32-.33-.74-.5-1.05a.07.07 0 0 0-.08-.04 19.74 19.74 0 0 0-3.93 1.27.06.06 0 0 0-.03.03C3.16 8.16 2.46 11.83 2.8 15.45a.08.08 0 0 0 .03.05 19.9 19.9 0 0 0 4.83 2.44.08.08 0 0 0 .09-.03c.38-.52.72-1.06 1.01-1.64a.08.08 0 0 0-.04-.11 13 13 0 0 1-1.55-.74.08.08 0 0 1-.01-.14c.1-.07.2-.15.3-.22a.07.07 0 0 1 .08-.01c3.26 1.5 6.79 1.5 10 0a.07.07 0 0 1 .09.01c.1.08.2.16.3.22a.08.08 0 0 1-.01.14c-.5.29-1.02.54-1.55.74a.08.08 0 0 0-.04.11c.3.58.63 1.12 1.01 1.64a.08.08 0 0 0 .09.03 19.84 19.84 0 0 0 4.84-2.44.08.08 0 0 0 .03-.05c.41-4.19-.68-7.83-2.85-11.05a.06.06 0 0 0-.03-.03ZM9.55 13.24c-.98 0-1.78-.9-1.78-2s.79-2 1.78-2c1 0 1.8.9 1.79 2 0 1.1-.79 2-1.79 2Zm4.9 0c-.98 0-1.78-.9-1.78-2s.79-2 1.78-2 1.8.9 1.79 2c0 1.1-.79 2-1.79 2Z"/>
+              </svg>
+            </span>
+            Discord
+          </h3>
           <p>discord.com/users/1471849836931190945</p>
         </a>
         <a class="contact-item tilt" href="https://smp11.simplex.im/a#7qVOPQjQgiF604MqanxuUMWq4Az0hTu2io_AraQwyBU" target="_blank" rel="noopener noreferrer">
-          <h3>SimpleX</h3>
+          <h3 class="contact-title">
+            <span class="contact-logo" aria-hidden="true">
+              <svg viewBox="0 0 24 24" role="img" focusable="false">
+                <rect x="2.2" y="2.2" width="19.6" height="19.6" rx="6"/>
+                <path d="M8 8.6h7.5c.9 0 1.7.7 1.7 1.7S16.4 12 15.4 12h-6.8c-1 0-1.8.8-1.8 1.8S7.6 15.6 8.6 15.6H16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </span>
+            SimpleX
+          </h3>
           <p>smp11.simplex.im/a#7qVOPQjQgiF604MqanxuUMWq4Az0hTu2io_AraQwyBU</p>
         </a>
       </div>

styles.css

@@ -1885,6 +1885,9 @@ kbd {
 .contact-item p {
   margin-top: 0;
   font-size: 0.82rem;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.38;
 }
 
 .repo-meta {
@@ -1896,9 +1899,41 @@ kbd {
 .contact-item {
   text-decoration: none;
   color: var(--ink);
+  min-width: 0;
   transition: transform 145ms ease, background 145ms ease;
 }
 
+.contact-title {
+  display: flex;
+  align-items: center;
+  gap: 0.38rem;
+}
+
+.contact-logo {
+  width: 1.05rem;
+  height: 1.05rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: rgba(12, 22, 42, 0.55);
+  color: var(--blue-2);
+  flex: 0 0 auto;
+}
+
+.contact-logo svg {
+  width: 0.72rem;
+  height: 0.72rem;
+  display: block;
+  fill: currentColor;
+}
+
+.contact-item:hover .contact-logo {
+  border-color: rgba(163, 207, 255, 0.6);
+  background: rgba(27, 47, 79, 0.8);
+}
+
 .contact-item:hover {
   transform: translateY(-2px);
   background: rgba(12, 22, 42, 0.96);