Mobile site
This commit is contained in:
James Shiffer
parent
77e019ee38
commit
c6effe21f3
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -9,14 +9,46 @@
|
||||
</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 class="panel">
|
||||
<div class="panel">
|
||||
<h1>About Miles</h1>
|
||||
<img src="assets/myles.png" height="200">
|
||||
<p>About box description</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="center">
|
||||
<h1 class="mobile-only">About Miles</h1>
|
||||
</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>Let's work to make San Jose more affordable</li>
|
||||
<p></p>
|
||||
|
||||
@ -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();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user