Fix carousel, footer alignment, and page layout polish

contact/index.html

@@ -2,12 +2,23 @@
 title: Contact
 description: Contact Rochet2 by email and find links to GitHub, Gist, YouTube, and Pastebin.
 ---
-<p>E-mail: <a href="mailto:Rochet2@post.com">Rochet2@post.com</a></p>
-<p>X: <a href="https://twitter.com/projectcode_zzl">@projectcode_zzl</a></p>
 
-<h1>Links</h1>
-<p><a href="https://github.com/Rochet2">GitHub</a></p>
-<p><a href="https://gist.github.com/Rochet2">Gist</a></p>
-<p><a href="https://www.youtube.com/user/Rochet4">YouTube</a></p>
-<p><a href="https://pastebin.com/u/Rochet2">Pastebin</a></p>
-<p><a href="https://goo.gl/forms/qF1EJuyYJB7m2PO42">Feedback form</a></p>
+<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>
+
+    <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://pastebin.com/u/Rochet2">Pastebin</a> ·
+        <a href="https://goo.gl/forms/qF1EJuyYJB7m2PO42">Feedback form</a>
+    </p>
+</div>

css/style.css

@@ -39,7 +39,8 @@ a:hover, a:focus, a:active {
     text-align: center;
 }
 
-.valign>span {
+.valign>span,
+.valign>a {
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
@@ -124,23 +125,25 @@ a:focus-visible,
 
 .project-header {
     margin: 30px 20px;
-    overflow: auto;
+    display: flex;
+    align-items: center;
+    gap: 20px;
 }
 
 .project-header-icon {
-    float: left;
-    margin: 0 20px 0 0;
+    flex: 0 0 80px;
     height: 80px;
     width: 80px;
 }
 
 .project-header-text {
-    overflow: hidden;
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .project-header-title {
     margin: 0;
-    line-height: 80px;
+    line-height: 1.25;
     font-size: 2rem;
 }
 
@@ -180,7 +183,7 @@ a:focus-visible,
 .home-cta {
     display: inline-block;
     padding: 12px 24px;
-    background-color: #1A1A1A;
+    background-color: #1A1A1A !important;
     color: #FFFFFF !important;
     font-weight: bold;
     transition: background-color 500ms;
@@ -207,6 +210,37 @@ a:focus-visible,
     margin-top: 2rem;
 }
 
+.contact-page {
+    max-width: 560px;
+    margin: 0 auto 3rem;
+}
+
+.contact-intro {
+    color: #444444;
+    margin: 0 0 1.5rem;
+}
+
+.contact-details {
+    display: grid;
+    grid-template-columns: 4.5rem 1fr;
+    gap: 0.75rem 1rem;
+    margin: 0 0 2rem;
+}
+
+.contact-details dt {
+    font-weight: bold;
+    color: #444444;
+}
+
+.contact-details dd {
+    margin: 0;
+}
+
+.contact-links {
+    line-height: 1.8;
+    margin: 0;
+}
+
 #footer {
     position: absolute;
     bottom: 0;
@@ -283,32 +317,42 @@ a:focus-visible,
     list-style: none;
     padding: 0;
     margin: 0;
-}
-
-.gallery-slides::after {
-    content: "";
-    display: table;
-    clear: both;
+    aspect-ratio: 16 / 9;
 }
 
 .gallery-slide {
-    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
     margin: 0;
     padding: 0;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 0;
     -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
 }
 
 .gallery-slide.is-active {
+    opacity: 1;
+    visibility: visible;
+    z-index: 1;
+}
+
+.gallery-slide picture {
     display: block;
-    float: left;
+    width: 100%;
+    height: 100%;
 }
 
-.gallery-slide picture,
 .gallery-slide img {
     display: block;
     width: 100%;
-    height: auto;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
     border: 0;
 }
 

downloads/index.html

@@ -1,11 +1,8 @@
 ---
 title: Downloads
 description: Browse Rochet2 emulator mods and tools, including Eluna, Transmogrification, and Portal Master.
-hide_header: true
 ---
 
-<h1>Downloads</h1>
-
 <p>Click a project below to read more about it and download it</p>
 
 <div id="project-grid" class="project-grid">

index.html

@@ -6,7 +6,7 @@
 <div class="home-intro">
     <h1>Welcome to RochetCode</h1>
     <p class="home-lead">Scripts and core modifications for open-source World of Warcraft emulators. Browse releases for TrinityCore, MaNGOS, Eluna, and more.</p>
-    <p><a class="home-cta" href="{{ site.baseurl }}/downloads">Browse {{ site.posts.size }} projects</a></p>
+    <p><a class="home-cta" href="{{ site.baseurl }}/downloads">Browse projects</a></p>
     <ul class="home-points">
         <li>SQL installs, GitHub source links, and documentation per project</li>
         <li>Screenshots and videos where available</li>

js/gallery.js

@@ -12,9 +12,10 @@
         }
 
         window.setInterval(function () {
+            var next = (current + 1) % slides.length;
+            slides[next].classList.add("is-active");
             slides[current].classList.remove("is-active");
-            current = (current + 1) % slides.length;
-            slides[current].classList.add("is-active");
+            current = next;
         }, 4000);
     });
 })();