studio-variable/le-courage-du-reel
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add mobile burger menu, SEO meta tags, and various fixes

Browse source 
- Add burger menu with open/close animation and scroll lock
- Add nav-logo element for mobile header
- Hide nav links on mobile, reveal in fullscreen overlay
- Add title, meta description, Open Graph and Twitter Card tags
- Add canonical URL
- Various SCSS adjustments (hero line-height, excerpt font-weight)
- Fix asset paths

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-23 18:19:28 +01:00
parent f62ba6fbd7
commit f7f3d0f0b5
17 changed files with 329 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

5
assets/css/src/_footer.scss
View file

@ -42,9 +42,14 @@ body > footer {
}
.legal {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
text-align: center;
width: 50rem;
margin-top: 5rem;
padding: 2.5rem 0 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 400;
}
}

5
assets/css/src/_generic-classes.scss
View file

@ -40,6 +40,7 @@
text-transform: uppercase;
width: max-content;
padding: 1rem 4rem;
font-weight: 500;
&.outlined {
outline: 1px solid #fff;
@ -59,7 +60,7 @@
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
}
@mixin section-title-centered {
@ -104,7 +105,7 @@
@mixin label-base {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
font-weight: 500;
opacity: 0.8;
}

5
assets/css/src/_header.scss
View file

@ -8,6 +8,11 @@ body {
padding: 1.5rem var(--padding-body);
box-sizing: border-box;
.nav-logo,
.burger {
display: none;
}
ul {
display: flex;
justify-content: space-between;

111
assets/css/src/_mobile.scss
View file

@ -1,24 +1,115 @@
// Body scroll lock when nav is open
body.no-scroll {
overflow: hidden;
}
@media (max-width: 930px) {
// ---- HEADER ----
body > header {
position: fixed;
height: 3.5rem;
overflow: hidden;
transition: height 0.4s ease;
box-sizing: border-box;
padding: 1rem var(--padding-body);
ul {
nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem 0.5rem;
align-items: center;
height: 100%;
li:first-child {
width: 100%;
text-align: center;
font-size: 1.25rem;
margin-bottom: 0.5rem;
.nav-logo {
display: block;
font-size: 1rem;
order: 1;
}
li:not(:first-child) {
font-size: 0.75rem;
.burger {
order: 2;
margin-left: auto;
width: 2rem;
height: 2rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.4rem;
span {
display: block;
width: 100%;
height: 1.5px;
background-color: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
}
ul {
order: 3;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding-top: 3rem;
opacity: 0;
transition: opacity 0.3s ease 0.1s;
li {
width: 100%;
a {
display: block;
padding: 0.5rem 0;
}
}
li:first-child {
width: 100%;
font-size: 2.5rem;
margin-bottom: 1rem;
a {
font-family: var(--font-narrow);
text-transform: uppercase;
font-weight: 700;
}
}
li:not(:first-child) {
font-family: var(--font-narrow);
font-size: 2rem;
text-transform: uppercase;
font-weight: 700;
}
}
}
// ---- OPEN STATE ----
&.nav-open {
height: 100vh;
height: 100dvh;
nav {
.burger span:first-child {
transform: rotate(45deg) translateY(0.2rem);
}
.burger span:last-child {
transform: rotate(-45deg) translateY(-0.2rem);
}
ul {
opacity: 1;
}
}
}
}
// Compensate fixed header
main {
padding-top: 3.5rem;
}
// ---- HERO ----

1
assets/css/src/_section_1-hero.scss
View file

@ -22,6 +22,7 @@ section#hero {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
line-height: 93%;
}
.subtitle {

1
assets/css/src/_section_10-buy.scss
View file

@ -37,6 +37,7 @@ section#buy {
.info {
@include label-base;
letter-spacing: 2.4px;
font-weight: 400;
}
}

5
assets/css/src/_section_2-quote.scss
View file

@ -7,11 +7,14 @@ section#quote {
blockquote {
display: block;
width: min(100%, 40rem);
width: min(100%, 44rem);
text-align: center;
font-size: 2.5rem;
margin-bottom: 1.25rem;
}
cite {
font-weight: 500;
}
}
section#quote {

10
assets/css/src/_section_3-the_book.scss
View file

@ -18,6 +18,7 @@ section#the-book {
.text {
font-weight: normal;
font-size: var(--font-size-m);
font-weight: 500;
@include text-paragraphs-spaced;
}
}
@ -35,6 +36,9 @@ section#the-book {
@include label-base;
margin-bottom: 0.5rem;
}
.value {
font-weight: 500;
}
}
.claim-wrapper {
@ -52,6 +56,12 @@ section#the-book {
.big {
font-size: 2.5rem;
margin-bottom: 1.25rem;
font-weight: 500;
}
.small {
font-weight: 500;
font-size: var(--font-size-m);
}
}
}

3
assets/css/src/_section_4-excerpts.scss
View file

@ -12,7 +12,6 @@ section#excerpts {
margin-bottom: 3rem;
.label {
font-weight: 400;
font-size: var(--font-size-s);
text-transform: uppercase;
}
@ -55,11 +54,13 @@ section#excerpts {
.label {
@include label-spaced;
font-weight: 400;
}
.text {
font-size: var(--font-size-m);
line-height: 140%;
font-weight: 500;
}
}
}

1
assets/css/src/_section_7-system.scss
View file

@ -31,6 +31,7 @@ section#system {
li {
list-style: disc;
list-style-position: inside;
font-weight: 500;
}
}
ul:not(:last-child) {

1
assets/css/src/_section_8-excerpt.scss
View file

@ -18,6 +18,7 @@ section#excerpt {
margin: 3rem 0;
font-size: var(--font-size-m);
@include text-paragraphs-spaced;
font-weight: 500;
p.reference {
font-size: 0.75rem;

146
assets/css/style.css
View file

@ -103,6 +103,7 @@ body {
width: -moz-max-content;
width: max-content;
padding: 1rem 4rem;
font-weight: 500;
}
.blue-button.outlined {
outline: 1px solid #fff;
@ -118,7 +119,7 @@ body {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
}
.section-title.--centered {
width: 100%;
@ -148,7 +149,7 @@ body {
.label {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
font-weight: 500;
opacity: 0.8;
}
.label.--dimmed {
@ -180,6 +181,10 @@ body > header {
padding: 1.5rem var(--padding-body);
box-sizing: border-box;
}
body > header .nav-logo,
body > header .burger {
display: none;
}
body > header ul {
display: flex;
justify-content: space-between;
@ -219,6 +224,7 @@ section#hero .title {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
line-height: 93%;
}
section#hero .subtitle {
font-weight: 400;
@ -238,11 +244,15 @@ section#quote {
section#quote-full blockquote,
section#quote blockquote {
display: block;
width: min(100%, 40rem);
width: min(100%, 44rem);
text-align: center;
font-size: 2.5rem;
margin-bottom: 1.25rem;
}
section#quote-full cite,
section#quote cite {
font-weight: 500;
}
section#quote {
margin: 0 var(--padding-body);
@ -273,6 +283,7 @@ section#the-book .summary-wrapper .title-wrapper .title {
section#the-book .summary-wrapper .text {
font-weight: normal;
font-size: var(--font-size-m);
font-weight: 500;
}
section#the-book .summary-wrapper .text p:not(:last-child) {
margin-bottom: 1.75rem;
@ -289,10 +300,13 @@ section#the-book .data-wrapper {
section#the-book .data-wrapper .label {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
font-weight: 500;
opacity: 0.8;
margin-bottom: 0.5rem;
}
section#the-book .data-wrapper .value {
font-weight: 500;
}
section#the-book .claim-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
@ -309,6 +323,11 @@ section#the-book .claim-wrapper .text {
section#the-book .claim-wrapper .text .big {
font-size: 2.5rem;
margin-bottom: 1.25rem;
font-weight: 500;
}
section#the-book .claim-wrapper .text .small {
font-weight: 500;
font-size: var(--font-size-m);
}
section#excerpts {
@ -325,7 +344,6 @@ section#excerpts header {
margin-bottom: 3rem;
}
section#excerpts header .label {
font-weight: 400;
font-size: var(--font-size-s);
text-transform: uppercase;
}
@ -366,13 +384,15 @@ section#excerpts .swiper-slide .item {
section#excerpts .swiper-slide .item .label {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
font-weight: 500;
opacity: 0.8;
margin-bottom: 0.7rem;
font-weight: 400;
}
section#excerpts .swiper-slide .item .text {
font-size: var(--font-size-m);
line-height: 140%;
font-weight: 500;
}
section#excerpts .swiper-button-prev,
section#excerpts .swiper-button-next {
@ -466,7 +486,7 @@ section#handles header .title-wrapper .index {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
font-weight: 500;
}
section#handles header .title-wrapper .title {
@ -526,7 +546,7 @@ section#system .text .top .section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
}
section#system .text .top .title {
font-family: "owners-xnarrow", sans-serif;
@ -543,6 +563,7 @@ section#system .text .top .info {
section#system .text .bottom ul li {
list-style: disc;
list-style-position: inside;
font-weight: 500;
}
section#system .text .bottom ul:not(:last-child) {
margin-bottom: 3rem;
@ -570,7 +591,7 @@ section#excerpt .wrapper .section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
width: 100%;
text-align: center;
}
@ -589,6 +610,9 @@ section#excerpt .wrapper .content {
section#excerpt .wrapper .content p:not(:last-child) {
margin-bottom: 1.75rem;
}
section#excerpt .wrapper .content {
font-weight: 500;
}
section#excerpt .wrapper .content p.reference {
font-size: 0.75rem;
}
@ -621,7 +645,7 @@ section#author .text .section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
}
section#author .text .author-name {
font-family: "owners-xnarrow", sans-serif;
@ -654,7 +678,7 @@ section#buy .text .section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
}
section#buy .text .title {
font-family: "owners-xnarrow", sans-serif;
@ -683,9 +707,10 @@ section#buy .text .buy-links li a {
section#buy .text .info {
font-size: 0.625rem;
text-transform: uppercase;
font-weight: 400;
font-weight: 500;
opacity: 0.8;
letter-spacing: 2.4px;
font-weight: 400;
}
section#buy img {
width: 45%;
@ -712,7 +737,7 @@ body > footer header .section-title {
font-size: var(--font-size-s);
text-transform: uppercase;
margin-bottom: 0.75rem;
font-weight: 400;
font-weight: 500;
width: 100%;
text-align: center;
}
@ -741,29 +766,108 @@ body > footer .contact .item:not(:last-child) {
margin-bottom: 2.5rem;
}
body > footer .legal {
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
text-align: center;
width: 50rem;
margin-top: 5rem;
padding: 2.5rem 0 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 400;
}
body.no-scroll {
overflow: hidden;
}
@media (max-width: 930px) {
body > header {
position: fixed;
height: 3.5rem;
overflow: hidden;
transition: height 0.4s ease;
box-sizing: border-box;
padding: 1rem var(--padding-body);
}
body > header ul {
body > header nav {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 100%;
}
body > header nav .nav-logo {
display: block;
font-size: 1rem;
order: 1;
}
body > header nav .burger {
order: 2;
margin-left: auto;
width: 2rem;
height: 2rem;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.25rem 0.5rem;
align-items: center;
gap: 0.4rem;
}
body > header ul li:first-child {
body > header nav .burger span {
display: block;
width: 100%;
text-align: center;
font-size: 1.25rem;
margin-bottom: 0.5rem;
height: 1.5px;
background-color: #fff;
transition: transform 0.3s ease, opacity 0.3s ease;
}
body > header ul li:not(:first-child) {
font-size: 0.75rem;
body > header nav ul {
order: 3;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding-top: 3rem;
opacity: 0;
transition: opacity 0.3s ease 0.1s;
}
body > header nav ul li {
width: 100%;
}
body > header nav ul li a {
display: block;
padding: 0.5rem 0;
}
body > header nav ul li:first-child {
width: 100%;
font-size: 2.5rem;
margin-bottom: 1rem;
}
body > header nav ul li:first-child a {
font-family: var(--font-narrow);
text-transform: uppercase;
font-weight: 700;
}
body > header nav ul li:not(:first-child) {
font-family: var(--font-narrow);
font-size: 2rem;
text-transform: uppercase;
font-weight: 700;
}
body > header.nav-open {
height: 100vh;
height: 100dvh;
}
body > header.nav-open nav .burger span:first-child {
transform: rotate(45deg) translateY(0.2rem);
}
body > header.nav-open nav .burger span:last-child {
transform: rotate(-45deg) translateY(-0.2rem);
}
body > header.nav-open nav ul {
opacity: 1;
}
main {
padding-top: 3.5rem;
}
section#hero {
height: auto;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

BIN
assets/images/frederic-denjoy.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 162 KiB

BIN
assets/images/frederic-denjoy.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 11 KiB

21
assets/js/script.js
View file

@ -1,4 +1,23 @@
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
// ---- MOBILE NAV ----
const header = document.querySelector('body > header');
const burger = header.querySelector('.burger');
const navLinks = header.querySelectorAll('nav ul a');
burger.addEventListener('click', function () {
header.classList.toggle('nav-open');
document.body.classList.toggle('no-scroll');
});
navLinks.forEach(function (link) {
link.addEventListener('click', function () {
if (!header.classList.contains('nav-open')) return;
header.classList.remove('nav-open');
document.body.classList.remove('no-scroll');
});
});
const excerptSwiper = new Swiper('.excerpts-swiper', {
// Slides visibles et groupement
slidesPerView: 3,

53
index.html
View file

@ -3,13 +3,58 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- SEO -->
<title>Le Courage du Réel — Frédéric Denjoy</title>
<meta
name="description"
content="Le Courage du Réel propose une ontologie du passage. Le réel n'est pas ce qui est, mais ce qui se traverse. Un livre de Frédéric Denjoy, aux Éditions Reconnaissance."
/>
<meta name="author" content="Frédéric Denjoy" />
<link rel="canonical" href="https://lecouragedureel.com/" />
<!-- Open Graph -->
<meta property="og:type" content="book" />
<meta property="og:title" content="Le Courage du Réel — Frédéric Denjoy" />
<meta
property="og:description"
content="Le réel n'est pas ce qui est, mais ce qui se traverse. Une ontologie du passage. Ni développement personnel, ni traité académique."
/>
<meta property="og:url" content="https://lecouragedureel.com/" />
<meta
property="og:image"
content="https://lecouragedureel.com/assets/images/le-courage-du-reel-cover.jpg"
/>
<meta property="og:locale" content="fr_FR" />
<meta property="og:site_name" content="Le Courage du Réel" />
<meta property="book:author" content="Frédéric Denjoy" />
<meta property="book:isbn" content="978-2-487595-32-3" />
<meta property="book:release_date" content="2026" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Le Courage du Réel — Frédéric Denjoy" />
<meta
name="twitter:description"
content="Le réel n'est pas ce qui est, mais ce qui se traverse. Une ontologie du passage."
/>
<meta
name="twitter:image"
content="https://lecouragedureel.com/assets/images/le-courage-du-reel-cover.jpg"
/>
<!-- Styles -->
<link rel="stylesheet" href="/assets/css/style.css" />
<link rel="stylesheet" href="https://use.typekit.net/tnd1ymt.css" />
</head>
<body>
<header class="blue-container">
<nav>
<span class="nav-logo">Le courage du Réel</span>
<button class="burger" aria-label="Menu">
<span></span>
<span></span>
</button>
<ul>
<li>
<a href="#hero">Le Courage du Réel</a>
@ -88,7 +133,7 @@
<p>
Le mal n'est pas moral : il est structurel. La vérité, l'amour,
l'intelligence, le pouvoir ne sont pas ce que tu crois — et toi
non plus. De Platon à Lacan, ce livre met à nu ce qui ne
non plus. De Platon à Derrida, ce livre met à nu ce qui ne
fonctionne plus. Voici venu le temps de construire.
</p>
</div>
@ -409,7 +454,7 @@
href="https://www.amazon.fr/COURAGE-DU-R%C3%89EL-Denjoy-Frederic/dp/B0GGYQN2FR"
target="_blank"
class="blue-button"
>Acheter - FNAC</a
>Acheter - Amazon</a
>
</li>
<li>
@ -417,7 +462,7 @@
href="https://editions-reconnaissance.fr/livre/le-courage-du-reel/"
target="_blank"
class="blue-button"
>Acheter - FNAC</a
>Précommander le livre</a
>
</li>
</ul>