From 730475b2e85e1bd66d8db25c5a7fbcdb2281743f Mon Sep 17 00:00:00 2001 From: luca Date: Sun, 3 Nov 2019 20:13:03 +0100 Subject: [PATCH 01/11] 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 e0f2ccfa..467428ed 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,6 +3,7 @@ + {% block title %}Arch Linux{% endblock %} From 800fbe72aa4c8556f95e882181335ecbda4b3381 Mon Sep 17 00:00:00 2001 From: luca Date: Mon, 4 Nov 2019 22:27:31 +0100 Subject: [PATCH 02/11] 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 f2496052..46ff00b8 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 467428ed..7b11e397 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 %} @@ -79,18 +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.