WIP

measuredco · Nov 22, 2024 · a282650 · a282650
1 parent bfae230
commit a282650
Show file tree

Hide file tree

Showing 44 changed files with 968 additions and 1,722 deletions.
diff --git a/app/[...puckPath]/page.tsx b/app/[...puckPath]/page.tsx
@@ -6,7 +6,7 @@ import { notFound } from "next/navigation";
 import content from "../../content.json";
 import resolvePuckPath from "../../lib/resolve-puck-path";
 import { getPageRes } from "../../lib/get-page-res";
-import config from "../../puck.config";
+import config from "../../puck/config";
 
 const { openGraphLocale, siteUrl, title } = content;
 

diff --git a/app/blog/[...puckPath]/page.tsx b/app/blog/[...puckPath]/page.tsx
@@ -5,7 +5,7 @@ import { notFound } from "next/navigation";
 import content from "../../../content.json";
 import resolvePuckPath from "../../../lib/resolve-puck-path";
 import { getPageRes } from "../../../lib/get-page-res";
-import config, { Props } from "../../../puck.config";
+import config, { Props } from "../../../puck/config";
 
 const { blogPostDescription, openGraphLocale, siteName, siteUrl, title } =
   content;

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
@@ -6,7 +6,7 @@ import { notFound } from "next/navigation";
 import content from "../../content.json";
 import { getPosts } from "../../lib/get-posts";
 import { getPageRes } from "../../lib/get-page-res";
-import config from "../../puck.config";
+import config from "../../puck/config";
 
 const { blogDescription, openGraphLocale, siteName, siteUrl, title } = content;
 

diff --git a/app/edit/[[...puckPath]]/client.tsx b/app/edit/[[...puckPath]]/client.tsx
@@ -4,7 +4,7 @@ import { Button, Puck, usePuck } from "@measured/puck";
 import type { Data } from "@measured/puck";
 import headingAnalyzer from "@measured/puck-plugin-heading-analyzer";
 
-import config from "../../../puck.config";
+import config from "../../../puck/config";
 import { Save } from "react-feather";
 import { Base } from "../../../components";
 import { useState } from "react";

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,7 +5,7 @@ import { notFound } from "next/navigation";
 
 import content from "../content.json";
 import { getPageRes } from "../lib/get-page-res";
-import config from "../puck.config";
+import config from "../puck/config";
 
 const { description, openGraphLocale, siteName, siteUrl, themeColor, title } =
   content;

diff --git a/components/Artifact/Artifact.css b/components/Artifact/Artifact.css
diff --git a/components/Artifact/index.js b/components/Artifact/index.js
diff --git a/components/Cards/Cards.css b/components/Cards/Cards.css
@@ -2,9 +2,9 @@
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: row;
-  grid-gap: var(--space-vertical) var(--space-horizontal);
-  margin-bottom: 0;
-  margin-top: 0;
+  grid-gap: var(--space-vertical) var(--space-horizontal-06);
+  margin: 0 auto;
+  max-width: 63.375rem;
   padding-left: 0;
 }
 
@@ -17,10 +17,13 @@
 .msrd .msrd-Card {
   background: var(--color-white);
   border-radius: 1.125rem;
-  box-shadow: 0.125rem 0.125rem 0.25rem color-mix(in srgb, var(--color-black) 8%, transparent);
+  box-shadow: 0.125rem 0.125rem 0.25rem
+    color-mix(in srgb, var(--color-black) 8%, transparent);
   color: inherit;
-  padding: var(--space-vertical-03) var(--space-horizontal)
-    var(--space-vertical-05);
+  display: block;
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-vertical-06) var(--space-horizontal-08);
   position: relative;
   width: 100%;
 }
@@ -38,16 +41,22 @@
   transition: 0.05s var(--easing-cubic-bezier-easy-ease);
 }
 
