From 836897cdad7cfce52cf5dd83b929ff29a0261bea Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Sat, 1 Sep 2018 16:11:42 +0200 Subject: [PATCH 1/3] 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 925d54ce..33acb324 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 00000000..0dd7a2ba --- /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 00000000..b40b5650 --- /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 5f218a57..ebd7310d 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 6d843110..6c8c3f61 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -6,27 +6,32 @@ +
- - -
{% block content %} From 82dc9ee1012348474d7cf471c191bee84dcbe43f Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Sat, 1 Sep 2018 16:34:44 +0200 Subject: [PATCH 2/3] Fixed tags that were showing on top of the menu. --- static/main.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/main.css b/static/main.css index a1c3d921..6b530eb4 100644 --- a/static/main.css +++ b/static/main.css @@ -24,8 +24,7 @@ a, a:visited { small { margin-left: 1em; - color: #242424; - opacity: 0.6; + color: rgba(36, 36, 36, 0.6); font-size: 0.75em; word-wrap: break-word; word-break: break-all; @@ -462,6 +461,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; } flex-direction: row; align-items: center; margin-bottom: 0; + z-index: -20; } .badge { margin-left: 1em; From 06127a9f4887bd450c5af676061b649b9350c852 Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Sat, 1 Sep 2018 19:14:15 +0200 Subject: [PATCH 3/3] Removed JS. --- static/js/menu.js | 10 ---------- static/main.css | 12 ++++++------ templates/base.html.tera | 1 - 3 files changed, 6 insertions(+), 17 deletions(-) delete mode 100644 static/js/menu.js diff --git a/static/js/menu.js b/static/js/menu.js deleted file mode 100644 index b40b5650..00000000 --- a/static/js/menu.js +++ /dev/null @@ -1,10 +0,0 @@ -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 6b530eb4..f488461a 100644 --- a/static/main.css +++ b/static/main.css @@ -593,7 +593,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; } } } - header #content.opened, header:focus-within #content { + header:focus-within #content { position: fixed; display: flex; flex-direction: column; @@ -607,7 +607,7 @@ form.new-post input[type="submit"]:hover { background: #DADADA; } animation: 0.2s menuOpening; } - header #content.opened::before, header:focus-within #content::before { + header:focus-within #content::before { content: ""; position: absolute; transform: skewX(-10deg); @@ -620,21 +620,21 @@ form.new-post input[type="submit"]:hover { background: #DADADA; } background: #7765E3; } - header #content.opened > nav, header:focus-within #content > nav { + header:focus-within #content > nav { flex-direction: column; align-items: flex-start; } - header #content.opened > nav a, header:focus-within #content > 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 { + header:focus-within #content > nav a.title { font-size: 1.8em; } - header #content.opened > nav hr, header:focus-within #content > nav hr { + header:focus-within #content > nav hr { display: block; margin: 0; width: 100%; diff --git a/templates/base.html.tera b/templates/base.html.tera index 1bbdd417..d54b8856 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -6,7 +6,6 @@ -