Added Sidenote Component

src/components/Content/Grid/Column/Column.module.css

@@ -0,0 +1,3 @@
+.column {
+  position: relative;
+}

src/components/Content/Grid/Column/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import styles from './Column.module.css';
+
+interface ColumnProps {
+  style: {
+    colspan: number;
+  };
+  children?: React.ReactNode;
+}
+
+export function Column({ style, children }: ColumnProps) {
+  return (
+    <div
+      className={styles.column}
+      style={{
+        gridColumn: `span ${style.colspan}`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Content/Grid/Row/Row.module.css

@@ -0,0 +1,3 @@
+.row {
+  display: grid;
+}

src/components/Content/Grid/Row/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import styles from './Row.module.css';
+
+interface RowProps {
+  style: {
+    cols: number;
+    gap: string;
+    align: string;
+    justify: string;
+  };
+  children: React.ReactNode;
+}
+
+export function Row({ style, children }: RowProps) {
+  return (
+    <div
+      className={`${styles.row}`}
+      style={{
+        gridTemplateColumns: `repeat(${style.cols}, 1 fr)`,
+        gap: `${style.gap}`,
+        alignItems: `${style.align}`,
+        justifyContent: `${style.justify}`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Content/Sidenote/Container/Container.module.css

@@ -0,0 +1,63 @@
+.container {
+  flex: 1 0 auto;
+  min-width: 16rem;
+}
+
+.wrapper {
+  @media screen and (--bp-margin) {
+    position: absolute;
+    top: anchor(top);
+  }
+}
+
+.note {
+  position: relative;
+  min-width: 16rem;
+  font-family: var(--font-mono);
+
+  @media screen and (--bp-margin) {
+    @mixin text-xs;
+
+    margin-right: var(--spacing-generous);
+    padding: var(--spacing-cozy) var(--spacing-cozy) var(--spacing-cozy) var(--size-12) ;
+    border: var(--size-1) solid var(--color-surface-inverse);
+
+    background: var(--color-surface-elevated-1);
+    box-shadow: 2px 2px 0 var(--color-palette-woodsmoke), 4px 4px 0 var(--color-palette-charcoal-gray);
+  }
+}
+
+.marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: var(--size-8);
+
+  font-size: var(--typo-size-3xl);
+  font-weight: var(--typo-weight-black);
+  color: var(--color-text-inverse);
+
+  background-color: var(--color-surface-inverse);
+}
+
+.content {
+  text-align: left;
+}
+
+.ref {
+  @mixin ml var(--spacing-snug);
+  @mixin anim-txt-characterglitch;
+
+  font-weight: var(--typo-weight-black);
+  color: var(--color-text-quarternary);
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}

src/components/Content/Sidenote/Container/index.tsx

@@ -0,0 +1,33 @@
+import type { Sidenote } from '@/lib/types/components';
+import styles from './Container.module.css';
+
+interface ContainerProps {
+  items: Sidenote[];
+}
+
+export default function Container({ items }: ContainerProps) {
+  return (
+    <aside className={styles.container}>
+      {items.map((sidenote: Sidenote) => (
+        <div
+          key={sidenote.id}
+          id={sidenote.id}
+          className={styles.wrapper}
+          style={{ positionAnchor: `--note-${sidenote.id}` }}
+        >
+          <div className={`${styles.note} ${styles[sidenote.type]}`}>
+            <span className={styles.marker}>
+              <span className={styles.symbol}>{sidenote.marker}</span>
+            </span>
+            <div className={styles.content}>
+              {sidenote.content}
+              <a href={`#ref-${sidenote.id}`} className={styles.ref}>
+                ↩
+              </a>
+            </div>
+          </div>
+        </div>
+      ))}
+    </aside>
+  );
+}

src/components/Content/Sidenote/Item/Item.module.css

@@ -0,0 +1,11 @@
+.ref {
+  @mixin px var(--spacing-tight);
+
+  display: inline-block;
+  font-weight: var(--typo-weight-black);
+  transition: color 0.5s ease-in-out;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}

src/components/Content/Sidenote/Item/index.tsx

@@ -0,0 +1,17 @@
+import type { Sidenote } from '@/lib/types/components';
+import styles from './Item.module.css';
+
+export default function SidenoteItem({ id, marker, content, type }: Sidenote) {
+  return (
+    <sup>
+      <a
+        href={`#${id}`}
+        className={styles.ref}
+        id={`#ref-${id}`}
+        style={{ anchorName: `--note-${id}` }}
+      >
+        [{marker}]
+      </a>
+    </sup>
+  );
+}