mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-30 21:28:11 +08:00
Add newsletter signup to website
This commit is contained in:
Keavon Chambers
+97
-78
@@ -230,99 +230,118 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#community {
|
#community {
|
||||||
#newsletter form {
|
#newsletter {
|
||||||
width: 100%;
|
#newsletter-success {
|
||||||
margin-top: 40px;
|
background: var(--color-crimson);
|
||||||
display: flex;
|
margin-top: 40px;
|
||||||
gap: 20px;
|
padding: 40px;
|
||||||
flex-wrap: wrap;
|
width: 100%;
|
||||||
|
color: var(--color-fog);
|
||||||
.same-line {
|
box-sizing: border-box;
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
&:not(:target) {
|
||||||
flex: 100000 1 0;
|
display: none;
|
||||||
|
|
||||||
@media screen and (max-width: 1200px) {
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 100%;
|
|
||||||
|
|
||||||
&.name,
|
|
||||||
&.email {
|
|
||||||
flex: 1 1 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
#newsletter-success:target ~ form {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
gap: 20px;
|
||||||
justify-content: flex-end;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
&.name {
|
.same-line {
|
||||||
flex: 1 0 0;
|
display: flex;
|
||||||
min-width: 240px;
|
gap: 20px;
|
||||||
|
flex: 100000 1 0;
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 1 100%;
|
||||||
|
|
||||||
|
&.name,
|
||||||
|
&.email {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.phone {
|
.column {
|
||||||
display: none;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
&.email {
|
&.name {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
min-width: 240px;
|
min-width: 240px;
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.phone {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 400px) {
|
|
||||||
&.name,
|
|
||||||
&.email {
|
&.email {
|
||||||
min-width: 100%;
|
flex: 1 0 0;
|
||||||
|
min-width: 240px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.submit {
|
@media screen and (max-width: 400px) {
|
||||||
flex: 1 0 0;
|
&.name,
|
||||||
}
|
&.email {
|
||||||
|
min-width: 100%;
|
||||||
label,
|
}
|
||||||
input {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-size: var(--font-size-link);
|
|
||||||
font-weight: 800;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type="submit"]) {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(var(--font-size-link) * 2);
|
|
||||||
font-size: calc(var(--font-size-link) * 0.9);
|
|
||||||
color: inherit;
|
|
||||||
border: 2px solid currentColor;
|
|
||||||
outline: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 var(--font-size-link);
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: var(--color-mustard);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
input[type="submit"] {
|
&.submit {
|
||||||
background: none;
|
flex: 1 0 0;
|
||||||
outline: none;
|
}
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:focus {
|
label,
|
||||||
border-color: var(--color-mustard);
|
input {
|
||||||
color: var(--color-mustard);
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: var(--font-size-link);
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type="submit"]) {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--font-size-link) * 2);
|
||||||
|
font-size: calc(var(--font-size-link) * 0.9);
|
||||||
|
color: inherit;
|
||||||
|
border: 2px solid currentColor;
|
||||||
|
outline: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 var(--font-size-link);
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--color-mustard);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: var(--color-mustard);
|
||||||
|
color: var(--color-mustard);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -223,11 +223,15 @@
|
|||||||
Graphite is early in development and the most exciting, ambitious features are still to come. Enter your email below to receive only occasional announcements when major updates are
|
Graphite is early in development and the most exciting, ambitious features are still to come. Enter your email below to receive only occasional announcements when major updates are
|
||||||
ready for your enjoyment. The first newsletter will likely be sent out for the Graphite alpha milestone 2 release, featuring node-based editing, later this year.
|
ready for your enjoyment. The first newsletter will likely be sent out for the Graphite alpha milestone 2 release, featuring node-based editing, later this year.
|
||||||
</p>
|
</p>
|
||||||
|
<div id="newsletter-success">
|
||||||
|
<h4>Thanks!</h4>
|
||||||
|
<p>You'll receive the first newsletter with the next major Graphite news.</p>
|
||||||
|
</div>
|
||||||
<form action="https://graphite.rs/newsletter-signup" method="post">
|
<form action="https://graphite.rs/newsletter-signup" method="post">
|
||||||
<div class="same-line">
|
<div class="same-line">
|
||||||
<div class="column name">
|
<div class="column name">
|
||||||
<label for="newsletter-name">First + last name:</label>
|
<label for="newsletter-name">First + last name:</label>
|
||||||
<input id="newsletter-name" name="name" type="text" />
|
<input id="newsletter-name" name="name" type="text" required />
|
||||||
</div>
|
</div>
|
||||||
<div class="column phone">
|
<div class="column phone">
|
||||||
<label for="newsletter-phone">Phone:</label>
|
<label for="newsletter-phone">Phone:</label>
|
||||||
@@ -235,7 +239,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="column email">
|
<div class="column email">
|
||||||
<label for="newsletter-email">Email address:</label>
|
<label for="newsletter-email">Email address:</label>
|
||||||
<input id="newsletter-email" name="email" type="email" />
|
<input id="newsletter-email" name="email" type="email" required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column submit">
|
<div class="column submit">
|
||||||
|
|||||||
Reference in New Issue
Block a user