aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlex <alex@adnab.me>2022-12-22 12:45:04 +0000
committerAlex <alex@adnab.me>2022-12-22 12:45:04 +0000
commit4831ac27871e44064dc55946c5ae10b8cda32b37 (patch)
treefd886ef1ded44fe457ab12241692d0ac89d52f0e
parent73d4b846ec6976acd0abf53f28144823183fdfbd (diff)
parentec051a85db1ac5c3d05dda1954f9786cc67c0d52 (diff)
downloadguide.deuxfleurs.fr-4831ac27871e44064dc55946c5ae10b8cda32b37.tar.gz
guide.deuxfleurs.fr-4831ac27871e44064dc55946c5ae10b8cda32b37.zip
Merge pull request 'Améliorations du CSS responsive et navigation sur mobile' (#17) from navigation-mobile into main
Reviewed-on: https://git.deuxfleurs.fr/Deuxfleurs/guide.deuxfleurs.fr/pulls/17
-rw-r--r--content/_index.md2
-rw-r--r--content/formations/conf/_index.md2
-rw-r--r--content/formations/mediatheque/_index.md23
-rw-r--r--content/formations/nix/_index.md2
-rw-r--r--content/formations/sysadmin/_index.md2
-rw-r--r--sass/_markdown.scss4
-rw-r--r--sass/_text.scss12
-rw-r--r--sass/juice.scss138
-rw-r--r--templates/_macros.html20
-rw-r--r--templates/_nav.html8
-rw-r--r--templates/index.html24
11 files changed, 186 insertions, 51 deletions
diff --git a/content/_index.md b/content/_index.md
index 142d528..a28e9cb 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,5 +1,5 @@
+++
-title = "Manuels Deuxfleurs"
+title = "Guide Deuxfleurs"
sort_by = "weight"
+++
diff --git a/content/formations/conf/_index.md b/content/formations/conf/_index.md
index fddfcb3..7a2cf60 100644
--- a/content/formations/conf/_index.md
+++ b/content/formations/conf/_index.md
@@ -1,7 +1,7 @@
+++
title = "Conférences"
description = "Compte-rendu des conférences auxquelles on a assisté"
-weight = 50
+weight = 30
sort_by = "weight"
+++
diff --git a/content/formations/mediatheque/_index.md b/content/formations/mediatheque/_index.md
index dee163c..205dfec 100644
--- a/content/formations/mediatheque/_index.md
+++ b/content/formations/mediatheque/_index.md
@@ -1,23 +1,22 @@
+++
title = "Médiathèque critique"
description = "Médiathèque critique"
-weight = 30
+weight = 20
sort_by = "weight"
+++
# Des livres
-![Couverture de la Convivialité d'Illich <](/img/cover/convivialite.jpg)
-![Couverture du Macroscope <](/img/cover/macroscope.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 Cyberstructure <](/img/cover/cyberstructure.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 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 Surveiller et punir de Michel Foucault <](/img/cover/surveiller-et-punir.jpg)
+![Couverture de la Convivialité d'Illich #](/img/cover/convivialite.jpg)
+![Couverture du Macroscope #](/img/cover/macroscope.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 Cyberstructure #](/img/cover/cyberstructure.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 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 Surveiller et punir de Michel Foucault #](/img/cover/surveiller-et-punir.jpg)
[↣ Consulter la page détaillée sur les livres](./livres/)
diff --git a/content/formations/nix/_index.md b/content/formations/nix/_index.md
index 2f1f4e9..7134d61 100644
--- a/content/formations/nix/_index.md
+++ b/content/formations/nix/_index.md
@@ -2,7 +2,7 @@
title = "Écosystème Nix"
description = "L'écosysème Nix : nixlang, nixpkgs, nixos, flakes, etc."
sort_by = "weight"
-weight = 30
+weight = 60
+++
# Apprendre
diff --git a/content/formations/sysadmin/_index.md b/content/formations/sysadmin/_index.md
index cd79887..2a397c1 100644
--- a/content/formations/sysadmin/_index.md
+++ b/content/formations/sysadmin/_index.md
@@ -2,7 +2,7 @@
title = "Administration Système"
description = "Administration Système"
sort_by = "weight"
-weight = 20
+weight = 50
+++
L'administration système est un concept aux contours flous.
diff --git a/sass/_markdown.scss b/sass/_markdown.scss
index 73caeb5..5cc6e69 100644
--- a/sass/_markdown.scss
+++ b/sass/_markdown.scss
@@ -74,6 +74,10 @@
width: auto;
}
+.content img[alt$="#"] {
+ margin: .5rem;
+}
+
.content img[alt$=">"] {
float: right;
margin-left: 1rem;
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..7866bb4 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,11 +93,16 @@ header {
}
}
+
main {
display: flex;
- padding: 50px 100px;
+ padding: 50px 50px;
flex-grow: 1;
+ .toc-homepage .toc-sticky {
+ display: none;
+ }
+
.toc {
max-width: 260px;
min-width: 240px;
@@ -123,7 +138,6 @@ main {
padding: 0 30px 5px;
color: #424242;
}
-
}
.toc-sticky {
@@ -157,11 +171,20 @@ footer {
}
@media screen and (min-width: 1280px) {
+ main {
+ padding: 50px 100px;
+ }
+ .logo {
+ font-size: 32px;
+ }
.content {
max-width: 60%;
min-width: 800px;
overflow: hidden;
}
+ .text {
+ font-size: 18px;
+ }
}
@media screen and (max-width: 768px) {
@@ -172,6 +195,10 @@ footer {
justify-content: center;
}
+ header nav {
+ display: none;
+ }
+
.logo {
font-size: 28px;
margin: 10px;
@@ -184,7 +211,7 @@ footer {
.nav-item {
margin: 0 5px;
- font-size: 14px;
+ font-size: 1em;
}
.hero {
@@ -192,15 +219,108 @@ footer {
}
main {
- padding: 30px;
+ display: block;
+ padding: 0px;
+ }
+
+ main .content {
+ margin: 15px;
}
.content {
padding: 0;
+ display: block;
}
+}
- .explore-more, .toc {
- display: none;
- }
+/*
+ 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;
+ }
+
+ 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;
+ }
+ #menu-toggle:checked ~ .toc-item {
+ 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/_nav.html b/templates/_nav.html
index 3bfda07..b05e472 100644
--- a/templates/_nav.html
+++ b/templates/_nav.html
@@ -133,9 +133,15 @@
{% set root_path = hierarchy | nth(n=0) %}
{% 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">
<a class="subtext" href="{{root.permalink | safe}}">{{ root.title }}</a>
</div>
-
{{ nav::navsection(hierarchy=hierarchy,level=0,current=current) }}
{% endmacro %}
diff --git a/templates/index.html b/templates/index.html
index 004a4fa..fd4e9bf 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -19,23 +19,23 @@
<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) }}
- {% endif %}
- </div>
- </div>
- {% endblock toc %}
+ {% block mainnav %}
+ <div class="toc {% if page.ancestors or section.ancestors %}{% else %}toc-homepage{% endif %}">
+ <div class="toc-sticky">
+ {% if page %}
+ {{ nav::navmenu(current=page) }}
+ {% else %}
+ {{ nav::navmenu(current=section) }}
+ {% endif %}
+ </div>
+ </div>
+ {% endblock mainnav %}
<div class="content text">
{% block content %}