james/miles-city-council
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

More mobile fixes

Browse Source
This commit is contained in:
James Shiffer 2022-02-23 18:44:17 -08:00
parent c6effe21f3
commit 88400bb457
3 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
inc/header.php
View File

@ -2,6 +2,7 @@
<html lang="en-US"> <html lang="en-US">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="fav icon" href="assets/favicon.png"> <link rel="fav icon" href="assets/favicon.png">

81
public/css/main.css
View File

@ -48,6 +48,10 @@ a {
background-color: var(--page-bg); background-color: var(--page-bg);
} }
.container {
padding: 4rem;
}
#landing { #landing {
display: block !important; display: block !important;
} }
@ -100,32 +104,45 @@ a {
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.hamburger-container { .hamburger-container {
padding: 1rem 1rem 2rem 1rem; flex: 1 0 2rem;
margin: auto;
} }
.hamburger { .hamburger {
float: right;
margin: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 5rem; width: 40%;
height: 100%; height: 50%;
min-width: 2rem;
min-height: 2rem;
cursor: pointer; cursor: pointer;
justify-content: space-between; justify-content: space-between;
} }
.container {
padding: 4rem 0;
}
.hamburger-line { .hamburger-line {
height: 0; height: 0;
width: 100%; width: 100%;
border: 0.25rem var(--button-text) solid; border: 0.2rem var(--button-text) solid;
} }
.hamburger-open { .hamburger-open {
display: none; display: none;
font-size: 5rem;
line-height: 1; line-height: 1;
color: var(--button-text); color: var(--button-text);
text-align: center; text-align: center;
} }
.hamburger.is-open p {
margin: 0;
height: 2rem;
}
.hamburger.is-open .hamburger-line { .hamburger.is-open .hamburger-line {
display: none; display: none;
} }
@ -164,12 +181,18 @@ a {
background-color: var(--banner-bg); background-color: var(--banner-bg);
padding: 1rem; padding: 1rem;
height: 100%; height: 100%;
display: flex;
flex-direction: column;
} }
.main-banner img { .main-banner-icon {
flex: 3 0 0;
display: block; display: block;
margin: 0.5rem 2rem; }
height: 6rem;
.main-banner-icon img {
max-width: 100%;
max-height: 100%;
} }
.main-banner-header { .main-banner-header {
@ -177,15 +200,23 @@ a {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 0 1rem;
gap: 1rem;
}
.main-banner-content {
flex: 1 1 0;
position: relative;
} }
.main-banner-buttons { .main-banner-buttons {
position: relative;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
padding-top: 12rem; top: calc(100% - 200px - 1rem);
gap: 4rem; height: 200px;
justify-content: space-between;
width: 70%; width: 70%;
min-width: 300px;
} }
.main-banner-buttons a { .main-banner-buttons a {
@ -196,7 +227,6 @@ a {
background-color: var(--button-bg); background-color: var(--button-bg);
padding: 1rem 0; padding: 1rem 0;
color: var(--button-text); color: var(--button-text);
font-size: 4rem;
} }
#landing { #landing {
@ -216,9 +246,29 @@ a {
flex-direction: column; flex-direction: column;
} }
.main-banner-content { }
width: 100%;
position: relative;
@media only screen and (max-width: 1024px) and (min-width: 360px) {
.main-banner-buttons a {
font-size: 3rem;
}
.hamburger-open {
font-size: 3rem;
}
}
@media only screen and (max-width: 360px) {
.main-banner-buttons a {
font-size: 2rem;
}
.hamburger-open {
font-size: 2rem;
} }
} }
@ -324,7 +374,6 @@ nav a:hover {
display: block; display: block;
flex: 1 0 0; flex: 1 0 0;
font-size: 24px; font-size: 24px;
padding: 4rem;
} }
.container ol { .container ol {

6
public/index.php
View File

@ -12,14 +12,16 @@
<div id="landing-mobile" class="fullpage"> <div id="landing-mobile" class="fullpage">
<div class="main-banner"> <div class="main-banner">
<div class="main-banner-header"> <div class="main-banner-header">
<img src="assets/myles-logo.png"> <div class="main-banner-icon">
<img src="assets/myles-logo.png">
</div>
<div class="mobile-only hamburger-container"> <div class="mobile-only hamburger-container">
<div class="hamburger" data-target-id="mobile-nav-menu"> <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-line"></div>
<div class="hamburger-line"></div> <div class="hamburger-line"></div>
<div class="hamburger-open"> <div class="hamburger-open">
<span>&times;</span> <p>&times;</p>
</div> </div>
</div> </div>
</div> </div>