diff options
author | Alex <alex@adnab.me> | 2022-12-22 12:45:04 +0000 |
---|---|---|
committer | Alex <alex@adnab.me> | 2022-12-22 12:45:04 +0000 |
commit | 4831ac27871e44064dc55946c5ae10b8cda32b37 (patch) | |
tree | fd886ef1ded44fe457ab12241692d0ac89d52f0e | |
parent | 73d4b846ec6976acd0abf53f28144823183fdfbd (diff) | |
parent | ec051a85db1ac5c3d05dda1954f9786cc67c0d52 (diff) | |
download | guide.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.md | 2 | ||||
-rw-r--r-- | content/formations/conf/_index.md | 2 | ||||
-rw-r--r-- | content/formations/mediatheque/_index.md | 23 | ||||
-rw-r--r-- | content/formations/nix/_index.md | 2 | ||||
-rw-r--r-- | content/formations/sysadmin/_index.md | 2 | ||||
-rw-r--r-- | sass/_markdown.scss | 4 | ||||
-rw-r--r-- | sass/_text.scss | 12 | ||||
-rw-r--r-- | sass/juice.scss | 138 | ||||
-rw-r--r-- | templates/_macros.html | 20 | ||||
-rw-r--r-- | templates/_nav.html | 8 | ||||
-rw-r--r-- | templates/index.html | 24 |
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 %} |