diff --git a/src/components/Blog/BlogListPage/BlogListPage.tsx b/src/components/Blog/BlogListPage/BlogListPage.tsx index ebd9147a..c56b43a9 100644 --- a/src/components/Blog/BlogListPage/BlogListPage.tsx +++ b/src/components/Blog/BlogListPage/BlogListPage.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { PageMetadata, @@ -72,6 +73,12 @@ function BlogListPageContent(props: Props): JSX.Element {
+
+ Archive + Atom feed + RSS feed +
); diff --git a/src/components/Blog/BlogListPage/blog-list-page.module.css b/src/components/Blog/BlogListPage/blog-list-page.module.css index 09366ba2..5e23d007 100644 --- a/src/components/Blog/BlogListPage/blog-list-page.module.css +++ b/src/components/Blog/BlogListPage/blog-list-page.module.css @@ -2,6 +2,15 @@ margin-bottom: calc(2 * var(--ifm-spacing-vertical)); } +.linksContainer { + composes: container from global; + composes: text--center from global; + font-size: 0.8rem; + display: flex; + justify-content: center; + gap: var(--ifm-spacing-horizontal); +} + .projectsContainer { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; diff --git a/src/pages/community/support/support.module.css b/src/pages/community/support/support.module.css index dadda4c9..45bfe44b 100644 --- a/src/pages/community/support/support.module.css +++ b/src/pages/community/support/support.module.css @@ -2,11 +2,16 @@ margin-bottom: calc(2 * var(--ifm-spacing-vertical)); } -.textContainer { +/* + * The .textContainer class duplication is a subtle trick to increase the specificity of + * this selector, as it would clash with an Infima styling otherwise. CSS injection + * order is affecting this. But it doesn't seem like an easy task to solve. + * More info: + * + * https://github.com/facebook/docusaurus/issues/3678 + */ +.textContainer.textContainer { max-width: 480px; - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* composes: container from global; - composes: text--center from global; */ } .navigationContainer { diff --git a/src/pages/index.module.css b/src/pages/index.module.css index cc775dd2..655a00c5 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -2,18 +2,21 @@ margin-bottom: calc(2 * var(--ifm-spacing-vertical)); } -.textContainer { +/* + * The .textContainer class duplication is a subtle trick to increase the specificity of + * this selector, as it would clash with an Infima styling otherwise. CSS injection + * order is affecting this. But it doesn't seem like an easy task to solve. + * More info: + * + * https://github.com/facebook/docusaurus/issues/3678 + */ +.textContainer.textContainer { max-width: 480px; - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* composes: container from global; - composes: text--center from global; */ } .featuresContainer, .quotesContainer { - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* https://github.com/css-modules/css-modules#composing-from-other-files */ - /* composes: container from global; */ + composes: container from global; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 634eeeb8..35d92e6b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -33,7 +33,7 @@ export default function Home(): JSX.Element {

+ className={`${styles.featuresContainer} ${styles.verticalRhythm}`}> {data.features.map((feature: LinkCardProps) => ( ))} @@ -46,7 +46,7 @@ export default function Home(): JSX.Element {

+ className={`${styles.quotesContainer} ${styles.verticalRhythm}`}> {data.quotes?.map((quote: QuoteCardProps) => ( ))} diff --git a/src/pages/libraries/libraries.module.css b/src/pages/libraries/libraries.module.css index a6a977e7..fcff5840 100644 --- a/src/pages/libraries/libraries.module.css +++ b/src/pages/libraries/libraries.module.css @@ -2,18 +2,21 @@ margin-bottom: calc(2 * var(--ifm-spacing-vertical)); } -.textContainer { +/* + * The .textContainer class duplication is a subtle trick to increase the specificity of + * this selector, as it would clash with an Infima styling otherwise. CSS injection + * order is affecting this. But it doesn't seem like an easy task to solve. + * More info: + * + * https://github.com/facebook/docusaurus/issues/3678 + */ +.textContainer.textContainer { max-width: 480px; - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* composes: container from global; - composes: text--center from global; */ } .featuresContainer, .quotesContainer { - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* https://github.com/css-modules/css-modules#composing-from-other-files */ - /* composes: container from global; */ + composes: container from global; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); diff --git a/src/pages/libraries/libraries.tsx b/src/pages/libraries/libraries.tsx index 1f484eb0..e5339b67 100644 --- a/src/pages/libraries/libraries.tsx +++ b/src/pages/libraries/libraries.tsx @@ -28,7 +28,7 @@ export default function Libraries(): JSX.Element { />
+ className={`${styles.featuresContainer} ${styles.verticalRhythm}`}> {data.libraries.map((library: LinkCardProps) => ( ))} diff --git a/src/pages/training/training.module.css b/src/pages/training/training.module.css index 4880150d..6c094144 100644 --- a/src/pages/training/training.module.css +++ b/src/pages/training/training.module.css @@ -2,18 +2,21 @@ margin-bottom: calc(2 * var(--ifm-spacing-vertical)); } -.textContainer { +/* + * The .textContainer class duplication is a subtle trick to increase the specificity of + * this selector, as it would clash with an Infima styling otherwise. CSS injection + * order is affecting this. But it doesn't seem like an easy task to solve. + * More info: + * + * https://github.com/facebook/docusaurus/issues/3678 + */ +.textContainer.textContainer { max-width: 480px; - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* composes: container from global; - composes: text--center from global; */ } .featuresContainer, .quotesContainer { - /* TODO: Waiting on https://github.com/mrmckeb/typescript-plugin-css-modules/issues/207 */ - /* https://github.com/css-modules/css-modules#composing-from-other-files */ - /* composes: container from global; */ + composes: container from global; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ifm-spacing-vertical) var(--ifm-spacing-horizontal); diff --git a/src/pages/training/training.tsx b/src/pages/training/training.tsx index bc672af3..15b6543f 100644 --- a/src/pages/training/training.tsx +++ b/src/pages/training/training.tsx @@ -67,7 +67,7 @@ export default function Training(): JSX.Element {

+ className={`${styles.quotesContainer} ${styles.verticalRhythm}`}> {data.quotes.map((quote: QuoteCardProps) => ( ))}