From d48462dc32a0ac3808f8b81d3912175ff60e54e9 Mon Sep 17 00:00:00 2001
From: Rochet2 <tqbattlenet@gmail.com>
Date: Tue, 26 May 2026 04:10:01 +0300
Subject: [PATCH] Fix contact page alignment and update YouTube link.

Replace the definition list with a flex contact list, override header title margins, left-align contact content, and point YouTube links to @Rochet2.
---
 contact/index.html | 18 +++++++++++-------
 css/style.css      | 33 ++++++++++++++++++++++-----------
 index.html         |  2 +-
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/contact/index.html b/contact/index.html
index 35303e5..754f33b 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -6,18 +6,22 @@
 <div class="contact-page">
     <p class="contact-intro">Email or social — pick what works.</p>
 
-    <dl class="contact-details">
-        <dt>Email</dt>
-        <dd><a href="mailto:Rochet2@post.com">Rochet2@post.com</a></dd>
-        <dt>X</dt>
-        <dd><a href="https://twitter.com/projectcode_zzl">@projectcode_zzl</a></dd>
-    </dl>
+    <ul class="contact-list">
+        <li class="contact-item">
+            <span class="contact-label">Email</span>
+            <a href="mailto:Rochet2@post.com">Rochet2@post.com</a>
+        </li>
+        <li class="contact-item">
+            <span class="contact-label">X</span>
+            <a href="https://twitter.com/projectcode_zzl">@projectcode_zzl</a>
+        </li>
+    </ul>
 
     <h3>Links</h3>
     <p class="contact-links">
         <a href="https://github.com/Rochet2">GitHub</a> ·
         <a href="https://gist.github.com/Rochet2">Gist</a> ·
-        <a href="https://www.youtube.com/user/Rochet4">YouTube</a> ·
+        <a href="https://www.youtube.com/@Rochet2">YouTube</a> ·
         <a href="https://pastebin.com/u/Rochet2">Pastebin</a> ·
         <a href="https://goo.gl/forms/qF1EJuyYJB7m2PO42">Feedback form</a>
     </p>
diff --git a/css/style.css b/css/style.css
index 00eb966..ca334cf 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,7 +141,7 @@ a:focus-visible,
     min-width: 0;
 }
 
-.project-header-title {
+#content .project-header-title {
     margin: 0;
     line-height: 1.25;
     font-size: 2rem;
@@ -211,29 +211,40 @@ a:focus-visible,
 }
 
 .contact-page {
-    max-width: 560px;
-    margin: 0 auto 3rem;
+    margin: 0 0 2rem;
 }
 
 .contact-intro {
     color: #444444;
+    margin: 0 0 1.25rem;
+}
+
+.contact-list {
+    list-style: none;
+    padding: 0;
     margin: 0 0 1.5rem;
 }
 
-.contact-details {
-    display: grid;
-    grid-template-columns: 4.5rem 1fr;
-    gap: 0.75rem 1rem;
-    margin: 0 0 2rem;
+.contact-item {
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+    margin-bottom: 0.625rem;
 }
 
-.contact-details dt {
+.contact-item:last-child {
+    margin-bottom: 0;
+}
+
+.contact-label {
+    flex: 0 0 4.5rem;
     font-weight: bold;
     color: #444444;
 }
 
-.contact-details dd {
-    margin: 0;
+#content .contact-page h3 {
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
 }
 
 .contact-links {
diff --git a/index.html b/index.html
index e8337c0..acc1246 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@ <h1>Welcome to RochetCode</h1>
     <p class="home-links">
         <a href="https://github.com/Rochet2">GitHub</a> ·
         <a href="https://twitter.com/projectcode_zzl">Twitter</a> ·
-        <a href="https://www.youtube.com/user/Rochet4">YouTube</a> ·
+        <a href="https://www.youtube.com/@Rochet2">YouTube</a> ·
         <a href="{{ site.baseurl }}/contact">Contact</a>
     </p>
 </div>