-.msrd .msrd-Card-artifact {
-  color: var(--color-azure-01);
+.msrd .msrd-Card a {
+  color: inherit;
+  position: relative;
 }
 
-.msrd .msrd-Card--link .msrd-Card-artifact {
-  color: var(--color-brand);
+.msrd .msrd-Card a:hover,
+.msrd .msrd-Card a:active {
+  color: inherit;
+}
+
+.msrd .msrd-Card:has(.msrd-Card-heading a) {
+  cursor: pointer;
 }
 
 @media (hover: hover) {
-  .msrd a.msrd-Card--link:hover::after {
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover::after {
     bottom: 0;
     left: 0;
     right: 0;
@@ -56,6 +65,25 @@
   }
 }
 
+.msrd .msrd-Card-heading a {
+  color: inherit;
+  position: static;
+}
+
+.msrd .msrd-Card-heading a:hover,
+.msrd .msrd-Card-heading a:active {
+  color: inherit;
+}
+
+.msrd .msrd-Card-heading a::after {
+  bottom: 0;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 @media (prefers-color-scheme: dark) {
   .msrd .msrd-Card {
     background: var(--color-brand-inverted);
@@ -65,18 +93,104 @@
   .msrd .msrd-Card::after {
     border-color: var(--color-white);
   }
+}
+
+.msrd .msrd-Card-dots {
+  align-items: center;
+  display: flex;
+  height: var(--space-horizontal-03);
+  justify-content: space-between;
+  left: var(--space-horizontal-05);
+  position: absolute;
+  top: var(--space-horizontal-05);
+  width: var(--space-horizontal-07);
+}
+
+.msrd .msrd-Card-dots::before,
+.msrd .msrd-Card-dots::after,
+.msrd .msrd-Card-dotsInner {
+  background-color: var(--color-grey-11);
+  border-radius: 50%;
+  content: "";
+  height: var(--space-horizontal-03);
+  width: var(--space-horizontal-03);
+}
+
+@media (prefers-color-scheme: dark) {
+  .msrd .msrd-Card-dots::before,
+  .msrd .msrd-Card-dots::after,
+  .msrd .msrd-Card-dotsInner {
+    background-color: var(--color-brand);
+  }
+}
+
+@media (hover: hover) {
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dots::before,
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dotsInner,
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dots::after {
+    background-color: var(--color-brand-inverted);
+  }
+
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dots::before {
+    transition: 0.1s var(--easing-cubic-bezier-easy-ease);
+  }
+
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dotsInner {
+    transition: 0.2s var(--easing-cubic-bezier-easy-ease);
+  }
 
-  .msrd .msrd-Card .msrd-Card-artifact {
-    color: var(--color-brand);
+  .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dots::after {
+    transition: 0.3s var(--easing-cubic-bezier-easy-ease);
   }
 
-  .msrd .msrd-Card--link .msrd-Card-artifact {
+  @media (prefers-color-scheme: dark) {
+    .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dots::before,
+    .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dotsInner,
+    .msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-dots::after {
+      background-color: var(--color-white);
+    }
+  }
+}
+
+.msrd .msrd-Card-dots::before {
+  left: 0;
+  position: absolute;
+}
+
+.msrd .msrd-Card-dots::after {
+  position: absolute;
+  right: 0;
+}
+
+.msrd .msrd-Card-dotsInner {
+  margin: auto;
+  position: relative;
+}
+
+.msrd .msrd-Card-note {
+  margin-top: auto;
+}
+
+.msrd .msrd-Card:has(.msrd-Card-heading a) .msrd-Card-note {
+  color: var(--color-brand);
+}
+
+@media (prefers-color-scheme: dark) {
+  .msrd .msrd-Card:has(.msrd-Card-heading a) .msrd-Card-note {
     color: var(--color-azure-01);
   }
 }
 
-.msrd .msrd-Card p {
-  margin-bottom: 0;
-  margin-top: 0;
-  text-wrap: pretty;
+.msrd .msrd-Card-note span::after {
+  content: "→";
+  left: 0;
+  opacity: 0;
+  position: relative;
+}
+
+.msrd .msrd-Card:has(.msrd-Card-heading a):hover .msrd-Card-note span::after {
+  left: 0.25em;
+  opacity: 1;
+  transition: 0.1s opacity var(--easing-cubic-bezier-easy-ease),
+    0.2s left var(--easing-cubic-bezier-easy-ease);
 }
diff --git a/components/Cards/index.js b/components/Cards/index.js
@@ -2,27 +2,32 @@ import classNames from "classnames";
 import Link from "next/link";
 import React from "react";
 
-import { Artifact, Heading, Space } from "../";
+import { Heading, Paragraph, Space } from "../";
 
 import "./Cards.css";
 
-export const Card = ({ artifact, headingLevel, link, title, description }) => {
-  const CardElement = link ? Link : "div";
-
+export const Card = ({ description, headingLevel, link, note = "", title }) => {
   return (
-    <CardElement
-      className={classNames({ "msrd-Card": true, ["msrd-Card--link"]: link })}
-      href={link}
-    >
-      <div className="msrd-Card-artifact">
-        <Artifact>{artifact}</Artifact>
+    <div className={classNames({ "msrd-Card": true })}>
+      <span className="msrd-Card-dots">
+        <span className="msrd-Card-dotsInner" />
+      </span>
+      <div className="msrd-Card-heading">
+        <Heading level={headingLevel} size="4">
+          {link ? <Link href={link}>{title}</Link> : title}
+        </Heading>
       </div>
-      <Heading level={headingLevel} size="4">
-        {title}
-      </Heading>
       <Space size="03" />
-      <p>{description}</p>
-    </CardElement>
+      <Paragraph size="small">{description}</Paragraph>
+      {note ? (
+        <>
+          <Space size="03" />
+          <div className="msrd-Card-note">
+            <Paragraph size="small">{note}</Paragraph>
+          </div>
+        </>
+      ) : null}
+    </div>
   );
 };