forked from Deuxfleurs/guide.deuxfleurs.fr
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
This commit is contained in:
commit
4831ac2787
11 changed files with 186 additions and 51 deletions
|
|
@ -1,5 +1,5 @@
|
|||
+++
|
||||
title = "Manuels Deuxfleurs"
|
||||
title = "Guide Deuxfleurs"
|
||||
sort_by = "weight"
|
||||
+++
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
+++
|
||||
title = "Conférences"
|
||||
description = "Compte-rendu des conférences auxquelles on a assisté"
|
||||
weight = 50
|
||||
weight = 30
|
||||
sort_by = "weight"
|
||||
+++
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
+++
|
||||
title = "Médiathèque critique"
|
||||
description = "Médiathèque critique"
|
||||
weight = 30
|
||||
weight = 20
|
||||
sort_by = "weight"
|
||||
+++
|
||||
|
||||
# Des livres
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[↣ Consulter la page détaillée sur les livres](./livres/)
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -74,6 +74,10 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.content img[alt$="#"] {
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.content img[alt$=">"] {
|
||||
float: right;
|
||||
margin-left: 1rem;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
136
sass/juice.scss
136
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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
#menu-toggle:checked ~ .toc-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue