Merge pull request #11 from datocms/simpler-wall

Wall

package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^11.7.0",
-    "@appnest/masonry-layout": "^2.2.3",
     "@astrojs/check": "^0.9.4",
     "@astrojs/node": "^8.3.4",
     "@astrojs/react": "^3.6.2",

src/components/quote/SingleQuote/Component.astro

@@ -35,9 +35,9 @@ const quote =
           href={quote.partner ? buildUrlForPartner(quote.partner) : undefined}
           class={s.wrapper}
         >
-          <div class={s.quote}>
+          <p class={s.quote}>
             <InlineText data={quote.quote} />
-          </div>
+          </p>
 
           <div class={s.content}>
             <ResponsiveImage pictureClass={s.image} data={quote.image.responsiveImage} />
@@ -50,9 +50,9 @@ const quote =
         </MaybeLink>
       ) : (
         <article class={s.wrapper}>
-          <div class={s.quote}>
+          <p class={s.quote}>
             <InlineText data={quote.quote} />
-          </div>
+          </p>
 
           <div class={s.content}>
             <ResponsiveImage pictureClass={s.image} data={quote.image.responsiveImage} />

src/components/quote/SingleQuote/style.module.css

@@ -115,11 +115,11 @@
   gap: 3px;
 
   .root[data-size='big'] & {
-    font-size: rfs(1.275rem);
+    font-size: rfs(1.275em);
   }
 
   .root[data-size='medium'] & {
-    font-size: rfs(1.275rem);
+    font-size: rfs(1em);
   }
 
   .root[data-size='small'] & {
@@ -144,5 +144,5 @@ a.authorRole:hover .name {
   text-transform: uppercase;
   font-weight: bold;
   color: var(--light-body-color);
-  font-size: 0.9em;
+  font-size: 0.875em;
 }

src/pages/wall/_style.module.css

@@ -1,17 +1,32 @@
 .wrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-top: rfs(80px);
+  padding: 0 calc(var(--page-margin) * 2);
+  width: 100%;
+
+  @media screen and (min-width: 1280px) {
+    padding: 0 rfs(100px);
+  }
+}
+
+.quotes {
+  columns: 1;
+  gap: rfs(120px);
   max-width: 2000px;
-  margin-left: auto;
-  margin-right: auto;
   width: 100%;
-  padding-left: var(--page-margin);
-  padding-right: var(--page-margin);
 
-  @media (width > 1200px) {
-    padding-left: 10vh;
-    padding-right: 10vh;
+  @media screen and (min-width: 640px) {
+    columns: 2;
+  }
+
+  @media screen and (min-width: 1620px) {
+    columns: 3;
   }
 }
 
 .quote {
-  margin-bottom: rfs(80px);
+  break-inside: avoid;
+  margin-bottom: rfs(120px);
 }

src/pages/wall/index.astro

@@ -2,10 +2,10 @@
 import { Hero } from '~/components/Hero';
 import { Layout } from '~/layouts/Layout';
 import { Wrapper } from '~/components/Wrapper';
-import s from './_style.module.css';
 import { query } from './_graphql';
 import { executeQuery } from '~/lib/datocms/executeQuery';
 import { SingleQuote } from '~/components/quote/SingleQuote';
+import s from './_style.module.css';
 
 const { allPartnerTestimonials, allReviews } = await executeQuery(Astro, query);
 
@@ -31,18 +31,14 @@ const quotes = [...allPartnerTestimonials, ...allReviews].sort((a, b) =>
   </Wrapper>
 
   <div class={s.wrapper}>
-    <masonry-layout maxcolwidth="600" gap="200">
+    <div class={s.quotes}>
       {
         quotes.map((quote) => (
           <div class={s.quote}>
             <SingleQuote quote={quote} size="medium" />
           </div>
         ))
       }
-    </masonry-layout>
+    </div>
   </div>
 </Layout>
-
-<script>
-  import '@appnest/masonry-layout';
-</script>