From fd65685c70750104a29bdb92645dff5e60d8fe2b Mon Sep 17 00:00:00 2001 From: Simon Laux Date: Mon, 4 Nov 2024 19:19:31 +0100 Subject: [PATCH 1/3] menu --- _includes/menu-items.html | 6 ++++ _layouts/default.html | 26 +++++++++++------ _sass/_base.scss | 60 +++++++++++++++++++++++++++++++++++---- 3 files changed, 77 insertions(+), 15 deletions(-) create mode 100644 _includes/menu-items.html diff --git a/_includes/menu-items.html b/_includes/menu-items.html new file mode 100644 index 000000000..413f4ad1a --- /dev/null +++ b/_includes/menu-items.html @@ -0,0 +1,6 @@ +
  • {%if tx.menu.home != ""%}{{ tx.menu.home }}{%else%}{{ txEn.menu.home }}{%endif%}
    • +
  • {%if tx.menu.download != ""%}{{ tx.menu.download }}{%else%}{{ txEn.menu.download }}{%endif%}
    • +
  • {%if tx.menu.blog != ""%}{{ tx.menu.blog }}{%else%}{{ txEn.menu.blog }}{%endif%}
    • +
  • {%if tx.menu.contribute != ""%}{{ tx.menu.contribute }}{%else%}{{ txEn.menu.contribute }}{%endif%}
    • +
  • {%if tx.menu.help != ""%}{{ tx.menu.help }}{%else%}{{ txEn.menu.help }}{%endif%}
    • +
  • {%if tx.menu.forum != ""%}{{ tx.menu.forum }}{%else%}{{ txEn.menu.forum }}{%endif%}
    • \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 0c72c8353..8f3f2d483 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -29,17 +29,25 @@ - +{% comment %} critical styles - so that both menus are not shown at once {% endcomment %} + + + + +
    diff --git a/_sass/_base.scss b/_sass/_base.scss index b7162f1a9..7f70f88e4 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -53,7 +53,7 @@ body { padding-top: 0px; } -#menu { +.menu { text-align: center; margin-bottom: 1em; padding: 8px 5px; @@ -62,14 +62,17 @@ body { background: var(--menu-bg); } -#menu ul { +.menu .desktop-menu-items { display: flex; +} +.menu .desktop-menu-items, +.menu .mobile-menu-items { align-items: center; justify-content: center; flex-wrap: wrap; } -#menu li { +.menu li { display: inline-block; padding-right: 0.5em; @@ -81,6 +84,51 @@ body { } } +@media only screen and (max-width: 640px) { + .menu { + .desktop-menu-items { + display: none; + } + .mobile-menu-items { + display: flex; + } + } +} + +.mobile-menu { + margin-inline: auto; + width: 95vw; + padding: 5px; + label { + color: #fff; + color: var(--menu-text); + font-weight: bold; + margin: 5px; + font-size: 2em; + } + ul { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-wrap: wrap; + color: #fff; + color: var(--menu-text); + li { + a { + font-size: 2rem; + line-height: 2rem; + } + margin: 0.4rem; + } + margin: 1rem; + } +} + +#menu:checked ~ .mobile-menu { + display: block; +} + #content { padding: 0em 1em 0.5em 1em; } @@ -149,10 +197,10 @@ body { body { padding-top: 0px; } - #menu { + .menu { padding: 10px 0; } - #menu li { + .menu li { padding-right: 1em; a, @@ -239,7 +287,7 @@ body { background-color: var(--bg); } -#menu, +.menu, h1, h2, h3, From 6697f407e3722b2bc1da80a7d2e0dfa5a7d00ee4 Mon Sep 17 00:00:00 2001 From: Simon Laux Date: Mon, 4 Nov 2024 19:24:42 +0100 Subject: [PATCH 2/3] remove unused code (was for a close button that I removed again) --- _sass/_base.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/_sass/_base.scss b/_sass/_base.scss index 7f70f88e4..48122a3b5 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -99,13 +99,6 @@ body { margin-inline: auto; width: 95vw; padding: 5px; - label { - color: #fff; - color: var(--menu-text); - font-weight: bold; - margin: 5px; - font-size: 2em; - } ul { display: flex; flex-direction: column; From e4713771e77732132f04cedbad9361aa3221a544 Mon Sep 17 00:00:00 2001 From: Simon Laux Date: Mon, 4 Nov 2024 21:49:45 +0100 Subject: [PATCH 3/3] fix color of menu button --- _sass/_base.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/_base.scss b/_sass/_base.scss index 48122a3b5..026dcce19 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -77,7 +77,7 @@ body { padding-right: 0.5em; a, - a:visited { + a:visited, label { color: #fff; color: var(--menu-text); font-size: 16px; @@ -395,7 +395,7 @@ code { h1, h2, h3, -h4, +h4,a h5, h6 { &:hover {