Merge pull request 'Améliorations du CSS responsive et navigation sur mobile' (#17) from navigation-mobile into main

Reviewed-on: Deuxfleurs/guide.deuxfleurs.fr#17

content/_index.md

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

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"
 +++
 

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 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/)
 

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

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.

sass/_markdown.scss

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

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;

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 {
+/*
+  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;
+  }
 }

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>
+    <ul>
         {% for subpath in section.subsections %}
             {% set sub = get_section(path=subpath) %}
-    <a class="nav-item subtitle-text" href="{{ sub.permalink }}">{{ sub.title }}</a>
+            <li><a class="nav-item text" href="{{ sub.permalink }}">{{ sub.title }}</a></li>
         {% 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>
+            <li><a class="nav-item text" href="{{ menu.link }}">{{ menu.title }}</a></li>
             {% endfor %}
         {% endif %}
+    </ul>
 </nav>
 {% endmacro render_header %}

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

templates/index.html

@@ -19,14 +19,14 @@
 
 <body>
     {% block header %}
-    <header class="box-shadow">
+    <header class="box-shadow top-nav">
       {{ macros::render_header() }}
     </header>
     {% endblock header %}
 
     <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">
                     {% if page %}
                     {{ nav::navmenu(current=page) }}
@@ -35,7 +35,7 @@
                     {% endif %}
                 </div>
             </div>
-      {% endblock toc %}
+        {% endblock mainnav %}
 
         <div class="content text">
             {% block content %}