Mobile site
This commit is contained in:
James Shiffer
parent
77e019ee38
commit
c6effe21f3
@ -23,7 +23,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Navigo Bold;
|
font-family: Navigo Bold, sans-serif;
|
||||||
background-color: var(--page-bg);
|
background-color: var(--page-bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
@ -32,14 +32,199 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
@media only screen and (min-width: 1024px) {
|
||||||
height: var(--nav-height);
|
|
||||||
position: fixed;
|
.mobile-only {
|
||||||
width: 100vw;
|
display: none !important;
|
||||||
top: 0;
|
}
|
||||||
z-index: 9;
|
|
||||||
display: flex;
|
nav {
|
||||||
background-color: var(--page-bg);
|
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 {
|
nav a {
|
||||||
@ -54,26 +239,6 @@ nav a:hover {
|
|||||||
color: var(--link-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 {
|
.banner {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: var(--banner-bg);
|
background-color: var(--banner-bg);
|
||||||
@ -119,15 +284,8 @@ nav a:hover {
|
|||||||
padding: 1rem 3rem;
|
padding: 1rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-banner-buttons a {
|
.center {
|
||||||
display: inline-block;
|
text-align: center;
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
width: 10rem;
|
|
||||||
background-color: var(--button-bg);
|
|
||||||
padding: 1rem 0;
|
|
||||||
color: var(--button-text);
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-banner-buttons a:hover, .banner button:hover, a.button:hover {
|
.main-banner-buttons a:hover, .banner button:hover, a.button:hover {
|
||||||
@ -141,10 +299,6 @@ nav a:hover {
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullpage > .container, .fullpage > .panel {
|
|
||||||
padding-top: var(--nav-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
flex: 0 0 30%;
|
flex: 0 0 30%;
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
@ -195,10 +349,6 @@ nav a:hover {
|
|||||||
content: counter(policy-counter) ". ";
|
content: counter(policy-counter) ". ";
|
||||||
}
|
}
|
||||||
|
|
||||||
#landing {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#about {
|
#about {
|
||||||
background-image: url(../assets/civic.jpg);
|
background-image: url(../assets/civic.jpg);
|
||||||
}
|
}
|
||||||
@ -211,6 +361,10 @@ nav a:hover {
|
|||||||
background-image: url(../assets/carwash.jpg);
|
background-image: url(../assets/carwash.jpg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#donate h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#joinus {
|
#joinus {
|
||||||
background-image: url(../assets/bote.jpg);
|
background-image: url(../assets/bote.jpg);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -225,7 +379,7 @@ nav a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#contactForm input {
|
#contactForm input {
|
||||||
font-size: 1rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.read-more {
|
.read-more {
|
||||||
@ -244,7 +398,6 @@ nav a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#donate .banner {
|
#donate .banner {
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -9,14 +9,46 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="landing-mobile" class="fullpage">
|
||||||
|
<div class="main-banner">
|
||||||
|
<div class="main-banner-header">
|
||||||
|
<img src="assets/myles-logo.png">
|
||||||
|
<div class="mobile-only hamburger-container">
|
||||||
|
<div class="hamburger" data-target-id="mobile-nav-menu">
|
||||||
|
<div class="hamburger-line"></div>
|
||||||
|
<div class="hamburger-line"></div>
|
||||||
|
<div class="hamburger-line"></div>
|
||||||
|
<div class="hamburger-open">
|
||||||
|
<span>×</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-banner-content">
|
||||||
|
<div id="mobile-nav-menu">
|
||||||
|
<a href="/#about">About</a>
|
||||||
|
<a href="/#joinus">Join</a>
|
||||||
|
<a href="/#donate">Donate</a>
|
||||||
|
<a href="/#contact">Contact</a>
|
||||||
|
</div>
|
||||||
|
<div class="main-banner-buttons">
|
||||||
|
<a href="#donate">Donate</a>
|
||||||
|
<a href="#joinus">Join</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="about" class="fullpage">
|
<div id="about" class="fullpage">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<h1>About Miles</h1>
|
<h1>About Miles</h1>
|
||||||
<img src="assets/myles.png" height="200">
|
<img src="assets/myles.png" height="200">
|
||||||
<p>About box description</p>
|
<p>About box description</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div>
|
<div class="center">
|
||||||
|
<h1 class="mobile-only">About Miles</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Let's work to make San Jose more affordable</li>
|
<li>Let's work to make San Jose more affordable</li>
|
||||||
<p></p>
|
<p></p>
|
||||||
|
|||||||
@ -83,7 +83,7 @@ function registerFormValidators(formId) {
|
|||||||
fd.append('message', message.value);
|
fd.append('message', message.value);
|
||||||
if (subject)
|
if (subject)
|
||||||
fd.append('subject', subject.value);
|
fd.append('subject', subject.value);
|
||||||
var req = fetch(form.action, {
|
fetch(form.action, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: fd
|
body: fd
|
||||||
}).then(function (res) {
|
}).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 () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
registerFormValidators('subscribeForm');
|
registerFormValidators('subscribeForm');
|
||||||
registerFormValidators('contactForm');
|
registerFormValidators('contactForm');
|
||||||
|
registerHamburgers();
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user