Improve landing page layout with two-column grid

commitconfirm · claude · commitconfirm · commit 42785aac188a · 2026-03-09T14:14:06.000-06:00
- Preview section on left, setup/auth on right on desktop (900px+)
- Mobile: auth/setup first, preview below
- Move intro text into header with smaller font
- Fix setup-section to be inserted inside landing-grid for proper layout

Co-Authored-By: Claude Opus 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/src/callback.html b/src/callback.html
@@ -16,78 +16,77 @@
         <img src="/spotifort_transparent.png" alt="Spotifort logo" class="site-logo" />
         <h1>Spotifort</h1>
         <p class="tagline">Find which artists you love are playing Treefort 2026</p>
+        <p class="header-intro">Connect your Spotify account to see which artists from your Liked Songs are playing Treefort Music Fest 2026 (March 25-29, Boise, Idaho).</p>
       </header>
 
       <main>
-        <section id="intro-section">
-          <p>Connect your Spotify account to see which artists from your Liked Songs are playing Treefort Music Fest 2026 (March 25-29, Boise, Idaho).</p>
-        </section>
-
-        <section id="preview-section">
-          <h2>Here's what you'll see</h2>
-          <div class="preview-box">
-            <div class="list-box preview-list-box">
-              <h3>Your Treefort Matches</h3>
-              <ul class="artist-list">
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="artist-name-link">Father John Misty</a>
-                  </div>
-                </li>
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/1oPRcJUkloHaRLYx0olBLJ" target="_blank" rel="noopener noreferrer" class="artist-name-link">Magdalena Bay</a>
-                  </div>
-                </li>
-                <li class="artist-item preview-expanded">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[-]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/7qrEXiLLnWkkYHhadZ1Oij" target="_blank" rel="noopener noreferrer" class="artist-name-link">Blondshell</a>
-                  </div>
-                  <div class="artist-related">
-                    <p class="related-header">Other artists at Treefort you might like:</p>
-                    <p class="related-info">Based on shared genres (indie rock). This is not Spotify's "Related Artists" — it's genre matching from our lineup data.</p>
-                    <ul class="related-list">
-                      <li><a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="related-artist-link">Samia</a></li>
-                      <li><a href="https://open.spotify.com/artist/4aEnNH9PuU1HF3TsZTru54" target="_blank" rel="noopener noreferrer" class="related-artist-link">Caracara</a></li>
-                      <li><a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="related-artist-link">Father John Misty</a></li>
-                    </ul>
-                  </div>
-                </li>
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="artist-name-link">Samia</a>
-                  </div>
-                </li>
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/7c3NW1Z7GXA6bhuMmqvJYf" target="_blank" rel="noopener noreferrer" class="artist-name-link">Billie Marten</a>
-                  </div>
-                </li>
-              </ul>
+        <div class="landing-grid">
+          <section id="preview-section">
+            <h2>Here's what you'll see</h2>
+            <div class="preview-box">
+              <div class="list-box preview-list-box">
+                <h3>Your Treefort Matches</h3>
+                <ul class="artist-list">
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="artist-name-link">Father John Misty</a>
+                    </div>
+                  </li>
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/1oPRcJUkloHaRLYx0olBLJ" target="_blank" rel="noopener noreferrer" class="artist-name-link">Magdalena Bay</a>
+                    </div>
+                  </li>
+                  <li class="artist-item preview-expanded">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[-]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/7qrEXiLLnWkkYHhadZ1Oij" target="_blank" rel="noopener noreferrer" class="artist-name-link">Blondshell</a>
+                    </div>
+                    <div class="artist-related">
+                      <p class="related-header">Other artists at Treefort you might like:</p>
+                      <p class="related-info">Based on shared genres (indie rock). This is not Spotify's "Related Artists" — it's genre matching from our lineup data.</p>
+                      <ul class="related-list">
+                        <li><a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="related-artist-link">Samia</a></li>
+                        <li><a href="https://open.spotify.com/artist/4aEnNH9PuU1HF3TsZTru54" target="_blank" rel="noopener noreferrer" class="related-artist-link">Caracara</a></li>
+                        <li><a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="related-artist-link">Father John Misty</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="artist-name-link">Samia</a>
+                    </div>
+                  </li>
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/7c3NW1Z7GXA6bhuMmqvJYf" target="_blank" rel="noopener noreferrer" class="artist-name-link">Billie Marten</a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <p class="preview-label">Example results — connect Spotify to see your actual matches</p>
             </div>
