Update post styles

src/layouts/Post/Post.js

@@ -96,9 +96,9 @@ export const Post = ({ children, title, date, abstract, banner, timecode }) => {
  );
 };
 
-const PostHeading = ({ id, children, className }) => {
+const PostHeading = ({ id, children, className, ...rest }) => {
  return (
- <span className={classes(styles.heading, className)}>
+ <span className={classes(styles.heading, className)} {...rest}>
  <a
  className={styles.headingLink}
  href={`#${id}`}
@@ -113,31 +113,24 @@ const PostHeading = ({ id, children, className }) => {
 };
 
 const PostH1 = ({ children, id, ...rest }) => (
- <PostHeading className={styles.h1} id={id}>
+ <PostHeading className={styles.h1} id={id} data-level={1}>
  <Heading className={styles.headingElement} id={id} level={2} as="h1" {...rest}>
  {children}
  </Heading>
  </PostHeading>
 );
 
 const PostH2 = ({ children, id, ...rest }) => (
- <PostHeading className={styles.h2} id={id}>
+ <PostHeading className={styles.h2} id={id} data-level={2}>
  <Heading className={styles.headingElement} id={id} level={3} as="h2" {...rest}>
  {children}
  </Heading>
  </PostHeading>
 );
 
 const PostH3 = ({ children, id, ...rest }) => (
- <PostHeading className={styles.h2} id={id}>
- <Heading
- className={styles.headingElement}
- id={id}
- level={4}
- as="h3"
- weight="regular"
- {...rest}
- >
+ <PostHeading className={styles.h2} id={id} data-level={3}>
+ <Heading className={styles.headingElement} id={id} level={4} as="h3" {...rest}>
  {children}
  </Heading>
  </PostHeading>
@@ -188,6 +181,10 @@ const PostPre = props => {
  );
 };
 
+const PostHr = props => {
+ return <hr className={styles.hr} {...props} />;
+};
+
 const PostLink = ({ ...props }) => <Link {...props} />;
 
 export const postComponents = {
@@ -199,4 +196,5 @@ export const postComponents = {
  a: PostLink,
  pre: PostPre,
  code: PostCode,
+ hr: PostHr,
 };

src/layouts/Post/Post.module.css

@@ -263,7 +263,11 @@
  }
 
  @nest .paragraph + & {
- margin-top: var(--headingSpace);
+ margin-top: calc(var(--headingSpace) + var(--paraSpace) + var(--spaceM));
+ }
+
+ @nest .paragraph + &:where([data-level='3'], [data-level='4']) {
+ margin-top: calc(var(--headingSpace) + var(--paraSpace));
  }
 }
 
@@ -354,3 +358,19 @@
  margin: var(--space2XL) calc(var(--spaceOuter) * -1);
  }
 }
+
+.hr {
+ grid-column: 3;
+ margin: var(--space3XL) 0;
+ border: 0;
+ border-top: 1px solid rgb(var(--rgbText) / 0.1);
+
+ @media (--mediaTablet) {
+ margin: var(--space2XL) 0;
+ grid-column: 1;
+ }
+
+ @media (--mediaMobile) {
+ margin: var(--space2XL) 0;
+ }
+}