updates
This commit is contained in:
Sean Yesmunt
parent
427a0013d8
commit
28f3af7432
2 changed files with 161 additions and 11 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
line-height: 1.5rem;
|
||||
font-size: 24px;
|
||||
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;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
background-color: #5726ab;
|
||||
color: white;
|
||||
padding: 0.75rem;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue