updates

pages/index.js

@@ -34,13 +34,16 @@ export default function Home() {
           <div className="landing__subtitle">
             <div>Some catchy subtitle that says some different things.</div>
             <div className="landing__subtitle-catchy">
-              <i>The SEC are dorks.</i>
+              <span>The SEC are dorks.</span>
             </div>
           </div>
         </div>
 
         <div className="content">
           <h2>What is happening?</h2>
+          <div className="content__subtitle">
+            Some subtitle about below text.
+          </div>
           <p>
             The Securities and Exchange Commission has filed a case against
             LBRY, Inc. alleging that all distributions of LBRY Credits by LBRY,
@@ -56,8 +59,37 @@ export default function Home() {
           </p>
 
           <div className="video">
-            <iframe src="https://drive.google.com/file/d/1G3atQZ8ZQWor0RPMoVyxEZMhMxZKD8Qa/preview"></iframe>
+            <iframe
+              id="lbry-iframe"
+              src="https://odysee.com/$/embed/odysee/7a416c44a6888d94fe045241bbac055c726332aa?r=A6zE8KtZ6VVk268xANdFViL8znbDXL4F"
+              allowfullscreen
+            ></iframe>
           </div>
+
+          <div className="email">
+            <h2>Stay up to date</h2>
+            <div className="email__subtitle">
+              We will keep you up to date with any information we receive about
+              this case.
+            </div>
+
+            <label htmlFor="email">Email</label>
+            <div className="email__group">
+              <input
+                type="email"
+                name="email"
+                placeholder="ihatecensorship@protonmail.com"
+              />
+              <button>Submit</button>
+            </div>
+          </div>
+
+          <h2>Sign the petition</h2>
+          <div className="content__subtitle">
+            We know petitions don't do very much, but everything helps.
+          </div>
+
+          <div className="petition">Petition iframe or link</div>
         </div>
       </main>
     </div>

styles/globals.scss

@@ -2,6 +2,8 @@ $breakpoint-small: 900px;
 $spacing-small: 1rem;
 $spacing-medium: 1.8rem;
 
+$border-radius: 10px;
+
 html,
 body {
   padding: 0;
@@ -29,8 +31,13 @@ iframe {
 }
 
 p {
-  font-size: 18px;
+  font-size: 24px;
-  line-height: 1.5rem;
+  line-height: 2rem;
+}
+
+input,
+button {
+  border: none;
 }
 
 a {
@@ -99,6 +106,7 @@ header {
 
 .landing__title {
   font-size: 3rem;
+  font-weight: 900;
 
   @media (min-width: $breakpoint-small) {
     font-size: 3rem;
@@ -118,12 +126,17 @@ header {
 .landing__subtitle-catchy {
   margin-top: 1.5rem;
   font-weight: bolder;
+  transform: skew(-10deg);
+  display: inline-block;
 
-  i {
+  background-color: #5726ab;
-    background-color: #5726ab;
+  color: white;
-    color: white;
+  padding: 0.75rem;
-    padding: 0.5rem;
+  margin-top: 2rem;
-    margin-top: 2rem;
+
+  span {
+    font-weight: 700;
+    transform: skew(10deg);
   }
 }
 
@@ -132,17 +145,38 @@ header {
   background-color: #ffffff;
   color: #000000;
 
+  h2 {
+    font-size: 2rem;
+    font-weight: 900;
+
+    &:not(:first-of-type) {
+      margin-top: 4rem;
+    }
+  }
+
   @media (min-width: $breakpoint-small) {
     padding-top: 5rem;
     width: 900px;
     margin: auto;
+
+    h2 {
+      font-size: 4rem;
+    }
   }
 }
 
+.content__subtitle {
+  margin: 1rem 0;
+  font-size: 1.75rem;
+  color: #8f8f8f;
+}
+
 .video {
-  margin-top: 5rem;
+  margin-top: 2.5rem;
   position: relative;
-  padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
+  padding-bottom: 56.25%;
+  background-color: black;
+  border-radius: 20px;
 
   iframe {
     position: absolute;
@@ -150,5 +184,89 @@ header {
     left: 0;
     width: 100%;
     height: 100%;
+    border-radius: 20px;
   }
 }
+
+.email {
+  width: 100%;
+  max-width: 35rem;
+  margin: auto;
+  font-size: 2rem;
+  margin-top: 4rem;
+  padding: 1rem;
+  background-color: #fcd34d;
+
+  h2 {
+    font-size: 2rem;
+  }
+
+  label {
+    font-size: 1rem;
+  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 5rem;
+
+    h2 {
+      font-size: 3rem;
+    }
+  }
+}
+
+.email__group {
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+
+  input {
+    flex: 1;
+    font-size: 0.8rem;
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+
+    &:focus {
+      outline: none;
+    }
+
+    @media (min-width: $breakpoint-small) {
+      font-size: 1rem;
+    }
+  }
+
+  button {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    background-color: black;
+    color: white;
+    font-weight: 700;
+  }
+
+  input,
+  button {
+    padding: 1rem;
+    height: 3rem;
+  }
+}
+
+.email__subtitle {
+  font-size: 1.5rem;
+  margin: 1rem 0;
+
+  @media (min-width: $breakpoint-small) {
+    font-size: 2rem;
+    margin: 2rem 0;
+  }
+}
+
+.petition {
+  height: 30rem;
+  padding: 5rem;
+  background-color: black;
+  color: white;
+  margin-top: 2rem;
+}