Heading font weight

4 files changed, 71 insertions, 1 deletions

diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index 0d0e16e..01a5b7b 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -63,7 +63,7 @@
 
 .introduction__name {
   font-family: var(--ifm-heading-font-family);
-  font-weight: var(--ifm-heading-font-weight);
+  font-weight: var(--marussy-very-bold);
   --casl: 1;
   font-size: 3rem;
   letter-spacing: var(--marussy-heading-tracking);
diff --git a/src/css/custom.css b/src/css/custom.css
index 3b70182..b84aec3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -35,6 +35,7 @@
   --marussy-heading-tracking: -0.031em;
   --marussy-button-tracking: -0.026em;
   --marussy-slightly-casl: 0.25;
+  --marussy-very-bold: 800;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -49,6 +50,12 @@
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+@media (max-width: 576px) {
+  :root {
+    --marussy-very-bold: var(--ifm-heading-font-weight);
+  }
+}
+
 * {
   /*
    * We must use `!important` here, because Infima sometimes sets font
@@ -98,6 +105,7 @@ h3 {
   letter-spacing: var(--marussy-heading-tracking);
 }
 
+
 .button--lg {
   letter-spacing: var(--marussy-button-tracking);
 }
@@ -108,6 +116,10 @@ h3 {
   --mono: 1;
 }
 
+.hero__title {
+  font-weight: var(--marussy-very-bold);
+}
+
 .hero__subtitle {
   font-weight: 500;
 }
diff --git a/src/theme/BlogPostItem/Header/Title.module.css b/src/theme/BlogPostItem/Header/Title.module.css
new file mode 100644
index 0000000..9da03c1
--- /dev/null
+++ b/src/theme/BlogPostItem/Header/Title.module.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This file was derived from
+ * https://github.com/facebook/docusaurus/blob/73016d4936164ba38d4b86ec2aa8c168b5904a21/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/styles.module.css
+ * via the `swizzle` mechanism of Docusaurus.
+ *
+ * It was modified to embed JSX content directly in the footer.
+ */
+
+.title {
+  font-size: 3rem;
+  font-weight: var(--marussy-very-bold);
+}
+
+/**
+  Blog post title should be smaller on smaller devices
+**/
+@media (max-width: 576px) {
+  .title {
+    font-size: 2rem;
+  }
+}
diff --git a/src/theme/BlogPostItem/Header/Title.tsx b/src/theme/BlogPostItem/Header/Title.tsx
new file mode 100644
index 0000000..ced0916
--- /dev/null
+++ b/src/theme/BlogPostItem/Header/Title.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This file was derived from
+ * https://github.com/facebook/docusaurus/blob/73016d4936164ba38d4b86ec2aa8c168b5904a21/packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/index.tsx
+ * via the `swizzle` mechanism of Docusaurus.
+ *
+ * It was modified to embed JSX content directly in the footer.
+ */
+
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/BlogPostItem/Header/Title';
+
+import styles from './Title.module.css';
+
+export default function BlogPostItemHeaderTitle({
+  className,
+}: Props): JSX.Element {
+  const {metadata, isBlogPostPage} = useBlogPost();
+  const {permalink, title} = metadata;
+  const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
+  return (
+    <TitleHeading className={clsx(styles.title, className)}>
+      {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
+    </TitleHeading>
+  );
+}