fix: spacing between elements (#579)

* fix: spacing between elements * feat: update how it is made button link * update header mobile icon * removed unused asset --------- Co-authored-by: Jaime <52668514+jsgalarraga@users.noreply.github.com>
VGVentures · Jun 18, 2024 · 73e1782 · 73e1782
1 parent 62698d2
commit 73e1782
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/landing/assets/SmallLogo.png b/landing/assets/SmallLogo.png
diff --git a/landing/index.html b/landing/index.html
@@ -17,7 +17,7 @@
     <header>
       <picture>
         <source media="(min-width: 640px)" srcset="./assets/Logo.svg" />
-        <img src="./assets/SmallLogo.png" alt="Google IO Crossword Logo" />
+        <img src="./assets/icon-64.png" alt="Google IO Crossword Logo" />
       </picture>
       <a class="gradient-button" href="/game">Play Now</a>
     </header>
@@ -71,7 +71,7 @@ <h3 class="gradient-title">How it&apos;s made</h3>
               like the I/O Crossword using Flutter and Firebase Genkit with
               Codelabs, Blogs, and Videos.
             </p>
-            <a class="gradient-button" href="https://flutter.dev">Learn More</a>
+            <a class="gradient-button" href="https://developers.google.com/learn/pathways/solution-crossword">Learn More</a>
           </div>
         </div>
         <div class="feature">

diff --git a/landing/style.css b/landing/style.css
@@ -95,6 +95,7 @@ header>.gradient-button {
   justify-content: center;
   width: 100%;
   height: 100%;
+  margin-top: 6.25rem;
 }
 
 .hero__content-inner-container {
@@ -122,21 +123,22 @@ header>.gradient-button {
 .hero__content>h2 {
   font-weight: 400;
   font-size: 1.5rem;
+  margin: 1.5rem 0;
 }
 
 .hero__content>h2>br {
   display: none;
 }
 
 .youtube-embed {
-  margin: 6rem auto;
+  margin: 7.25rem auto 3.5rem;
 }
 
 .youtube-embed__video-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   /* width: 850px; has to match the iframe width */
   -webkit-mask-image: -webkit-radial-gradient(circle,
       white 100%,
@@ -178,7 +180,7 @@ header>.gradient-button {
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
-  gap: 1rem;
+  gap: 3.25rem;
   margin: 2rem auto;
   max-width: var(--max-page-content-width);
   width: 80%;
@@ -201,7 +203,7 @@ header>.gradient-button {
 }
 
 .feature-content>a {
-  margin-top: 1.5rem;
+  margin: 2rem 0;
 }
 
 #faq {
@@ -297,6 +299,15 @@ footer {
     margin: auto;
   }
 
+  .hero__content>h2 {
+    margin: 2rem 0;
+  }
+
+  .feature {
+    margin: 4rem 0;
+    gap: 5rem;
+  }
+
   .feature>img {
     max-width: 90%;
   }
@@ -309,19 +320,28 @@ footer {
     text-align: center;
   }
 
-  .youtube-embed__title {
-    align-items: center;
+  .youtube-embed__video-container {
+    margin-top: 3.75rem;
   }
 
   .youtube-embed__video-container>iframe {
     margin: 0 5rem;
   }
 
+  .youtube-embed__title {
+    align-items: center;
+  }
+
+  .footer__privacy-terms>p {
+    margin-top: 2.5rem;
+  }
+
   .footer__logos-container {
     flex-direction: row;
     justify-content: space-between;
     flex-wrap: wrap;
-    margin: 3rem 0;
+    margin: 3rem 0 5.5rem;
+    gap: 8rem;
   }
 
   .footer__socials-inner-container {
@@ -345,7 +365,8 @@ footer {
   .footer__privacy-terms-links {
     flex-direction: column;
     align-items: center;
-    margin: 3rem 0;
+    gap: 2.5rem;
+    margin: 1.25rem 0 2.5rem;
   }
 }
 
@@ -375,14 +396,15 @@ footer {
 
   .hero__content-container {
     position: absolute;
+    margin-top: 0;
   }
 
   .hero__image {
     visibility: hidden;
     height: 700px;
     width: unset;
   }
-  
+
   .feature {
     flex-direction: row;
     margin: 5rem auto;
@@ -395,6 +417,14 @@ footer {
     text-align: start;
   }
 
+  .feature-content>p {
+    margin-top: 3.125rem;
+  }
+
+  .feature-content>a {
+    margin: 2.5rem 0 0;
+  }
+
   .feature.reverse {
     flex-direction: row-reverse;
   }
@@ -407,6 +437,10 @@ footer {
     margin: 0;
   }
 
+  .footer__logos-container {
+    margin: 3rem 0;
+  }
+
   .footer__inner-logos-container {
     margin: 0;
   }
@@ -417,9 +451,13 @@ footer {
     gap: 1rem;
   }
 
+  .footer__privacy-terms>p {
+    margin: 2rem 0;
+  }
+
   .footer__privacy-terms-links {
     flex-direction: row;
     align-items: start;
-    margin: 1rem 0 0;
+    margin: 2rem 0 2rem;
   }
 }