From 73e17825ac00763bed3419ccacd354defa309c8d Mon Sep 17 00:00:00 2001
From: Jhon Aires <82902331+Jhon-Aires@users.noreply.github.com>
Date: Tue, 18 Jun 2024 13:41:19 -0300
Subject: [PATCH] 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>
---
 landing/assets/SmallLogo.png | Bin 4448 -> 0 bytes
 landing/index.html           |   4 +--
 landing/style.css            |  58 +++++++++++++++++++++++++++++------
 3 files changed, 50 insertions(+), 12 deletions(-)
 delete mode 100644 landing/assets/SmallLogo.png

diff --git a/landing/assets/SmallLogo.png b/landing/assets/SmallLogo.png
deleted file mode 100644
index dc16105f423731282362817ceb41a0d219946e88..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4448
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
E0I#*Mw*UYD

diff --git a/landing/index.html b/landing/index.html
index 41e72f3fc..29a5fa2de 100644
--- 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
index 83ef334d1..966c0e5e2 100644
--- 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,6 +123,7 @@ header>.gradient-button {
 .hero__content>h2 {
   font-weight: 400;
   font-size: 1.5rem;
+  margin: 1.5rem 0;
 }
 
 .hero__content>h2>br {
@@ -129,14 +131,14 @@ header>.gradient-button {
 }
 
 .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,6 +396,7 @@ footer {
 
   .hero__content-container {
     position: absolute;
+    margin-top: 0;
   }
 
   .hero__image {
@@ -382,7 +404,7 @@ footer {
     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;
   }
 }
\ No newline at end of file