style embed

src/containers/Home/index.tsx

@@ -127,7 +127,7 @@ const Home: React.FC = () => {
         </Styles.StyledSectionCard>
       </Styles.StyledFeaturesSection>
 
-      <Styles.StyledGitHubSection id="github">
+      <Styles.StyledSection id="github" reverse>
         <TwitterTweetEmbed
           tweetId="1519363257794015233"
           options={{
@@ -149,9 +149,9 @@ const Home: React.FC = () => {
             STAR ON GITHUB
           </Styles.StyledButton>
         </Styles.StyledSectionArea>
-      </Styles.StyledGitHubSection>
+      </Styles.StyledSection>
 
-      <Styles.StyledGitHubSection>
+      <Styles.StyledSection id="embed">
         <Styles.StyledSectionArea>
           <Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
           <Styles.StyledMinorTitle>
@@ -160,13 +160,9 @@ const Home: React.FC = () => {
           </Styles.StyledMinorTitle>
         </Styles.StyledSectionArea>
         <div>
-          <Styles.StyledIframge
-            src="https://jsonvisio.com/widget?json=%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"
-            width="512"
-            height="384"
-          ></Styles.StyledIframge>
+          <Styles.StyledIframge src="https://jsonvisio.com/widget?json=%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"></Styles.StyledIframge>
         </div>
-      </Styles.StyledGitHubSection>
+      </Styles.StyledSection>
 
       <Styles.StyledPaidSection>
         <Styles.StyledProducthunt>

src/containers/Home/styles.tsx

@@ -149,11 +149,18 @@ export const StyledCardDescription = styled.p`
 `;
 
 export const StyledIframge = styled.iframe`
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
   border: 2px solid ${({ theme }) => theme.INTERACTIVE_NORMAL};
   border-radius: 6px;
+
+  @media only screen and (min-width: 768px) {
+    min-height: 384px;
+  }
 `;
 
-export const StyledGitHubSection = styled.section`
+export const StyledSection = styled.section<{ reverse?: boolean }>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -168,7 +175,7 @@ export const StyledGitHubSection = styled.section`
   }
 
   @media only screen and (max-width: 768px) {
-    flex-direction: column-reverse;
+    flex-direction: ${({ reverse }) => (reverse ? "column-reverse" : "column")};
     max-width: 80%;
   }
 `;