summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Breadcrumb/Breadcrumb.module.scss15
-rw-r--r--src/components/Main/Main.module.scss15
-rw-r--r--src/components/Main/Main.tsx7
-rw-r--r--src/components/PostsList/PostsList.module.scss40
-rw-r--r--src/components/PostsList/PostsList.tsx7
-rw-r--r--src/components/Sharing/Sharing.module.scss14
-rw-r--r--src/components/Sharing/Sharing.tsx5
-rw-r--r--src/components/ToC/ToC.module.scss11
-rw-r--r--src/components/ToC/ToC.tsx7
m---------src/content0
-rw-r--r--src/pages/article/[slug].tsx14
-rw-r--r--src/pages/blog/index.tsx21
-rw-r--r--src/pages/contact.tsx7
-rw-r--r--src/pages/cv.tsx9
-rw-r--r--src/pages/mentions-legales.tsx9
-rw-r--r--src/pages/sujet/[slug].tsx13
-rw-r--r--src/pages/thematique/[slug].tsx13
-rw-r--r--src/styles/pages/Home.module.scss11
-rw-r--r--src/styles/pages/Listing.module.scss25
-rw-r--r--src/styles/pages/Page.module.scss112
-rw-r--r--src/styles/pages/Subject.module.scss26
-rw-r--r--src/styles/pages/Thematic.module.scss11
22 files changed, 275 insertions, 117 deletions
diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
index bfba21f..b469ee0 100644
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -1,13 +1,26 @@
+@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/placeholders";
+.wrapper {
+ display: grid;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+ align-items: center;
+ padding: var(--spacing-md) var(--spacing-md) var(--spacing-md)
+ var(--spacing-lg);
+ border-bottom: fun.convert-px(3) solid var(--color-border-lighter);
+}
+
.list {
@extend %reset-ordered-list;
+ grid-column: 2;
display: flex;
flex-flow: row wrap;
align-items: center;
gap: var(--spacing-2xs);
- margin: 0 0 var(--spacing-md) 0;
+ margin: 0;
font-size: var(--font-size-sm);
}
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
deleted file mode 100644
index a513f73..0000000
--- a/src/components/Main/Main.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.wrapper {
- display: grid;
- grid-template-columns:
- minmax(0, 1fr) min(calc(50vw - var(--spacing-md)), 40ch) min(
- calc(50vw - var(--spacing-md)),
- 40ch
- )
- minmax(0, 1fr);
- align-items: center;
- padding: var(--spacing-md) 0;
-}
-
-.body {
- grid-column: 2 / 4;
-}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 8b2e822..ad270f6 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,12 +1,7 @@
import { FunctionComponent } from 'react';
-import styles from './Main.module.scss';
const Main: FunctionComponent = ({ children }) => {
- return (
- <main id="main" className={styles.wrapper}>
- <div className={styles.body}>{children}</div>
- </main>
- );
+ return <main id="main">{children}</main>;
};
export default Main;
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
index 471b172..8a6c083 100644
--- a/src/components/PostsList/PostsList.module.scss
+++ b/src/components/PostsList/PostsList.module.scss
@@ -1,9 +1,33 @@
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";
+.section {
+ display: grid;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+ align-items: first baseline;
+}
+
+.year {
+ grid-column: 2;
+ margin-bottom: 0;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ grid-column: 1;
+ justify-self: end;
+ position: sticky;
+ top: 0;
+ margin-right: var(--spacing-lg);
+ }
+ }
+}
+
.list {
@extend %reset-ordered-list;
+ grid-column: 2;
margin: 0 auto var(--spacing-md);
}
@@ -14,19 +38,3 @@ li.item {
margin-top: var(--spacing-sm);
}
}
-
-.section {
- @include mix.media("screen") {
- @include mix.dimensions("sm") {
- display: grid;
- grid-template-columns: max-content minmax(0, 1fr);
- align-items: first baseline;
- gap: var(--spacing-md);
- }
- }
-}
-
-.year {
- position: sticky;
- top: 0;
-}
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
index 51698e6..3354dd5 100644
--- a/src/components/PostsList/PostsList.tsx
+++ b/src/components/PostsList/PostsList.tsx
@@ -21,7 +21,12 @@ const PostsList = ({
return years.map((year) => {
return (
<section key={year} className={styles.section}>
- {showYears && <h2 className={styles.year}>{year}</h2>}
+ {showYears && (
+ <h2 className={styles.year}>
+ <span className="screen-reader-text">{t`Published in`} </span>
+ {year}
+ </h2>
+ )}
<ol className={styles.list}>
{posts[year].map((post) => {
return (
diff --git a/src/components/Sharing/Sharing.module.scss b/src/components/Sharing/Sharing.module.scss
index 3186675..fe13125 100644
--- a/src/components/Sharing/Sharing.module.scss
+++ b/src/components/Sharing/Sharing.module.scss
@@ -2,11 +2,18 @@
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";
+.wrapper {
+ max-height: 100vh;
+ padding-bottom: var(--spacing-sm);
+ position: sticky;
+ top: 0;
+ overflow-y: auto;
+}
+
.list {
@extend %flex-list;
gap: var(--spacing-sm);
- margin-bottom: var(--spacing-md);
}
.link {
@@ -55,9 +62,8 @@
filter: drop-shadow(
#{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
);
- width: 2ex;
- height: 2ex;
- margin-right: var(--spacing-2xs);
+ width: fun.convert-px(30);
+ height: fun.convert-px(30);
}
&--diaspora {
diff --git a/src/components/Sharing/Sharing.tsx b/src/components/Sharing/Sharing.tsx
index 4bcad5d..4df8e0d 100644
--- a/src/components/Sharing/Sharing.tsx
+++ b/src/components/Sharing/Sharing.tsx
@@ -90,9 +90,10 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
<li key={id}>
<a
href={sharingUrl}
+ title={name}
className={`${styles.link} ${styles[linkModifier]}`}
>
- {name}
+ <span className="screen-reader-text">{name}</span>
</a>
</li>
);
@@ -100,7 +101,7 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
};
return (
- <div>
+ <div className={styles.wrapper}>
<h2>{t`Share`}</h2>
<ul className={styles.list}>{getItems()}</ul>
</div>
diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss
new file mode 100644
index 0000000..27e79ad
--- /dev/null
+++ b/src/components/ToC/ToC.module.scss
@@ -0,0 +1,11 @@
+.wrapper {
+ max-height: 100vh;
+ padding-bottom: var(--spacing-sm);
+ position: sticky;
+ top: 0;
+ overflow-y: auto;
+}
+
+.list {
+ margin-bottom: 0;
+}
diff --git a/src/components/ToC/ToC.tsx b/src/components/ToC/ToC.tsx
index e7aafa5..3ab482c 100644
--- a/src/components/ToC/ToC.tsx
+++ b/src/components/ToC/ToC.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
import { Heading } from '@ts/types/app';
import { slugify } from '@utils/helpers/slugify';
import useHeadingsTree from '@utils/hooks/useHeadingsTree';
+import styles from './ToC.module.scss';
const ToC = () => {
const headingsTree = useHeadingsTree('article');
@@ -21,10 +22,10 @@ const ToC = () => {
};
return (
- <>
+ <div className={styles.wrapper}>
<h2>{title}</h2>
- <ol>{getItems(headingsTree)}</ol>
- </>
+ <ol className={styles.list}>{getItems(headingsTree)}</ol>
+ </div>
);
};
diff --git a/src/content b/src/content
-Subproject fbb25dbae6ba96dc7b8bf75caff9d331df548d5
+Subproject 0a46ff9e84354f57aef6d919b7fefbfae478f99
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index e8df85e..e906d12 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,6 +18,7 @@ import { useRouter } from 'next/router';
import Prism from 'prismjs';
import { ParsedUrlQuery } from 'querystring';
import { useEffect } from 'react';
+import styles from '@styles/pages/Page.module.scss';
const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
const {
@@ -57,17 +58,20 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
<title>{seo.title}</title>
<meta name="description" content={seo.metaDesc} />
</Head>
- <article>
+ <article className={styles.article}>
<PostHeader intro={intro} meta={meta} title={title} />
- <aside>
+ <aside className={styles.toc}>
<ToC />
</aside>
- <div dangerouslySetInnerHTML={{ __html: content }}></div>
+ <div
+ className={styles.body}
+ dangerouslySetInnerHTML={{ __html: content }}
+ ></div>
<PostFooter subjects={subjects} />
- <aside>
+ <aside className={styles.aside}>
<Sharing title={title} excerpt={intro} />
</aside>
- <section>
+ <section className={styles.comments}>
<h2>{t`Comments`}</h2>
<CommentsList comments={comments} />
<h2>{t`Leave a comment`}</h2>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 2a58571..79b8631 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -12,6 +12,7 @@ import useSWRInfinite from 'swr/infinite';
import { Button } from '@components/Buttons';
import { getPublishedPosts } from '@services/graphql/queries';
import PostHeader from '@components/PostHeader/PostHeader';
+import styles from '@styles/pages/Listing.module.scss';
const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
const getKey = (pageIndex: number, previousData: PostsListData) => {
@@ -47,15 +48,17 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
<title>{seo.blog.title}</title>
<meta name="description" content={seo.blog.description} />
</Head>
- <PostHeader title={t`Blog`} />
- <PostsList data={data} showYears={true} />
- {hasNextPage && (
- <Button
- isDisabled={isLoadingMore}
- clickHandler={() => setSize(size + 1)}
- position="center"
- >{t`Load more?`}</Button>
- )}
+ <div className={styles.wrapper}>
+ <PostHeader title={t`Blog`} />
+ <PostsList data={data} showYears={true} />
+ {hasNextPage && (
+ <Button
+ isDisabled={isLoadingMore}
+ clickHandler={() => setSize(size + 1)}
+ position="center"
+ >{t`Load more?`}</Button>
+ )}
+ </div>
</>
);
};
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index ca82f5b..9eebdb2 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -10,6 +10,7 @@ import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
import { FormEvent, useState } from 'react';
import PostHeader from '@components/PostHeader/PostHeader';
+import styles from '@styles/pages/Page.module.scss';
const ContactPage: NextPageWithLayout = () => {
const [name, setName] = useState('');
@@ -58,9 +59,11 @@ const ContactPage: NextPageWithLayout = () => {
<title>{seo.contact.title}</title>
<meta name="description" content={seo.contact.description} />
</Head>
- <article>
+ <article
+ className={`${styles.article} ${styles['article--no-comments']}`}
+ >
<PostHeader title={title} intro={intro} />
- <div>
+ <div className={styles.body}>
<p>{t`All fields marked with * are required.`}</p>
{status && <p>{status}</p>}
<Form submitHandler={submitHandler}>
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 3faa941..8bd1b0c 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -8,6 +8,7 @@ import Head from 'next/head';
import CVContent, { intro, meta } from '@content/pages/cv.mdx';
import PostHeader from '@components/PostHeader/PostHeader';
import { ArticleMeta } from '@ts/types/articles';
+import styles from '@styles/pages/Page.module.scss';
const CV: NextPageWithLayout = () => {
const dates = {
@@ -25,12 +26,14 @@ const CV: NextPageWithLayout = () => {
<title>{seo.cv.title}</title>
<meta name="description" content={seo.cv.description} />
</Head>
- <article>
+ <article
+ className={`${styles.article} ${styles['article--no-comments']}`}
+ >
<PostHeader intro={intro} meta={pageMeta} title={meta.title} />
- <aside>
+ <aside className={styles.toc}>
<ToC />
</aside>
- <div>
+ <div className={styles.body}>
<CVContent />
</div>
</article>
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index d8dfe49..ea98e20 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -11,6 +11,7 @@ import LegalNoticeContent, {
} from '@content/pages/legal-notice.mdx';
import PostHeader from '@components/PostHeader/PostHeader';
import { ArticleMeta } from '@ts/types/articles';
+import styles from '@styles/pages/Page.module.scss';
const LegalNotice: NextPageWithLayout = () => {
const dates = {
@@ -28,12 +29,14 @@ const LegalNotice: NextPageWithLayout = () => {
<title>{seo.legalNotice.title}</title>
<meta name="description" content={seo.legalNotice.description} />
</Head>
- <article>
+ <article
+ className={`${styles.article} ${styles['article--no-comments']}`}
+ >
<PostHeader intro={intro} meta={pageMeta} title={meta.title} />
- <aside>
+ <aside className={styles.toc}>
<ToC />
</aside>
- <div>
+ <div className={styles.body}>
<LegalNoticeContent />
</div>
</article>
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index bcea544..c3387b4 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -6,7 +6,7 @@ import { SubjectProps } from '@ts/types/taxonomies';
import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Subject.module.scss';
+import styles from '@styles/pages/Listing.module.scss';
import {
getAllSubjectsSlug,
getSubjectBySlug,
@@ -28,19 +28,22 @@ const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
};
return (
- <article>
+ <article className={styles.wrapper}>
<PostHeader
cover={subject.featuredImage}
intro={subject.intro}
meta={meta}
title={subject.title}
/>
- <div dangerouslySetInnerHTML={{ __html: subject.content }}></div>
+ <div
+ className={styles.body}
+ dangerouslySetInnerHTML={{ __html: subject.content }}
+ ></div>
{subject.posts.length > 0 && (
- <div>
+ <section className={styles.section}>
<h2>{t`All posts in ${subject.title}`}</h2>
<ol className={styles.list}>{getPostsList()}</ol>
- </div>
+ </section>
)}
</article>
);
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index dca8f25..fb0eda5 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -6,7 +6,7 @@ import { ThematicProps } from '@ts/types/taxonomies';
import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Thematic.module.scss';
+import styles from '@styles/pages/Listing.module.scss';
import {
getAllThematicsSlug,
getThematicBySlug,
@@ -23,14 +23,17 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
};
return (
- <article>
+ <article className={styles.wrapper}>
<PostHeader intro={thematic.intro} title={thematic.title} />
- <div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
+ <div
+ className={styles.body}
+ dangerouslySetInnerHTML={{ __html: thematic.content }}
+ ></div>
{thematic.posts.length > 0 && (
- <div>
+ <section className={styles.section}>
<h2>{t`All posts in ${thematic.title}`}</h2>
<ol className={styles.list}>{getPostsList()}</ol>
- </div>
+ </section>
)}
</article>
);
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
index 3a8fd0e..49f483c 100644
--- a/src/styles/pages/Home.module.scss
+++ b/src/styles/pages/Home.module.scss
@@ -6,3 +6,14 @@
gap: var(--spacing-md);
margin: var(--spacing-md) 0;
}
+
+.section {
+ display: grid;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+
+ > * {
+ grid-column: 2;
+ }
+}
diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss
new file mode 100644
index 0000000..1915148
--- /dev/null
+++ b/src/styles/pages/Listing.module.scss
@@ -0,0 +1,25 @@
+@use "@styles/abstracts/placeholders";
+
+.wrapper {
+ padding-bottom: var(--spacing-lg);
+}
+
+.list {
+ @extend %reset-ordered-list;
+}
+
+li.item {
+ margin: 0 0 var(--spacing-md) 0;
+}
+
+.body,
+.section {
+ display: grid;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+
+ > * {
+ grid-column: 2;
+ }
+}
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
new file mode 100644
index 0000000..667f913
--- /dev/null
+++ b/src/styles/pages/Page.module.scss
@@ -0,0 +1,112 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.article {
+ display: grid;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+ align-items: center;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ grid-template-columns:
+ minmax(0, var(--spacing-xl)) min(
+ calc(100vw - calc(var(--spacing-md) * 2)),
+ 80ch
+ )
+ minmax(0, 1fr);
+ }
+
+ @include mix.dimensions("lg") {
+ grid-template-columns:
+ minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+ minmax(0, 1fr);
+ column-gap: var(--spacing-2xl);
+ }
+ }
+
+ > header {
+ grid-column: 1 / -1;
+ }
+
+ > footer,
+ .body {
+ grid-column: 2;
+ }
+
+ &--no-comments {
+ margin-bottom: var(--spacing-md);
+ }
+}
+
+.toc {
+ grid-column: 2;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("lg") {
+ grid-column: 1;
+ grid-row: 2 / 4;
+ align-self: stretch;
+ padding: 0 0 0 var(--spacing-lg);
+
+ ol:first-of-type {
+ font-size: var(--font-size-sm);
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+.aside {
+ grid-column: 2;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ grid-column: 3;
+ grid-row: 2 / 5;
+ align-self: stretch;
+ max-width: min-content;
+ margin-left: var(--spacing-2xl);
+ }
+
+ @include mix.dimensions("lg") {
+ grid-row: 2 / 4;
+ margin-left: 0;
+ }
+ }
+}
+
+.comments {
+ grid-column: 1 / -1;
+ display: grid;
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+ align-items: center;
+ margin: var(--spacing-md) 0 0;
+ padding: var(--spacing-md) 0;
+ background: var(--color-bg-secondary);
+ border-top: fun.convert-px(3) solid var(--color-border-lighter);
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ grid-template-columns:
+ minmax(0, var(--spacing-xl)) min(
+ calc(100vw - calc(var(--spacing-md) * 2)),
+ 80ch
+ )
+ minmax(0, 1fr);
+ }
+
+ @include mix.dimensions("lg") {
+ grid-template-columns:
+ minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+ minmax(0, 1fr);
+ }
+ }
+
+ > * {
+ grid-column: 2;
+ }
+}
diff --git a/src/styles/pages/Subject.module.scss b/src/styles/pages/Subject.module.scss
deleted file mode 100644
index 01c3cb8..0000000
--- a/src/styles/pages/Subject.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.title {
- display: flex;
- flex-flow: row wrap;
- align-items: center;
- gap: var(--spacing-sm);
-}
-
-.cover {
- display: block;
- width: fun.convert-px(50);
- height: fun.convert-px(50);
- position: relative;
-}
-
-.list {
- @extend %reset-ordered-list;
-
- margin: var(--spacing-md) auto;
-}
-
-li.item {
- margin: var(--spacing-md) 0;
-}
diff --git a/src/styles/pages/Thematic.module.scss b/src/styles/pages/Thematic.module.scss
deleted file mode 100644
index 0b9aa2d..0000000
--- a/src/styles/pages/Thematic.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "@styles/abstracts/placeholders";
-
-.list {
- @extend %reset-ordered-list;
-
- margin: var(--spacing-md) auto;
-}
-
-li.item {
- margin: var(--spacing-md) 0;
-}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:33:07 +0000