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

6
public/index.php
View File

@ -12,14 +12,16 @@
<div id="landing-mobile" class="fullpage">
<div class="main-banner">
<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="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>&times;</span>
<p>&times;</p>
</div>
</div>
</div>