feat: add mobile burger menu, SEO meta tags, and various fixes
- 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:
parent
f62ba6fbd7
commit
f7f3d0f0b5
17 changed files with 329 additions and 41 deletions
|
|
@ -42,9 +42,14 @@ body > footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.legal {
|
.legal {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15rem;
|
||||||
|
text-align: center;
|
||||||
width: 50rem;
|
width: 50rem;
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
padding: 2.5rem 0 0 0;
|
padding: 2.5rem 0 0 0;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,7 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
padding: 1rem 4rem;
|
padding: 1rem 4rem;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
&.outlined {
|
&.outlined {
|
||||||
outline: 1px solid #fff;
|
outline: 1px solid #fff;
|
||||||
|
|
@ -59,7 +60,7 @@
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin section-title-centered {
|
@mixin section-title-centered {
|
||||||
|
|
@ -104,7 +105,7 @@
|
||||||
@mixin label-base {
|
@mixin label-base {
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,11 @@ body {
|
||||||
padding: 1.5rem var(--padding-body);
|
padding: 1.5rem var(--padding-body);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.nav-logo,
|
||||||
|
.burger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,115 @@
|
||||||
|
// Body scroll lock when nav is open
|
||||||
|
body.no-scroll {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 930px) {
|
@media (max-width: 930px) {
|
||||||
// ---- HEADER ----
|
// ---- HEADER ----
|
||||||
body > header {
|
body > header {
|
||||||
|
position: fixed;
|
||||||
|
height: 3.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.4s ease;
|
||||||
|
box-sizing: border-box;
|
||||||
padding: 1rem var(--padding-body);
|
padding: 1rem var(--padding-body);
|
||||||
|
|
||||||
ul {
|
nav {
|
||||||
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
gap: 0.25rem 0.5rem;
|
height: 100%;
|
||||||
|
|
||||||
li:first-child {
|
.nav-logo {
|
||||||
width: 100%;
|
display: block;
|
||||||
text-align: center;
|
font-size: 1rem;
|
||||||
font-size: 1.25rem;
|
order: 1;
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li:not(:first-child) {
|
.burger {
|
||||||
font-size: 0.75rem;
|
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 ----
|
// ---- HERO ----
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ section#hero {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
line-height: 93%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ section#buy {
|
||||||
.info {
|
.info {
|
||||||
@include label-base;
|
@include label-base;
|
||||||
letter-spacing: 2.4px;
|
letter-spacing: 2.4px;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,14 @@ section#quote {
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
width: min(100%, 40rem);
|
width: min(100%, 44rem);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
cite {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
section#quote {
|
section#quote {
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ section#the-book {
|
||||||
.text {
|
.text {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: var(--font-size-m);
|
font-size: var(--font-size-m);
|
||||||
|
font-weight: 500;
|
||||||
@include text-paragraphs-spaced;
|
@include text-paragraphs-spaced;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -35,6 +36,9 @@ section#the-book {
|
||||||
@include label-base;
|
@include label-base;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
.value {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-wrapper {
|
.claim-wrapper {
|
||||||
|
|
@ -52,6 +56,12 @@ section#the-book {
|
||||||
.big {
|
.big {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: var(--font-size-m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ section#excerpts {
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-weight: 400;
|
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
@ -55,11 +54,13 @@ section#excerpts {
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
@include label-spaced;
|
@include label-spaced;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: var(--font-size-m);
|
font-size: var(--font-size-m);
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ section#system {
|
||||||
li {
|
li {
|
||||||
list-style: disc;
|
list-style: disc;
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul:not(:last-child) {
|
ul:not(:last-child) {
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ section#excerpt {
|
||||||
margin: 3rem 0;
|
margin: 3rem 0;
|
||||||
font-size: var(--font-size-m);
|
font-size: var(--font-size-m);
|
||||||
@include text-paragraphs-spaced;
|
@include text-paragraphs-spaced;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
p.reference {
|
p.reference {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
|
|
|
||||||
|
|
@ -103,6 +103,7 @@ body {
|
||||||
width: -moz-max-content;
|
width: -moz-max-content;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
padding: 1rem 4rem;
|
padding: 1rem 4rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.blue-button.outlined {
|
.blue-button.outlined {
|
||||||
outline: 1px solid #fff;
|
outline: 1px solid #fff;
|
||||||
|
|
@ -118,7 +119,7 @@ body {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.section-title.--centered {
|
.section-title.--centered {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -148,7 +149,7 @@ body {
|
||||||
.label {
|
.label {
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
.label.--dimmed {
|
.label.--dimmed {
|
||||||
|
|
@ -180,6 +181,10 @@ body > header {
|
||||||
padding: 1.5rem var(--padding-body);
|
padding: 1.5rem var(--padding-body);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
body > header .nav-logo,
|
||||||
|
body > header .burger {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
body > header ul {
|
body > header ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -219,6 +224,7 @@ section#hero .title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
|
line-height: 93%;
|
||||||
}
|
}
|
||||||
section#hero .subtitle {
|
section#hero .subtitle {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
@ -238,11 +244,15 @@ section#quote {
|
||||||
section#quote-full blockquote,
|
section#quote-full blockquote,
|
||||||
section#quote blockquote {
|
section#quote blockquote {
|
||||||
display: block;
|
display: block;
|
||||||
width: min(100%, 40rem);
|
width: min(100%, 44rem);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
section#quote-full cite,
|
||||||
|
section#quote cite {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
section#quote {
|
section#quote {
|
||||||
margin: 0 var(--padding-body);
|
margin: 0 var(--padding-body);
|
||||||
|
|
@ -273,6 +283,7 @@ section#the-book .summary-wrapper .title-wrapper .title {
|
||||||
section#the-book .summary-wrapper .text {
|
section#the-book .summary-wrapper .text {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: var(--font-size-m);
|
font-size: var(--font-size-m);
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#the-book .summary-wrapper .text p:not(:last-child) {
|
section#the-book .summary-wrapper .text p:not(:last-child) {
|
||||||
margin-bottom: 1.75rem;
|
margin-bottom: 1.75rem;
|
||||||
|
|
@ -289,10 +300,13 @@ section#the-book .data-wrapper {
|
||||||
section#the-book .data-wrapper .label {
|
section#the-book .data-wrapper .label {
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
section#the-book .data-wrapper .value {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
section#the-book .claim-wrapper {
|
section#the-book .claim-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
|
@ -309,6 +323,11 @@ section#the-book .claim-wrapper .text {
|
||||||
section#the-book .claim-wrapper .text .big {
|
section#the-book .claim-wrapper .text .big {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
margin-bottom: 1.25rem;
|
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 {
|
section#excerpts {
|
||||||
|
|
@ -325,7 +344,6 @@ section#excerpts header {
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
section#excerpts header .label {
|
section#excerpts header .label {
|
||||||
font-weight: 400;
|
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
@ -366,13 +384,15 @@ section#excerpts .swiper-slide .item {
|
||||||
section#excerpts .swiper-slide .item .label {
|
section#excerpts .swiper-slide .item .label {
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
margin-bottom: 0.7rem;
|
margin-bottom: 0.7rem;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
section#excerpts .swiper-slide .item .text {
|
section#excerpts .swiper-slide .item .text {
|
||||||
font-size: var(--font-size-m);
|
font-size: var(--font-size-m);
|
||||||
line-height: 140%;
|
line-height: 140%;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#excerpts .swiper-button-prev,
|
section#excerpts .swiper-button-prev,
|
||||||
section#excerpts .swiper-button-next {
|
section#excerpts .swiper-button-next {
|
||||||
|
|
@ -466,7 +486,7 @@ section#handles header .title-wrapper .index {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#handles header .title-wrapper .title {
|
section#handles header .title-wrapper .title {
|
||||||
|
|
@ -526,7 +546,7 @@ section#system .text .top .section-title {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#system .text .top .title {
|
section#system .text .top .title {
|
||||||
font-family: "owners-xnarrow", sans-serif;
|
font-family: "owners-xnarrow", sans-serif;
|
||||||
|
|
@ -543,6 +563,7 @@ section#system .text .top .info {
|
||||||
section#system .text .bottom ul li {
|
section#system .text .bottom ul li {
|
||||||
list-style: disc;
|
list-style: disc;
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#system .text .bottom ul:not(:last-child) {
|
section#system .text .bottom ul:not(:last-child) {
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
|
|
@ -570,7 +591,7 @@ section#excerpt .wrapper .section-title {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -589,6 +610,9 @@ section#excerpt .wrapper .content {
|
||||||
section#excerpt .wrapper .content p:not(:last-child) {
|
section#excerpt .wrapper .content p:not(:last-child) {
|
||||||
margin-bottom: 1.75rem;
|
margin-bottom: 1.75rem;
|
||||||
}
|
}
|
||||||
|
section#excerpt .wrapper .content {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
section#excerpt .wrapper .content p.reference {
|
section#excerpt .wrapper .content p.reference {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
@ -621,7 +645,7 @@ section#author .text .section-title {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#author .text .author-name {
|
section#author .text .author-name {
|
||||||
font-family: "owners-xnarrow", sans-serif;
|
font-family: "owners-xnarrow", sans-serif;
|
||||||
|
|
@ -654,7 +678,7 @@ section#buy .text .section-title {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
section#buy .text .title {
|
section#buy .text .title {
|
||||||
font-family: "owners-xnarrow", sans-serif;
|
font-family: "owners-xnarrow", sans-serif;
|
||||||
|
|
@ -683,9 +707,10 @@ section#buy .text .buy-links li a {
|
||||||
section#buy .text .info {
|
section#buy .text .info {
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
letter-spacing: 2.4px;
|
letter-spacing: 2.4px;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
section#buy img {
|
section#buy img {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
|
|
@ -712,7 +737,7 @@ body > footer header .section-title {
|
||||||
font-size: var(--font-size-s);
|
font-size: var(--font-size-s);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -741,29 +766,108 @@ body > footer .contact .item:not(:last-child) {
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
}
|
}
|
||||||
body > footer .legal {
|
body > footer .legal {
|
||||||
|
font-size: 0.625rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15rem;
|
||||||
|
text-align: center;
|
||||||
width: 50rem;
|
width: 50rem;
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
padding: 2.5rem 0 0 0;
|
padding: 2.5rem 0 0 0;
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.no-scroll {
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 930px) {
|
@media (max-width: 930px) {
|
||||||
body > header {
|
body > header {
|
||||||
|
position: fixed;
|
||||||
|
height: 3.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.4s ease;
|
||||||
|
box-sizing: border-box;
|
||||||
padding: 1rem var(--padding-body);
|
padding: 1rem var(--padding-body);
|
||||||
}
|
}
|
||||||
body > header ul {
|
body > header nav {
|
||||||
|
display: flex;
|
||||||
flex-wrap: wrap;
|
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;
|
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%;
|
width: 100%;
|
||||||
text-align: center;
|
height: 1.5px;
|
||||||
font-size: 1.25rem;
|
background-color: #fff;
|
||||||
margin-bottom: 0.5rem;
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
body > header ul li:not(:first-child) {
|
body > header nav ul {
|
||||||
font-size: 0.75rem;
|
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 {
|
section#hero {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
BIN
assets/images/frederic-denjoy.jpeg
Normal file
BIN
assets/images/frederic-denjoy.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -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', {
|
const excerptSwiper = new Swiper('.excerpts-swiper', {
|
||||||
// Slides visibles et groupement
|
// Slides visibles et groupement
|
||||||
slidesPerView: 3,
|
slidesPerView: 3,
|
||||||
|
|
|
||||||
53
index.html
53
index.html
|
|
@ -3,13 +3,58 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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="/assets/css/style.css" />
|
||||||
<link rel="stylesheet" href="https://use.typekit.net/tnd1ymt.css" />
|
<link rel="stylesheet" href="https://use.typekit.net/tnd1ymt.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="blue-container">
|
<header class="blue-container">
|
||||||
<nav>
|
<nav>
|
||||||
|
<span class="nav-logo">Le courage du Réel</span>
|
||||||
|
<button class="burger" aria-label="Menu">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="#hero">Le Courage du Réel</a>
|
<a href="#hero">Le Courage du Réel</a>
|
||||||
|
|
@ -88,7 +133,7 @@
|
||||||
<p>
|
<p>
|
||||||
Le mal n'est pas moral : il est structurel. La vérité, l'amour,
|
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
|
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.
|
fonctionne plus. Voici venu le temps de construire.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -409,7 +454,7 @@
|
||||||
href="https://www.amazon.fr/COURAGE-DU-R%C3%89EL-Denjoy-Frederic/dp/B0GGYQN2FR"
|
href="https://www.amazon.fr/COURAGE-DU-R%C3%89EL-Denjoy-Frederic/dp/B0GGYQN2FR"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="blue-button"
|
class="blue-button"
|
||||||
>Acheter - FNAC</a
|
>Acheter - Amazon</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -417,7 +462,7 @@
|
||||||
href="https://editions-reconnaissance.fr/livre/le-courage-du-reel/"
|
href="https://editions-reconnaissance.fr/livre/le-courage-du-reel/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="blue-button"
|
class="blue-button"
|
||||||
>Acheter - FNAC</a
|
>Précommander le livre</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue