diff --git a/public/css/main.css b/public/css/main.css
index cb0c9e6..3cd8915 100755
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -9,7 +9,7 @@
--button-text-hover: #FFF;
--link-hover: gray;
--nav-height: 126px;
-
+
box-sizing: border-box;
}
@@ -23,7 +23,7 @@ html {
}
body {
- font-family: Navigo Bold;
+ font-family: Navigo Bold, sans-serif;
background-color: var(--page-bg);
color: var(--text);
}
@@ -32,14 +32,199 @@ a {
text-decoration: none;
}
-nav {
- height: var(--nav-height);
- position: fixed;
- width: 100vw;
- top: 0;
- z-index: 9;
- display: flex;
- background-color: var(--page-bg);
+@media only screen and (min-width: 1024px) {
+
+ .mobile-only {
+ display: none !important;
+ }
+
+ nav {
+ height: var(--nav-height);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 9;
+ display: flex;
+ background-color: var(--page-bg);
+ }
+
+ #landing {
+ display: block !important;
+ }
+
+ #landing-mobile {
+ display: none !important;
+ }
+
+ #about > .panel {
+ display: block !important;
+ }
+
+ #donate .banner {
+ flex-direction: row !important;
+ }
+
+ .main-banner {
+ position: relative !important;
+ background-color: var(--banner-bg);
+ top: 50vh;
+ transform: translateY(-50%);
+ left: 4.5rem;
+ padding: 1rem;
+ width: 550px;
+ }
+
+ .main-banner img {
+ display: block;
+ margin: 1.5rem auto;
+ width: 70%;
+ }
+
+ .fullpage > .container, .fullpage > .panel {
+ padding-top: var(--nav-height) !important;
+ }
+
+ .main-banner-buttons a {
+ display: inline-block;
+ margin: 0 auto;
+ text-align: center;
+ width: 10rem;
+ background-color: var(--button-bg);
+ padding: 1rem 0;
+ color: var(--button-text);
+ font-size: 30px;
+ }
+
+}
+
+@media only screen and (max-width: 1024px) {
+
+ .hamburger-container {
+ padding: 1rem 1rem 2rem 1rem;
+ }
+
+ .hamburger {
+ display: flex;
+ flex-direction: column;
+ width: 5rem;
+ height: 100%;
+ cursor: pointer;
+ justify-content: space-between;
+ }
+
+ .hamburger-line {
+ height: 0;
+ width: 100%;
+ border: 0.25rem var(--button-text) solid;
+ }
+
+ .hamburger-open {
+ display: none;
+ font-size: 5rem;
+ line-height: 1;
+ color: var(--button-text);
+ text-align: center;
+ }
+
+ .hamburger.is-open .hamburger-line {
+ display: none;
+ }
+
+ .hamburger.is-open .hamburger-open {
+ display: block;
+ }
+
+ #mobile-nav-menu {
+ display: none;
+ }
+
+ #mobile-nav-menu.is-open {
+ display: flex;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: var(--banner-bg);
+ z-index: 9;
+ flex-direction: column;
+ font-size: 2rem;
+ }
+
+ #mobile-nav-menu a {
+ color: var(--button-text);
+ font-size: 40px;
+ text-align: center;
+ margin: 0.5rem;
+ }
+
+ nav {
+ display: none;
+ }
+
+ .main-banner {
+ background-color: var(--banner-bg);
+ padding: 1rem;
+ height: 100%;
+ }
+
+ .main-banner img {
+ display: block;
+ margin: 0.5rem 2rem;
+ height: 6rem;
+ }
+
+ .main-banner-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+ }
+
+ .main-banner-buttons {
+ flex-direction: column;
+ margin: 0 auto;
+ padding-top: 12rem;
+ gap: 4rem;
+ width: 70%;
+ min-width: 300px;
+ }
+
+ .main-banner-buttons a {
+ display: block;
+ margin: 0 auto;
+ text-align: center;
+ width: 100%;
+ background-color: var(--button-bg);
+ padding: 1rem 0;
+ color: var(--button-text);
+ font-size: 4rem;
+ }
+
+ #landing {
+ display: none;
+ }
+
+ #landing-mobile {
+ display: block;
+ padding: 2rem;
+ }
+
+ #about > .panel {
+ display: none;
+ }
+
+ #donate .banner {
+ flex-direction: column;
+ }
+
+ .main-banner-content {
+ width: 100%;
+ position: relative;
+ }
+
+}
+
+.main-banner-buttons {
+ display: flex;
}
nav a {
@@ -54,26 +239,6 @@ nav a:hover {
color: var(--link-hover);
}
-.main-banner {
- position: relative;
- background-color: var(--banner-bg);
- top: 50vh;
- transform: translateY(-50%);
- left: 4.5rem;
- padding: 1rem;
- width: 550px;
-}
-
-.main-banner img {
- display: block;
- margin: 1.5rem auto;
- width: 70%;
-}
-
-.main-banner-buttons {
- display: flex;
-}
-
.banner {
display: flex;
background-color: var(--banner-bg);
@@ -119,15 +284,8 @@ nav a:hover {
padding: 1rem 3rem;
}
-.main-banner-buttons a {
- display: inline-block;
- margin: 0 auto;
- text-align: center;
- width: 10rem;
- background-color: var(--button-bg);
- padding: 1rem 0;
- color: var(--button-text);
- font-size: 30px;
+.center {
+ text-align: center;
}
.main-banner-buttons a:hover, .banner button:hover, a.button:hover {
@@ -141,10 +299,6 @@ nav a:hover {
background-size: cover;
}
-.fullpage > .container, .fullpage > .panel {
- padding-top: var(--nav-height) !important;
-}
-
.panel {
flex: 0 0 30%;
min-width: 400px;
@@ -195,10 +349,6 @@ nav a:hover {
content: counter(policy-counter) ". ";
}
-#landing {
- display: block;
-}
-
#about {
background-image: url(../assets/civic.jpg);
}
@@ -211,6 +361,10 @@ nav a:hover {
background-image: url(../assets/carwash.jpg);
}
+#donate h2 {
+ margin: 0;
+}
+
#joinus {
background-image: url(../assets/bote.jpg);
text-align: center;
@@ -225,7 +379,7 @@ nav a:hover {
}
#contactForm input {
- font-size: 1rem;
+ font-size: 2rem;
}
.read-more {
@@ -244,7 +398,6 @@ nav a:hover {
}
#donate .banner {
- flex-direction: row;
align-items: center;
}
diff --git a/public/index.php b/public/index.php
index 9d033f3..ac113c9 100755
--- a/public/index.php
+++ b/public/index.php
@@ -9,14 +9,46 @@
+
+
+
+
+
+
+
+
+
-
+
About Miles
About box description
-
+
+
About Miles
+
+
- Let's work to make San Jose more affordable
diff --git a/public/js/app.js b/public/js/app.js
index cdc0121..5f79a28 100755
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -83,7 +83,7 @@ function registerFormValidators(formId) {
fd.append('message', message.value);
if (subject)
fd.append('subject', subject.value);
- var req = fetch(form.action, {
+ fetch(form.action, {
method: 'POST',
body: fd
}).then(function (res) {
@@ -112,7 +112,23 @@ function registerFormValidators(formId) {
}
}
+function registerHamburgers() {
+ for (const hamburger of document.querySelectorAll('.hamburger')) {
+ hamburger.addEventListener('click', function (e) {
+ var target = document.getElementById(e.currentTarget.dataset.targetId);
+ if (e.currentTarget.classList.contains('is-open')) {
+ e.currentTarget.classList.remove('is-open');
+ target.classList.remove('is-open');
+ } else {
+ e.currentTarget.classList.add('is-open');
+ target.classList.add('is-open');
+ }
+ });
+ }
+}
+
document.addEventListener('DOMContentLoaded', function () {
registerFormValidators('subscribeForm');
registerFormValidators('contactForm');
+ registerHamburgers();
});