mobile compatibility!

This commit is contained in:
Lynne Megido 2021-05-02 18:39:49 +10:00
parent 64efdbd5a9
commit e0f8e8ad7f
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
3 changed files with 63 additions and 2 deletions

View File

@ -43,6 +43,8 @@
</section>
</header>
<div id="hamburger"><div id="hb-icon"></div></div>
<main>
<article>
{%- unless page.custom_heading -%}

View File

@ -0,0 +1,10 @@
function dgel(id) {
return document.getElementById(id);
}
window.addEventListener('DOMContentLoaded', (_) => {
dgel('hamburger').onclick = function () {
this.classList.toggle('active');
document.getElementsByTagName('header')[0].classList.toggle('active');
};
});

View File

@ -76,10 +76,9 @@ header {
position: sticky;
top: 0;
background: #333;
z-index: 1;
height: 100vh;
transition: 0.2s all;
}
header::after {
/* will use webp with jpeg fallback when
https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg
@ -98,6 +97,25 @@ header::after {
filter: blur(5px) saturate(75%);
content: "";
}
#hamburger {
display: none;
position: fixed;
top: 10px;
left: 10px;
padding: 10px;
background: #fafafa;
color: mediumpurple;
border-radius: 10px;
height: 27px;
width: 27px;
z-index: 3;
box-sizing: content-box;
}
#hb-icon {
height: 100%;
width: 100%;
background: linear-gradient( to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100% );
}
nav a {
color: white;
@ -161,4 +179,35 @@ nav a.current::before {
}
.project-footer a {
font-style: italic;
}
/* mobile tweaks */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
main {
width: 100vw;
box-shadow: none;
}
main article {
padding: 0 20px 30px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.5em;
}
header {
position: fixed;
left: -100vw;
width: 100vw;
z-index: 3;
}
header.active {
left: 0;
}
#hamburger {
display: inline-block;
touch-action: manipulation;
}
}