From 16a8abba2b3e0eb32f017cd5c9ffbedc829b0c2c Mon Sep 17 00:00:00 2001 From: luca Date: Sun, 3 Nov 2019 20:13:03 +0100 Subject: [PATCH 01/21] Add meta viewport tag to HTML head This tag is essential for a mobile friendly layout. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag for more info. --- templates/base.html | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/base.html b/templates/base.html index de3dfa3e..58272e14 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,6 +3,7 @@ + {% block title %}Arch Linux{% endblock %} From 5c2092c48c4712660e4f1677bc631838cd466128 Mon Sep 17 00:00:00 2001 From: luca Date: Mon, 4 Nov 2019 22:27:31 +0100 Subject: [PATCH 02/21] Add markup and style for a mobile friendly hamburger button menu The markup is added before the actual archnavbarlist to make it possible to select said list via the CSS sibling selector depending on hamburger state/class. Note that this commit removes the minium body width of 650px. --- sitestatic/archweb.css | 55 +++++++++++++++++++++++++++++++++++++++++- templates/base.html | 5 ++++ 2 files changed, 59 insertions(+), 1 deletion(-) diff --git a/sitestatic/archweb.css b/sitestatic/archweb.css index 806944bf..ba2b5541 100644 --- a/sitestatic/archweb.css +++ b/sitestatic/archweb.css @@ -34,6 +34,60 @@ #archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } #archnavbarlist li a:hover { color: white !important; text-decoration: underline !important; } +/* style the navbar for mobile viewport */ +@media (max-width: 768px) { + /* style hamburger icon */ + #hamburger { + width: 50px; + height: 30px; + display: none; + margin-left: auto; + } + + #hamburger span { + background-color: #fff; + border-radius: 8px; + height: 3px; + width: 40px; + display: block; + margin: 5px; + transition: 0.5s; + } + + /* animate hamburger */ + #hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(10px); } + #hamburger.open span:nth-child(2) { opacity: 0; } + #hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-10px); } + + /* display nav items in hamburger menu fashion */ + .open + #archnavbarmenu #archnavbarlist { + display: flex !important; + flex-direction: column; + align-items: flex-start; + padding-bottom: 20px !important; + width: 100%; + position: absolute; + left: 0; + top: 60px; + background-color: #333; + } + + #archnavbar { + display: flex; + align-items: center; + position: relative; + } + + #hamburger { + display: block; + } + + #archnavbarlist { + display: none !important; + position: relative; + } +} + /* END ARCH GLOBAL NAVBAR */ /* simple reset */ @@ -45,7 +99,6 @@ /* general styling */ body { - min-width: 650px; background: #f6f9fc; color: #222; font: normal 100% sans-serif; diff --git a/templates/base.html b/templates/base.html index 58272e14..3ddba82c 100644 --- a/templates/base.html +++ b/templates/base.html @@ -18,6 +18,11 @@ +
+ {% if user.is_authenticated %} + + {% endif %} +
-
- {% if user.is_authenticated %} - - {% endif %} -
{% if messages %}
{% for message in messages %} @@ -82,19 +79,18 @@ {% block content_right %}{% endblock %}
{% endblock %} - + +

The registered trademark Linux® is used pursuant to a sublicense from LMI, + the exclusive licensee of Linus Torvalds, owner of the mark on a world-wide basis.