-            <p class="preview-label">Example results — connect Spotify to see your actual matches</p>
-          </div>
-        </section>
+          </section>
 
-        <section id="auth-section">
-          <button id="connect-btn" type="button">Connect Spotify</button>
-          <p class="browser-note">For best results, open this site in Safari or Chrome, not an in-app browser.</p>
-        </section>
+          <section id="auth-section">
+            <button id="connect-btn" type="button">Connect Spotify</button>
+            <p class="browser-note">For best results, open this site in Safari or Chrome, not an in-app browser.</p>
+          </section>
+        </div>
 
         <section id="results-section" class="hidden">
           <!-- Results will be rendered here -->
diff --git a/src/index.html b/src/index.html
@@ -16,78 +16,77 @@
         <img src="/spotifort_transparent.png" alt="Spotifort logo" class="site-logo" />
         <h1>Spotifort</h1>
         <p class="tagline">Find which artists you love are playing Treefort 2026</p>
+        <p class="header-intro">Connect your Spotify account to see which artists from your Liked Songs are playing Treefort Music Fest 2026 (March 25-29, Boise, Idaho).</p>
       </header>
 
       <main>
-        <section id="intro-section">
-          <p>Connect your Spotify account to see which artists from your Liked Songs are playing Treefort Music Fest 2026 (March 25-29, Boise, Idaho).</p>
-        </section>
-
-        <section id="preview-section">
-          <h2>Here's what you'll see</h2>
-          <div class="preview-box">
-            <div class="list-box preview-list-box">
-              <h3>Your Treefort Matches</h3>
-              <ul class="artist-list">
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="artist-name-link">Father John Misty</a>
-                  </div>
-                </li>
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/1oPRcJUkloHaRLYx0olBLJ" target="_blank" rel="noopener noreferrer" class="artist-name-link">Magdalena Bay</a>
-                  </div>
-                </li>
-                <li class="artist-item preview-expanded">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[-]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/7qrEXiLLnWkkYHhadZ1Oij" target="_blank" rel="noopener noreferrer" class="artist-name-link">Blondshell</a>
-                  </div>
-                  <div class="artist-related">
-                    <p class="related-header">Other artists at Treefort you might like:</p>
-                    <p class="related-info">Based on shared genres (indie rock). This is not Spotify's "Related Artists" — it's genre matching from our lineup data.</p>
-                    <ul class="related-list">
-                      <li><a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="related-artist-link">Samia</a></li>
-                      <li><a href="https://open.spotify.com/artist/4aEnNH9PuU1HF3TsZTru54" target="_blank" rel="noopener noreferrer" class="related-artist-link">Caracara</a></li>
-                      <li><a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="related-artist-link">Father John Misty</a></li>
-                    </ul>
-                  </div>
-                </li>
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="artist-name-link">Samia</a>
-                  </div>
-                </li>
-                <li class="artist-item">
-                  <div class="artist-row">
-                    <span class="artist-toggle">
-                      <span class="artist-marker">[+]</span>
-                    </span>
-                    <a href="https://open.spotify.com/artist/7c3NW1Z7GXA6bhuMmqvJYf" target="_blank" rel="noopener noreferrer" class="artist-name-link">Billie Marten</a>
-                  </div>
-                </li>
-              </ul>
+        <div class="landing-grid">
+          <section id="preview-section">
+            <h2>Here's what you'll see</h2>
+            <div class="preview-box">
+              <div class="list-box preview-list-box">
+                <h3>Your Treefort Matches</h3>
+                <ul class="artist-list">
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="artist-name-link">Father John Misty</a>
+                    </div>
+                  </li>
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/1oPRcJUkloHaRLYx0olBLJ" target="_blank" rel="noopener noreferrer" class="artist-name-link">Magdalena Bay</a>
+                    </div>
+                  </li>
+                  <li class="artist-item preview-expanded">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[-]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/7qrEXiLLnWkkYHhadZ1Oij" target="_blank" rel="noopener noreferrer" class="artist-name-link">Blondshell</a>
+                    </div>
+                    <div class="artist-related">
+                      <p class="related-header">Other artists at Treefort you might like:</p>
+                      <p class="related-info">Based on shared genres (indie rock). This is not Spotify's "Related Artists" — it's genre matching from our lineup data.</p>
+                      <ul class="related-list">
+                        <li><a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="related-artist-link">Samia</a></li>
+                        <li><a href="https://open.spotify.com/artist/4aEnNH9PuU1HF3TsZTru54" target="_blank" rel="noopener noreferrer" class="related-artist-link">Caracara</a></li>
+                        <li><a href="https://open.spotify.com/artist/2kGBy2WHvF0VdZyqiVCkDT" target="_blank" rel="noopener noreferrer" class="related-artist-link">Father John Misty</a></li>
+                      </ul>
+                    </div>
+                  </li>
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/1Uk1GyijF6fSfX4mWq5bfR" target="_blank" rel="noopener noreferrer" class="artist-name-link">Samia</a>
+                    </div>
+                  </li>
+                  <li class="artist-item">
+                    <div class="artist-row">
+                      <span class="artist-toggle">
+                        <span class="artist-marker">[+]</span>
+                      </span>
+                      <a href="https://open.spotify.com/artist/7c3NW1Z7GXA6bhuMmqvJYf" target="_blank" rel="noopener noreferrer" class="artist-name-link">Billie Marten</a>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <p class="preview-label">Example results — connect Spotify to see your actual matches</p>
             </div>
