Initial layout on tutorial page

[jathayde]

There are some oddities stemming from the font-size: 0; line-height: 0; declaration from ~ 4 years ago (cards.scss:2 & 3). I decided to override them instead of refactoring the entire site.

Some formatting cleanup for legibility from my previous docs page work as well.

[AmandaPerino]

Made some copy updates! Is there anything we can do about all this white space to the right? It seems awfully crowded to the left and open on the right.

[jathayde]

Made some copy updates! Is there anything we can do about all this white space to the right? It seems awfully crowded to the left and open on the right.

Yes. Let me work that to not be 50/50 and just be the content width.

[jathayde]

Updated:

[jathayde]

Updated full page screenshot from Firefox:

[jathayde]

The fullwidth card is weird in how it behaves responsively. Could use some pairing on that to make it more robust.

[AmandaPerino]

Would be nice to close the space a bit between the Beginner and Advanced section. I'll ask around for some help.

[ghiculescu]

Quick comment from Amanda's call for help - this is a really good use case for an AI agent. For example I put this prompt into Claude Code: "The "fullwidth" card in _pages/tutorial.html isnt working well on narrow screens. Here is a screenshot: [Image #1]. It looks fine on wider screens. What should I do to fix it?" with this screenshot:

I needed two cracks at it, once I gave it a screenshot of how it looks on a wider screen it came up with this, which seems to fix things for me:

diff --git a/_sass/modules/_cards.scss b/_sass/modules/_cards.scss
index 8b7e2e1..6e23ab1 100755
--- a/_sass/modules/_cards.scss
+++ b/_sass/modules/_cards.scss
@@ -30,7 +30,7 @@
     z-index: 1;

     &.card__fullwidth {
-      grid-template-columns: minmax(600px, 800px);
+      grid-template-columns: minmax(0, 800px);
       justify-content: center;

       .card {
@@ -46,6 +46,7 @@
             width: 100%;
             margin: 1em;
             height: auto;
+            max-width: 100%;
           }

           h3 {
@@ -227,6 +228,28 @@
     }
   }

+  @media (max-width: 767px) {
+    &__container {
+      &.card__fullwidth {
+        .card__body {
+          flex-direction: column;
+          align-items: center;
+          padding: 1em;
+
+          img {
+            width: 100% !important;
+            max-width: 400px;
+            margin: 0 0 1.5em 0;
+          }
+
+          > div {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+

[jathayde]

AWesome. Thanks @ghiculescu . That created some downstream problems in the responsive, but fixed a few of those issues, especially on mid-size mobile. I'll keep working on it and pushing Claude to see what i can resolve here.

[jathayde]

Here are the screenshots from Firefox. There's some weird clipping issue where the top container doesn't extend over the bottom 100px or so of the top card area. Have not been able to crack that, but put in a responsive workaround. You can see that even between mobile devices, the bottom padding shifts in weird ways.

[AmandaPerino]

Suggested change

	href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
	href="https://guides.rubyonrails.org/sign_up_and_settings.html"

[AmandaPerino]

Just heard from @fxn that there is a redirect in place where we can use the Guides URL even if the guide only exists on edge.

[jathayde]

/docs/tutorial => /docs/tutorials has been implemented per Basecamp discussion.

On the card, I cleared out some of the inherited styles for .card__fullwidth which helps it feel more inline with what it should be, also adjusting the text to feel better on the mobile instance: