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
11 changed files with 186 additions and 51 deletions

View file

@ -1,5 +1,5 @@
+++ +++
title = "Manuels Deuxfleurs" title = "Guide Deuxfleurs"
sort_by = "weight" sort_by = "weight"
+++ +++

View file

@ -1,7 +1,7 @@
+++ +++
title = "Conférences" title = "Conférences"
description = "Compte-rendu des conférences auxquelles on a assisté" description = "Compte-rendu des conférences auxquelles on a assisté"
weight = 50 weight = 30
sort_by = "weight" sort_by = "weight"
+++ +++

View file

@ -1,23 +1,22 @@
+++ +++
title = "Médiathèque critique" title = "Médiathèque critique"
description = "Médiathèque critique" description = "Médiathèque critique"
weight = 30 weight = 20
sort_by = "weight" sort_by = "weight"
+++ +++
# Des livres # Des livres
![Couverture de la Convivialité d'Illich <](/img/cover/convivialite.jpg) ![Couverture de la Convivialité d'Illich #](/img/cover/convivialite.jpg)
![Couverture du Macroscope <](/img/cover/macroscope.jpg) ![Couverture du Macroscope #](/img/cover/macroscope.jpg)
![Couverture de l'ordre moins le pouvoir <](/img/cover/pouvoir.jpg) ![Couverture de l'ordre moins le pouvoir #](/img/cover/pouvoir.jpg)
![Couverture de technologie partout démocratie nulle part <](/img/cover/techno-partout.jpg) ![Couverture de technologie partout démocratie nulle part #](/img/cover/techno-partout.jpg)
![Couverture de Cyberstructure <](/img/cover/cyberstructure.jpg) ![Couverture de Cyberstructure #](/img/cover/cyberstructure.jpg)
![Couverture de L'institution imaginaire de la société <](/img/cover/imaginaire.jpg) ![Couverture de L'institution imaginaire de la société #](/img/cover/imaginaire.jpg)
![Couverture de Permanent Record #](/img/cover/permanent-record.jpg)
![Couverture de Permanent Record <](/img/cover/permanent-record.jpg) ![Couverture de La France contre les robots #](/img/cover/France-contre-robots.jpg)
![Couverture de La France contre les robots <](/img/cover/France-contre-robots.jpg) ![Couverture de Carbon Democracy de Timothy Mitchell #](/img/cover/carbon_democracy.jpg)
![Couverture de Carbon Democracy de Timothy Mitchell <](/img/cover/carbon_democracy.jpg) ![Couverture de Surveiller et punir de Michel Foucault #](/img/cover/surveiller-et-punir.jpg)
![Couverture de Surveiller et punir de Michel Foucault <](/img/cover/surveiller-et-punir.jpg)
[↣ Consulter la page détaillée sur les livres](./livres/) [↣ Consulter la page détaillée sur les livres](./livres/)

View file

@ -2,7 +2,7 @@
title = "Écosystème Nix" title = "Écosystème Nix"
description = "L'écosysème Nix : nixlang, nixpkgs, nixos, flakes, etc." description = "L'écosysème Nix : nixlang, nixpkgs, nixos, flakes, etc."
sort_by = "weight" sort_by = "weight"
weight = 30 weight = 60
+++ +++
# Apprendre # Apprendre

View file

@ -2,7 +2,7 @@
title = "Administration Système" title = "Administration Système"
description = "Administration Système" description = "Administration Système"
sort_by = "weight" sort_by = "weight"
weight = 20 weight = 50
+++ +++
L'administration système est un concept aux contours flous. L'administration système est un concept aux contours flous.

View file

@ -74,6 +74,10 @@
width: auto; width: auto;
} }
.content img[alt$="#"] {
margin: .5rem;
}
.content img[alt$=">"] { .content img[alt$=">"] {
float: right; float: right;
margin-left: 1rem; margin-left: 1rem;

View file

@ -1,14 +1,16 @@
.heading-text { .heading-text {
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 32px; font-size: 2em;
font-weight: 600; font-weight: 600;
line-height: 1.2em;
padding: 10px 0 25px 0; padding: 10px 0 25px 0;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
h1, .title-text { h1, .title-text {
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 25px; font-size: 1.8em;
line-height: 1.2em;
font-weight: 500; font-weight: 500;
color: var(--secondary-text-color); color: var(--secondary-text-color);
border-left: var(--primary-color) 8px solid; border-left: var(--primary-color) 8px solid;
@ -17,7 +19,7 @@ h1, .title-text {
h2, .title-text { h2, .title-text {
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 25px; font-size: 1.5em;
font-weight: 500; font-weight: 500;
color: var(--secondary-text-color); color: var(--secondary-text-color);
border-left: #aaa 8px solid; border-left: #aaa 8px solid;
@ -26,14 +28,14 @@ h2, .title-text {
h3, .subtitle-text { h3, .subtitle-text {
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 20px; font-size: 1.3em;
font-weight: 500; font-weight: 500;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.text { .text {
font-family: "Fira Sans", sans-serif; font-family: "Fira Sans", sans-serif;
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
letter-spacing: 0.2px; letter-spacing: 0.2px;

View file

@ -38,9 +38,20 @@ header {
justify-content: space-between; justify-content: space-between;
} }
header ul {
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
display: inline;
}
.logo { .logo {
font-family: Georgia, DejaVu Serif, Norasi, serif; font-family: Georgia, DejaVu Serif, Norasi, serif;
font-size: 32px; font-size: 28px;
color: var(--primary-text-color); color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
display: flex; display: flex;
@ -56,7 +67,6 @@ header {
.nav-item { .nav-item {
margin: 0 10px; margin: 0 10px;
text-decoration: none; text-decoration: none;
font-size: 18px;
font-weight: bold; font-weight: bold;
color: var(--primary-text-color); color: var(--primary-text-color);
@ -83,11 +93,16 @@ header {
} }
} }
main { main {
display: flex; display: flex;
padding: 50px 100px; padding: 50px 50px;
flex-grow: 1; flex-grow: 1;
.toc-homepage .toc-sticky {
display: none;
}
.toc { .toc {
max-width: 260px; max-width: 260px;
min-width: 240px; min-width: 240px;
@ -123,7 +138,6 @@ main {
padding: 0 30px 5px; padding: 0 30px 5px;
color: #424242; color: #424242;
} }
} }
.toc-sticky { .toc-sticky {
@ -157,11 +171,20 @@ footer {
} }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
main {
padding: 50px 100px;
}
.logo {
font-size: 32px;
}
.content { .content {
max-width: 60%; max-width: 60%;
min-width: 800px; min-width: 800px;
overflow: hidden; overflow: hidden;
} }
.text {
font-size: 18px;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -172,6 +195,10 @@ footer {
justify-content: center; justify-content: center;
} }
header nav {
display: none;
}
.logo { .logo {
font-size: 28px; font-size: 28px;
margin: 10px; margin: 10px;
@ -184,7 +211,7 @@ footer {
.nav-item { .nav-item {
margin: 0 5px; margin: 0 5px;
font-size: 14px; font-size: 1em;
} }
.hero { .hero {
@ -192,15 +219,108 @@ footer {
} }
main { main {
padding: 30px; display: block;
padding: 0px;
}
main .content {
margin: 15px;
} }
.content { .content {
padding: 0; padding: 0;
display: block;
}
}
/*
Disposition spécifique du menu pour mobile; menu déroulable pour mobile
Code inspiré de: https://alvarotrigo.com/blog/hamburger-menu-css/
*/
#menu-toggle {
display: none;
}
.menu-button-container {
display: none;
}
.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) {
main .toc {
margin: 0px;
width: 100%;
max-width: none;
border: 0px;
} }
.explore-more, .toc { main .toc-sticky {
border: 0px;
padding: 10px 0px;
}
main .toc-homepage .toc-sticky {
display: block;
}
.menu-button-container {
display: block;
}
.toc-menu-title {
font-weight: 600;
margin-left: 64px;
}
.toc-section {
margin-top: 16px;
}
.menu-button {
top: 28px;
left:24px;
}
.menu-button,
.menu-button::before,
.menu-button::after {
display: block;
background-color: #777;
position: absolute;
height: 4px;
width: 30px;
transition: transform 400ms ease;
border-radius: 2px;
}
#menu-toggle ~ .toc-item {
display: none; display: none;
} }
#menu-toggle:checked ~ .toc-item {
display: block;
}
} }

View file

@ -1,5 +1,7 @@
{% macro render_header() %} {% macro render_header() %}
{% set section = get_section(path="_index.md") %} {% set section = get_section(path="_index.md") %}
<a href="{{ section.permalink }}"> <a href="{{ section.permalink }}">
<div class="logo"> <div class="logo">
<img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo"> <img src="{{ get_url(path=config.extra.juice_logo_path) }}" alt="logo">
@ -8,14 +10,16 @@
</a> </a>
<nav> <nav>
{% for subpath in section.subsections %} <ul>
{% set sub = get_section(path=subpath) %} {% for subpath in section.subsections %}
<a class="nav-item subtitle-text" href="{{ sub.permalink }}">{{ sub.title }}</a> {% set sub = get_section(path=subpath) %}
{% endfor %} <li><a class="nav-item text" href="{{ sub.permalink }}">{{ sub.title }}</a></li>
{% 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>
{% endfor %} {% 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> </nav>
{% endmacro render_header %} {% endmacro render_header %}

View file

@ -133,9 +133,15 @@
{% set root_path = hierarchy | nth(n=0) %} {% set root_path = hierarchy | nth(n=0) %}
{% set root = get_section(path=root_path) %} {% set root = get_section(path=root_path) %}
<input id="menu-toggle" type="checkbox" />
<label class='menu-button-container' for="menu-toggle">
<div class="menu-button"></div>
<div class="toc-item toc-menu-title subtext">{{ root.title }}</div>
</label>
<div class="toc-item toc-section"> <div class="toc-item toc-section">
<a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a> <a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
</div> </div>
{{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }} {{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
{% endmacro %} {% endmacro %}

View file

@ -19,23 +19,23 @@
<body> <body>
{% block header %} {% block header %}
<header class="box-shadow"> <header class="box-shadow top-nav">
{{ macros::render_header() }} {{ macros::render_header() }}
</header> </header>
{% endblock header %} {% endblock header %}
<main> <main>
{% block toc %} {% block mainnav %}
<div class="toc"> <div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}">
<div class="toc-sticky"> <div class="toc-sticky">
{% if page %} {% if page %}
{{ nav::navmenu(current=page) }} {{ nav::navmenu(current=page) }}
{% else %} {% else %}
{{ nav::navmenu(current=section) }} {{ nav::navmenu(current=section) }}
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endblock toc %} {% endblock mainnav %}
<div class="content text"> <div class="content text">
{% block content %} {% block content %}