diff options
author | Alex Auvolat <alex@adnab.me> | 2022-12-22 00:07:05 +0100 |
---|---|---|
committer | Alex Auvolat <alex@adnab.me> | 2022-12-22 00:07:05 +0100 |
commit | 719c8cf49309890ad82ef0cf9b87aeed299b6777 (patch) | |
tree | 3f5789685f5818e9c9f15baa1f480e97e23e4df3 | |
parent | 73d4b846ec6976acd0abf53f28144823183fdfbd (diff) | |
download | guide.deuxfleurs.fr-719c8cf49309890ad82ef0cf9b87aeed299b6777.tar.gz guide.deuxfleurs.fr-719c8cf49309890ad82ef0cf9b87aeed299b6777.zip |
Tentative 1 for Mobile navigation menu
-rw-r--r-- | sass/_text.scss | 12 | ||||
-rw-r--r-- | sass/juice.scss | 132 | ||||
-rw-r--r-- | templates/_macros.html | 20 | ||||
-rw-r--r-- | templates/index.html | 28 |
4 files changed, 157 insertions, 35 deletions
diff --git a/sass/_text.scss b/sass/_text.scss index 329017b..eb52d51 100644 --- a/sass/_text.scss +++ b/sass/_text.scss @@ -1,14 +1,16 @@ .heading-text { font-family: "Fira Sans", sans-serif; - font-size: 32px; + font-size: 2em; font-weight: 600; + line-height: 1.2em; padding: 10px 0 25px 0; color: var(--secondary-text-color); } h1, .title-text { font-family: "Fira Sans", sans-serif; - font-size: 25px; + font-size: 1.8em; + line-height: 1.2em; font-weight: 500; color: var(--secondary-text-color); border-left: var(--primary-color) 8px solid; @@ -17,7 +19,7 @@ h1, .title-text { h2, .title-text { font-family: "Fira Sans", sans-serif; - font-size: 25px; + font-size: 1.5em; font-weight: 500; color: var(--secondary-text-color); border-left: #aaa 8px solid; @@ -26,14 +28,14 @@ h2, .title-text { h3, .subtitle-text { font-family: "Fira Sans", sans-serif; - font-size: 20px; + font-size: 1.3em; font-weight: 500; color: var(--secondary-text-color); } .text { font-family: "Fira Sans", sans-serif; - font-size: 18px; + font-size: 16px; font-weight: 400; line-height: 26px; letter-spacing: 0.2px; diff --git a/sass/juice.scss b/sass/juice.scss index 04136a1..2e2d5e3 100644 --- a/sass/juice.scss +++ b/sass/juice.scss @@ -38,9 +38,20 @@ header { justify-content: space-between; } +header ul { + margin: 0px; + padding: 0px; + list-style: none; +} + +header ul li { + display: inline; + +} + .logo { font-family: Georgia, DejaVu Serif, Norasi, serif; - font-size: 32px; + font-size: 28px; color: var(--primary-text-color); font-weight: 500; display: flex; @@ -56,7 +67,6 @@ header { .nav-item { margin: 0 10px; text-decoration: none; - font-size: 18px; font-weight: bold; color: var(--primary-text-color); @@ -83,10 +93,12 @@ header { } } + main { display: flex; - padding: 50px 100px; flex-grow: 1; + padding: 50px 100px; + margin: 0; .toc { max-width: 260px; @@ -123,7 +135,6 @@ main { padding: 0 30px 5px; color: #424242; } - } .toc-sticky { @@ -156,20 +167,36 @@ footer { } } +main details#navigation-toggle summary { + display: none; +} + @media screen and (min-width: 1280px) { + .logo { + font-size: 32px; + } .content { max-width: 60%; min-width: 800px; overflow: hidden; } + .text { + font-size: 18px; + } } @media screen and (max-width: 768px) { header { - padding: 10px 30px; - flex-direction: column; - align-items: center; - justify-content: center; + padding: 10px 20px; + display: block; + } + + header nav { + display: none; + } + + header ul li { + display: block; } .logo { @@ -184,7 +211,7 @@ footer { .nav-item { margin: 0 5px; - font-size: 14px; + font-size: 1em; } .hero { @@ -192,15 +219,98 @@ footer { } main { - padding: 30px; + display: block; + padding: 0px; + } + + + main .toc { + margin: 0px; + width: 100%; + max-width: none; + border: 0px; + } + main .toc-sticky { + border: 0px; + } + + main .content { + margin: 15px; } .content { padding: 0; + display: block; } - .explore-more, .toc { + .explore-more { display: none; } + +} + + +/* *********** */ + + +.menu-button-container { + display: none; } + +#menu-toggle { + display: none; +} + +.menu-button, +.menu-button::before, +.menu-button::after { + display: block; + background-color: #fff; + position: absolute; + height: 4px; + width: 30px; + transition: transform 400ms ease; + border-radius: 2px; +} + +.menu-button::before { + content: ''; + transform: translate(0, -8px); +} + +.menu-button::after { + content: ''; + transform: translate(0, 8px); +} + +#menu-toggle:checked + .menu-button-container .menu-button::before { + margin-top: 0px; + transform: rotate(45deg); +} + +#menu-toggle:checked + .menu-button-container .menu-button { + background: transparent; +} + +#menu-toggle:checked + .menu-button-container .menu-button::after { + margin-top: 0px; + transform: rotate(-45deg); +} + +@media (max-width: 768px) { + .menu-button-container { + position: absolute; + display: block; + height: 32px; + width: 32px; + top: 40px; + right: 24px; + } + #menu-toggle ~ .toc { + display: none; + } + #menu-toggle:checked ~ .toc { + display: block; + } +}
\ No newline at end of file diff --git a/templates/_macros.html b/templates/_macros.html index 7c301a9..4f8d852 100644 --- a/templates/_macros.html +++ b/templates/_macros.html @@ -1,5 +1,7 @@ {% macro render_header() %} {% set section = get_section(path="_index.md") %} + + <a href="{{ section.permalink }}"> <div class="logo"> <img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo"> @@ -8,14 +10,16 @@ </a> <nav> - {% for subpath in section.subsections %} - {% set sub = get_section(path=subpath) %} - <a class="nav-item subtitle-text" href="{{ sub.permalink }}">{{ sub.title }}</a> - {% endfor %} - {% if config.extra.juice_extra_menu %} - {% for menu in config.extra.juice_extra_menu %} - <a class="nav-item subtitle-text" href="{{ menu.link }}">{{ menu.title }}</a> + <ul> + {% for subpath in section.subsections %} + {% set sub = get_section(path=subpath) %} + <li><a class="nav-item text" href="{{ sub.permalink }}">{{ sub.title }}</a></li> {% endfor %} - {% endif %} + {% if config.extra.juice_extra_menu %} + {% for menu in config.extra.juice_extra_menu %} + <li><a class="nav-item text" href="{{ menu.link }}">{{ menu.title }}</a></li> + {% endfor %} + {% endif %} + </ul> </nav> {% endmacro render_header %} diff --git a/templates/index.html b/templates/index.html index 004a4fa..a00a979 100644 --- a/templates/index.html +++ b/templates/index.html @@ -19,23 +19,29 @@ <body> {% block header %} - <header class="box-shadow"> + <header class="box-shadow top-nav"> {{ macros::render_header() }} </header> {% endblock header %} <main> - {% block toc %} - <div class="toc"> - <div class="toc-sticky"> - {% if page %} - {{ nav::navmenu(current=page) }} - {% else %} - {{ nav::navmenu(current=section) }} + {% block mainnav %} + {% if page.ancestors or section.ancestors %} + <input id="menu-toggle" type="checkbox" {% if section.subsections or section.pages %}checked{% endif %} /> + <label class='menu-button-container' for="menu-toggle"> + <div class='menu-button'></div> + </label> + <div class="toc" id="navigation"> + <div class="toc-sticky"> + {% if page %} + {{ nav::navmenu(current=page) }} + {% else %} + {{ nav::navmenu(current=section) }} + {% endif %} + </div> + </div> {% endif %} - </div> - </div> - {% endblock toc %} + {% endblock mainnav %} <div class="content text"> {% block content %} |