Add new cards and card thumbs to www

Fixes #856. This also updates the styling of the `cards.jsx` view to follow the trello style guide, as previously discussed.

bin/lib/localized-urls.json

 {
     "en": {
-        "cards.starterLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Scratch2Cards.pdf",
-        "cards.nameLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf",
-        "cards.pongLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/PongCards.pdf",
-        "cards.storyLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/StoryCards.pdf",
-        "cards.danceLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/DanceCards.pdf",
-        "cards.hideLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf"
+        "cards.starterLink": "/pdfs/cards/Scratch2Cards.pdf",
+        "cards.nameLink": "/pdfs/cards/AnimateYourNameCards.pdf",
+        "cards.flyLink": "/pdfs/cards/FlyCards.pdf",
+        "cards.raceLink": "/pdfs/cards/RaceGameCards.pdf",
+        "cards.musicLink": "/pdfs/cards/MusicCards.pdf",
+        "cards.hideLink": "/pdfs/cards/Hide-and-Seek-Cards.pdf",
+        "cards.storyLink": "/pdfs/cards/StoryCards.pdf",
+        "cards.dressupLink": "/pdfs/cards/DressupCards.pdf",
+        "cards.pongLink": "/pdfs/cards/PongCards.pdf",
+        "cards.danceLink": "/pdfs/cards/DanceCards.pdf",
+        "cards.catchLink": "/pdfs/cards/CatchCards.pdf",
+        "cards.petLink": "/pdfs/cards/PetCards.pdf"
     },
     "ar": {
         "cards.starterLink": "//cdn.scratch.mit.edu/scratchr2/static/pdfs/help/ar/Scratch2Cards.pdf"

src/views/cards/cards.scss

 @import "../../colors";
 @import "../../frameless";
 
-.cards {
-    // type-specific margins
-    h4 {
-        margin: 1.5em 0 .3em;
-    }
-
-    h1 {
-        margin: .75em 0 .3em;
-    }
-
-    p {
-        margin: .25em 0 1em;
-    }
-
-    .cards-intro {
-        display: flex;
-        margin: 1em 0;
-        align-items: center;
-        justify-content: center;
-
-        .intro-content {
-            float: left;
-            width: 45%;
-        }
-
-        img {
-            width: 45%;
-        }
-    }
-
-    .cards-container {
-        text-align: center;
-
-        .flex-row {
-            div {
-                padding: .5em;
-
-                a {
-                    display: block;
-
-                    .pdf-icon {
-                        margin-right: .2em;
-                        width: 1em;
-                    }
-                }
-            }
-
-            @media only screen and (max-width: $desktop - 1) {
-                flex-direction: column;
-                justify-content: center;
-            }
-        }
+// Page header
+.cards-intro {
+    display: flex;
+    margin: 1rem 0;
+    align-items: center;
+    justify-content: space-between;
 }
+
+.cards-intro-content {
+    float: left;
+    width: 45%;
+}
+
+.cards-intro-content-header {
+    margin: .75rem 0 .5rem;
+}
+
+.cards-intro-content-body {
+    margin: .25rem 0 1rem;
+}
+
+.cards-intro-img {
+    width: 45%;
+}
+
+// Cards and Card Container
+.cards-container {
+    text-align: center;
+}
+
+.flex-row-card {
+    margin: 1.5rem 0;
+    padding: .5rem;
+}
+
+.flex-row-card-link {
+    display: block;
+    margin-top: .5rem;
+}
+
+.flex-row-card-link-icon {
+    margin-right: .2rem;
+    width: 1rem;
 }

src/views/cards/l10n-static.json

 {
-    "cards.starterLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Scratch2Cards.pdf",
-    "cards.nameLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf",
-    "cards.pongLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/PongCards.pdf",
-    "cards.storyLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/StoryCards.pdf",
-    "cards.danceLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/DanceCards.pdf",
-    "cards.hideLink": "//scratch.mit.edu/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf"
+    "cards.starterLink": "/pdfs/cards/Scratch2Cards.pdf",
+    "cards.nameLink": "/pdfs/cards/AnimateYourNameCards.pdf",
+    "cards.flyLink": "/pdfs/cards/FlyCards.pdf",
+    "cards.raceLink": "/pdfs/cards/RaceGameCards.pdf",
+    "cards.musicLink": "/pdfs/cards/MusicCards.pdf",
+    "cards.hideLink": "/pdfs/cards/Hide-and-Seek-Cards.pdf",
+    "cards.storyLink": "/scratch.mit.edu/pdfs/cards/StoryCards.pdf",
+    "cards.dressupLink": "/pdfs/cards/DressupCards.pdf",
+    "cards.pongLink": "/pdfs/cards/PongCards.pdf",
+    "cards.danceLink": "/pdfs/cards/DanceCards.pdf",
+    "cards.catchLink": "/pdfs/cards/CatchCards.pdf",
+    "cards.petLink": "/pdfs/cards/PetCards.pdf"
 }

src/views/cards/l10n.json

@@ -6,8 +6,14 @@
     "cards.viewCard": "View Cards",
     "cards.starter": "Starter Cards",
     "cards.name": "Animate Your Name",
+    "cards.fly": "Make It Fly",
+    "cards.race": "Race to the Finish",
+    "cards.music": "Make Music",
+    "cards.hide": "Hide and Seek",
+    "cards.story": "Create a Story",
+    "cards.dressup": "Dress-Up Game",
     "cards.pong": "Create a Pong Game",
-    "cards.story": "Animate a Story",
-    "cards.dance": "Dance, Dance, Dance",
-    "cards.hide": "Hide and Seek"
+    "cards.dance": "Let's Dance",
+    "cards.catch": "Catch Game",
+    "cards.pet": "Virtual Pet"
 }