-            <p class="preview-label">Example results — connect Spotify to see your actual matches</p>
-          </div>
-        </section>
+          </section>
 
-        <section id="auth-section">
-          <button id="connect-btn" type="button">Connect Spotify</button>
-          <p class="browser-note">For best results, open this site in Safari or Chrome, not an in-app browser.</p>
-        </section>
+          <section id="auth-section">
+            <button id="connect-btn" type="button">Connect Spotify</button>
+            <p class="browser-note">For best results, open this site in Safari or Chrome, not an in-app browser.</p>
+          </section>
+        </div>
 
         <section id="results-section" class="hidden">
           <!-- Results will be rendered here -->
diff --git a/src/style.css b/src/style.css
@@ -59,6 +59,14 @@ header h1 {
   margin-top: 0;
 }
 
+.header-intro {
+  font-size: 0.95rem;
+  color: #444;
+  max-width: 500px;
+  margin: 1rem auto 0;
+  line-height: 1.5;
+}
+
 main {
   flex: 1;
 }
@@ -813,21 +821,54 @@ footer {
   box-shadow: 2px 2px 0 var(--black);
 }
 
-/* Preview Section */
-#intro-section {
-  max-width: 600px;
-  margin: 0 auto 2rem;
-  text-align: center;
+/* Landing Grid - Preview + Auth side by side on wide screens */
+.landing-grid {
+  max-width: 1000px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
 }
 
-#intro-section p {
-  font-size: 1.1rem;
-  line-height: 1.6;
+/* Mobile: auth/setup first, preview second */
+.landing-grid #auth-section,
+.landing-grid #setup-section {
+  order: 1;
+}
+
+.landing-grid #preview-section {
+  order: 2;
+}
+
+/* Desktop: two columns, preview left, auth/setup right */
+@media (min-width: 900px) {
+  .landing-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    align-items: stretch;
+  }
+
+  .landing-grid #preview-section {
+    order: 1;
+    max-width: none;
+    margin: 0;
+  }
+
+  .landing-grid #auth-section,
+  .landing-grid #setup-section {
+    order: 2;
+    margin: 0;
+    max-width: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 
 #preview-section {
   max-width: 500px;
-  margin: 0 auto 2rem;
+  margin: 0 auto;
 }
 
 #preview-section h2 {
diff --git a/src/ui.js b/src/ui.js
@@ -28,6 +28,7 @@ export function showSetup() {
   const authSection = document.getElementById('auth-section');
   const resultsSection = document.getElementById('results-section');
   const loadingSection = document.getElementById('loading-section');
+  const landingGrid = document.querySelector('.landing-grid');
 
   if (authSection) authSection.classList.add('hidden');
   if (resultsSection) resultsSection.classList.add('hidden');
@@ -38,7 +39,12 @@ export function showSetup() {
   if (!setupSection) {
     setupSection = document.createElement('section');
     setupSection.id = 'setup-section';
-    main.insertBefore(setupSection, main.firstChild);
+    // Insert inside landing-grid if it exists, otherwise at start of main
+    if (landingGrid) {
+      landingGrid.appendChild(setupSection);
+    } else {
+      main.insertBefore(setupSection, main.firstChild);
+    }
   }
   setupSection.classList.remove('hidden');
 
