From f7c141c620c561f64543f30593c0178f75bdd17c Mon Sep 17 00:00:00 2001 From: Erik Lindsay Date: Thu, 15 Dec 2016 15:32:54 -0500 Subject: [PATCH] smooth scroll and more mobile --- css/main.css | 50 +- img/menu.svg | 1 + index.html | 174 +- js/freezeframe.js | 358 -- js/freezeframe.pkgd.js | 10420 --------------------------------------- js/main.js | 74 +- 6 files changed, 170 insertions(+), 10907 deletions(-) create mode 100644 img/menu.svg delete mode 100644 js/freezeframe.js delete mode 100644 js/freezeframe.pkgd.js diff --git a/css/main.css b/css/main.css index 5b26d21..1f6fe9e 100644 --- a/css/main.css +++ b/css/main.css @@ -98,10 +98,15 @@ textarea { box-sizing: border-box; } +header{ + display: none; +} + + body{ background-color: #dadae6; font-family: monospace; - padding-left: 14rem + padding-left: 14rem; } @@ -169,8 +174,8 @@ nav li ul li ul li{ main{ padding: 2rem; max-width: 50rem; - margin-left: auto; - margin-right: auto; + margin-left: 12rem; + padding-top: 4rem; } h3{ @@ -267,13 +272,48 @@ button.color-button{ background-color: green; } -@media only screen and (max-width: 49em) { +@media only screen and (max-width: 64.5rem) { nav{ - display: none; + bottom: 0; + height: calc(100vh - 3.2rem); + left: -24rem; + transition: left 0.5s ease; } + + nav.show{ + left: 0; + z-index: 5; + + } + body{ padding: 0; } + main{ + + margin-left: auto; + margin-right: auto; + } + + header{ + display: block; + background-color: #bdbdcc; + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: .5rem; + z-index: 10; +} +button#menu{ + background-color: transparent; + background-repeat: no-repeat; + border: none; + font-size: 1.1rem; +} + buton img{ + background-color: transparent; + } } @media only screen and (max-width: 37em) { diff --git a/img/menu.svg b/img/menu.svg new file mode 100644 index 0000000..e458e15 --- /dev/null +++ b/img/menu.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index b48790f..9d5c68f 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,11 @@

You are using an outdated browser. Please upgrade your browser to improve your experience.

+ +
+ +
+