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%;
+          }
+        }
+      }
+    }
+  }
+