more asset details style fixes

src/components/organisms/AssetContent/MetaFull.module.css

@@ -1,9 +1,6 @@
 .metaFull {
   margin-top: calc(var(--spacer) * 2);
   font-size: var(--font-size-small);
-  padding: var(--spacer);
-  border-radius: var(--border-radius);
-  background: var(--brand-grey-dimmed);
   display: grid;
   gap: var(--spacer);
   grid-template-columns: 1fr 1fr;

src/components/organisms/AssetContent/index.module.css

@@ -1,13 +1,17 @@
 .grid {
   display: grid;
-  gap: calc(var(--spacer) * 1.5);
+  gap: calc(var(--spacer) * 2);
   position: relative;
   margin-top: -1.5rem;
 }
 
+.content {
+  composes: box from '../../atoms/Box.module.css';
+  margin-top: var(--spacer);
+}
+
 @media (min-width: 60rem) {
   .grid {
-    gap: calc(var(--spacer) * 3);
     /* lazy golden ratio */
     grid-template-columns: 1.618fr minmax(0, 1fr);
   }
@@ -15,7 +19,7 @@
   .sticky {
     position: sticky;
     top: calc(var(--spacer) / 2);
-    margin-top: calc(var(--spacer) * 1.5);
+    margin-top: var(--spacer);
   }
 }
 

src/components/organisms/AssetContent/index.tsx

@@ -24,7 +24,7 @@ export default function AssetContent({
 
   return (
     <article className={styles.grid}>
-      <div>
+      <div className={styles.content}>
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
           {categories && (

src/components/pages/History.module.css

@@ -15,3 +15,8 @@
     top: var(--spacer);
   }
 }
+
+.content {
+  composes: box from '../atoms/Box.module.css';
+  margin-top: var(--spacer);
+}

src/components/pages/History.tsx

@@ -32,7 +32,7 @@ const Section = ({ title, component }: { title: string; component: any }) => {
 const HistoryPage: React.FC = () => {
   return (
     <article className={styles.grid}>
-      <div>
+      <div className={styles.content}>
         {sections.map((section) => {
           const { title, component } = section
           return <Section key={title} title={title} component={component} />