Skip to content
This repository has been archived by the owner on Dec 2, 2024. It is now read-only.

[FEAT] - Move form to bottom of the page as per slack poll / rework responsiveness #29

Merged
merged 5 commits into from
Dec 23, 2023
Merged

[FEAT] - Move form to bottom of the page as per slack poll / rework responsiveness #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ea4c62
feat: move email form to the bottom of the page
taciturnaxolotl Dec 23, 2023
259bec3
chore: remove css email br
taciturnaxolotl Dec 23, 2023
8425dc5
feat: add margin to form
taciturnaxolotl Dec 23, 2023
c22bf83
feat: made the features list not clip
taciturnaxolotl Dec 23, 2023
6321873
feat: adjusted responsiveness
taciturnaxolotl Dec 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions src/components/Email-Form.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,13 @@

<style>
.emailform {
transform: translateY(33em);
visibility: hidden;
position: absolute;
visibility: visible;
margin-bottom: 2rem;
}

@media (max-width: 825px) {
.emailform {
position: absolute;
transform: translateY(-7em);
}
}

Expand Down
95 changes: 17 additions & 78 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,17 @@ import "../styles/index.css";
>
Help Contribute
</a>
<button type="button" class="home-button button" form-button
>Sign Up For Newsletter</button
<button
type="button"
class="home-button button"
id="email-form-button"
form-button>Sign Up For Newsletter</button
>
</div>
</div>
<EmailForm />
<span class="emailbr" id="emailbr"></span>
<button class="chevron-button" id="chevron-button"></button>
<div class="chevron-container">
<button class="chevron-button" id="chevron-button"></button>
</div>
<div class="home-features">
<div class="home-container1">
<div
Expand Down Expand Up @@ -137,32 +140,23 @@ import "../styles/index.css";
</div>
</div>
</main>
<EmailForm />
<Notification />
</Layout>

<script>
const buttons = document.querySelectorAll("[form-button]");
const button = document.getElementById("email-form-button");
const scroll = document.getElementById("chevron-button");
const form = document.getElementById("email-form");
const emailbr = document.getElementById("emailbr");

form.style.visibility = "hidden";

// Add event listeners to fire confetti when a button is clicked.
buttons.forEach((button) => {
button.addEventListener("click", () => toggleForm());
button.addEventListener("click", () => {
// scroll to email form component
form.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest",
});
});
function toggleForm() {
if (form.style.visibility == "hidden") {
form.style.visibility = "visible";
scroll.style.visibility = "hidden";
emailbr.classList.add("show");
} else {
form.style.visibility = "hidden";
scroll.style.visibility = "visible";
emailbr.classList.remove("show");
}
}
scroll.addEventListener("click", () => {
// scroll to one page down
window.scrollBy({
Expand All @@ -173,58 +167,3 @@ import "../styles/index.css";
});
</script>

<style>
.emailbr {
display: block;
margin: 0px 0;
}

@media (max-width: 825px) {
.home-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-container2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-btn-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-text1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-features {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-lottie-node {
align-items: center;
width: 100%;
height: 100%;
}

.emailbr.show {
display: block;
margin: 140px 0;
}
}
</style>
19 changes: 0 additions & 19 deletions src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,22 +113,3 @@ img {
html {
scroll-behavior: smooth;
}

.hero {
width: 100%;
height: 757px;
display: flex;
padding: var(--dl-space-space-threeunits);
position: relative;
min-height: 80vh;
align-items: center;
flex-direction: column;
background-size: cover;
justify-content: center;
background-image: url("https://cdn.purplebubble.org/background.png");
}

.hero h1 {
color: var(--dl-color-gray-white);
font-size: 3rem;
}
108 changes: 90 additions & 18 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,27 @@
--dl-space-space-oneandhalfunits: 24px;
}

.hero {
width: 100%;
height: 757px;
display: flex;
padding: var(--dl-space-space-threeunits);
position: relative;
min-height: 80vh;
align-items: center;
flex-direction: column;
background-size: cover;
justify-content: center;
background-image: url("https://cdn.purplebubble.org/background.png");
}

.hero h1 {
color: var(--dl-color-gray-white);
font-size: 3rem;
text-align: center;
}


.button {
color: var(--dl-color-gray-black);
display: inline-block;
Expand Down Expand Up @@ -378,18 +399,28 @@
height: 504px;
}

.chevron-container {
margin-bottom: var(--dl-space-space-threeunits);
transform: translateY(-5rem);
width: 4em;
height: 4em;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}

.chevron-button {
width: 4em;
height: 4em;
fill: var(--dl-color-gray-white);
transform: translateY(-5em);
background-image: url("/chevron.svg");
background-repeat: no-repeat;
background-size: contain;
}

.chevron-button:hover {
transform: translateY(-5em) scale(1.1);
transform: scale(1.1);
}

@media (max-width: 1600px) {
Expand All @@ -413,26 +444,72 @@
}

.home-container1 {
width: 531px;
padding-right: 13px;
width: auto;
}
}

@media (max-width: 991px) {
.home-hero {
flex-direction: column;
}

.home-text {
text-align: center;
}

.home-text1 {
text-align: center;
}

.home-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-container2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-text1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-features {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.home-lottie-node {
align-items: center;
width: 100%;
height: 100%;
}
}

@media (max-width: 767px) {
@media (max-width: 768px) {
.home-hero {
flex-direction: column;
}

.home-btn-group {
flex-direction: column;
justify-content: center;
align-items: center;
}

.home-button {
margin-top: var(--dl-space-space-unit);
margin-left: 0px;
}

.home-hero {
padding-left: var(--dl-space-space-twounits);
padding-right: var(--dl-space-space-twounits);
Expand All @@ -442,6 +519,10 @@
padding-left: var(--dl-space-space-twounits);
padding-right: var(--dl-space-space-twounits);
}

.chevron-container {
display: none;
}
}

@media (max-width: 479px) {
Expand All @@ -453,15 +534,6 @@
padding-right: var(--dl-space-space-unit);
}

.home-btn-group {
flex-direction: column;
}

.home-button {
margin-top: var(--dl-space-space-unit);
margin-left: 0px;
}

.home-features {
padding-top: var(--dl-space-space-twounits);
padding-left: var(--dl-space-space-unit);
Expand Down