refactor: [UEPR-90] fixed gap between components and how pdfs open

src/views/guidelines/guidelines.jsx

@@ -88,7 +88,11 @@ const pageSections = [
                 id: 'guidelines.learnMorebody1',
                 values: {
                     a: chunks => (
-                        <a href="https://resources.scratch.mit.edu/www/guides/en/scratch-community-guide.pdf">
+                        <a
+                            href="https://resources.scratch.mit.edu/www/guides/en/scratch-community-guide.pdf"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
                             {chunks}
                         </a>
                     )

src/views/ideas/ideas.jsx

@@ -141,6 +141,9 @@ const Ideas = () => {
                                                 id: tipData.button.hrefId
                                             })
                                     }
+                                    {...(tipData.button.hrefId ?
+                                        {target: '_blank', rel: 'noopener noreferrer'} :
+                                        {})}
                                 >
                                     <Button className="tips-button">
                                         {tipData.button.buttonImageSrc && (
@@ -187,6 +190,8 @@ const Ideas = () => {
                                         href={intl.formatMessage({
                                             id: physicalIdea.physicalIdeasDescription.hrefId
                                         })}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
                                     >
                                         <Button className="tips-button">
                                             <img

src/views/ideas/ideas.scss

@@ -49,7 +49,7 @@ $base-bg: $ui-white;
         .physical-ideas-section {
             justify-content: space-between;
             align-items: flex-start;
-            gap: 1.5rem;
+            gap: 5.5rem;
 
             .physical-idea {
                 display: flex;
@@ -70,6 +70,10 @@ $base-bg: $ui-white;
                     justify-content: space-between;
                     align-items: flex-start;
 
+                    h3 {
+                        font-size: 1.3rem;
+                    }
+                    
                     p {
                         margin: 0;
                         font-size: 1rem;

src/views/ideas/l10n.json

@@ -2,7 +2,7 @@
     "ideas.headerMessage": "What will you create?",
     "ideas.headerImageDescription": "Outlandish creations from pixelated unicorns to drumbeat waveforms to levitating tacos to buckets of rainbows.",
     "ideas.headerButtonMessage": "Choose a tutorial",
-    "ideas.startHereText": "New to Scratch? Stay here!",
+    "ideas.startHereText": "New to Scratch? Start here!",
     "ideas.gettingStartedButtonText": "Try Getting Started Tutorial",
     "ideas.seeTutorialsLibraryButtonText": "See Tutorials Library",
     "ideas.gettingStartedImageDescription": "An illustrated boy plants his flag on top of a freshly painted mountaintop.",