Deuxfleurs/guide.deuxfleurs.fr
23
4
Fork 10
Code Issues 4 Pull requests 4 Projects Releases Wiki Activity

Améliorations du CSS responsive et navigation sur mobile #17

Merged
lx merged 7 commits from navigation-mobile into main 2022-12-22 12:45:04 +00:00
Conversation 0 Commits 7 Files changed 11 +157 -35
4 changed files with 157 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 719c8cf493 - Show all commits

12
sass/_text.scss
View file

@ -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;

132
sass/juice.scss
View file

@ -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;
}
}

20
templates/_macros.html
View file

@ -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 %}

28
templates/index.html
View file

@ -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 %}