From 836897cdad7cfce52cf5dd83b929ff29a0261bea Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Sat, 1 Sep 2018 16:11:42 +0200 Subject: [PATCH] New mobile menu. --- .gitignore | 1 + static/images/boxicon-menu.svg | 1 + static/js/menu.js | 10 ++++ static/main.css | 96 ++++++++++++++++++++++++++++------ templates/base.html.tera | 39 ++++++++------ 5 files changed, 115 insertions(+), 32 deletions(-) create mode 100644 static/images/boxicon-menu.svg create mode 100644 static/js/menu.js diff --git a/.gitignore b/.gitignore index 925d54c..33acb32 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ rls translations po/*.po~ .env +Rocket.toml diff --git a/static/images/boxicon-menu.svg b/static/images/boxicon-menu.svg new file mode 100644 index 0000000..0dd7a2b --- /dev/null +++ b/static/images/boxicon-menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 0000000..b40b565 --- /dev/null +++ b/static/js/menu.js @@ -0,0 +1,10 @@ +document.addEventListener("DOMContentLoaded", () => { + let content = document.getElementById("content"); + document.getElementById("menu").querySelector("a").addEventListener("click", () => { + content.classList.add("opened"); + }); + content.addEventListener("click", (e) => { + if (e.target === content) + content.classList.remove("opened"); + }); +}); \ No newline at end of file diff --git a/static/main.css b/static/main.css index 5f218a5..ebd7310 100644 --- a/static/main.css +++ b/static/main.css @@ -25,14 +25,31 @@ a, a:visited { */ header { + background: #ECECEC; +} +header #content { display: flex; align-content: center; justify-content: space-between; - background: #ECECEC; } -header #menu { +header nav#menu { + position: relative; display: none; + transform: skewX(-15deg); + left: -1em; + padding: 1em 1em 1em 2em; + background: #7765E3; + align-self: flex-start; +} +header nav#menu a { + transform: skewX(15deg); + width: 1.75em; + height: 1.75em; + margin: 0; + padding: 0; + background: url("/static/images/boxicon-menu.svg") no-repeat center; + background-size: contain; } header nav { @@ -483,31 +500,80 @@ form.new-post input[type="submit"] { * Small Screens * * ================= */ -@media screen and (max-width: 500px) { - header { - padding: 1em; +@media screen and (max-width: 900px) { + header { flex-direction: column; } - header #menu { - display: flex; + header nav#menu { + display: inline-flex; } - header > nav { + header #content { display: none; text-align: center; } - header nav a, header nav a.title { padding: 0.5em; } - header nav a.title { - width: 100vw; - margin: 0; - border: none; - font-size: 1.75em; + + @keyframes menuOpening { + from { + transform: scaleX(0); + transform-origin: left; + opacity: 0; + } + + to { + transform: scaleX(1); + transform-origin: left; + opacity: 1; + } } - header:focus-within > nav { + header #content.opened, header:focus-within #content { + position: fixed; display: flex; flex-direction: column; + justify-content: flex-start; + + top: 0; + left: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + + animation: 0.2s menuOpening; + } + header #content.opened::before, header:focus-within #content::before { + content: ""; + position: absolute; + transform: skewX(-10deg); + top: 0; + left: -20%; + width: 100%; + height: 100%; + + z-index: -10; + + background: #7765E3; + } + header #content.opened > nav, header:focus-within #content > nav { + flex-direction: column; + align-items: flex-start; + } + header #content.opened > nav a, header:focus-within #content > nav a { + margin: 0; + padding: 1rem 1.5rem; + color: #F4F4F4; + font-size: 1.4em; + font-weight: 300; + } + header #content.opened > nav a.title, header:focus-within #content > nav a.title { + font-size: 1.8em; + } + header #content.opened > nav hr, header:focus-within #content > nav hr { + display: block; + margin: 0; + width: 100%; + border: solid #F4F4F4 0.1rem; } body > main > * { diff --git a/templates/base.html.tera b/templates/base.html.tera index 6d84311..6c8c3f6 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -6,27 +6,32 @@ +
- - -
{% block content %}