From bf377298eec859c8b1b24053b209bb6f1040f12b Mon Sep 17 00:00:00 2001
From: Rien <rien.coertjens@gmail.com>
Date: Sat, 8 Sep 2018 23:13:35 +0200
Subject: [PATCH 1/3] update showcase list layout

---
 www/src/views/shared/styles.js                      |  9 ++++-----
 www/src/views/shared/thumbnail.js                   | 10 +++++-----
 www/src/views/starter-showcase/filtered-showcase.js | 10 +---------
 www/src/views/starter-showcase/showcase-list.js     | 11 ++---------
 4 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/www/src/views/shared/styles.js b/www/src/views/shared/styles.js
index 8a76f049df5a7..46a4001becb81 100644
--- a/www/src/views/shared/styles.js
+++ b/www/src/views/shared/styles.js
@@ -26,16 +26,15 @@ const styles = {
     display: `flex`,
     flexWrap: `wrap`,
     padding: rhythm(3 / 4),
-    justifyContent: `center`,
-    [presets.Desktop]: {
-      justifyContent: `flex-start`,
-    },
+    justifyContent: `space-evenly`,
   },
   showcaseItem: {
     display: `flex`,
     flexDirection: `column`,
     margin: rhythm(3 / 4),
-    width: 282,
+    minWidth: 259,//shows 3 items/row on windows > 1200px wide
+    maxWidth: 350,
+    flex: `1 0 0`,
     position: `relative`,
   },
   featuredItem: {
diff --git a/www/src/views/shared/thumbnail.js b/www/src/views/shared/thumbnail.js
index 8b681b36c337a..fcbd4c750bb0f 100644
--- a/www/src/views/shared/thumbnail.js
+++ b/www/src/views/shared/thumbnail.js
@@ -10,10 +10,10 @@ const ThumbnailLink = ({ slug, image, title, children }) => {
 
   // site showcase
   if (image.screenshotFile) {
-    screenshot = image.screenshotFile.childImageSharp.fixed
+    screenshot = image.screenshotFile.childImageSharp.fluid
   } else {
     // starter showcase
-    screenshot = image.childImageSharp.fixed
+    screenshot = image.childImageSharp.fluid
   }
 
   return (
@@ -37,7 +37,7 @@ const ThumbnailLink = ({ slug, image, title, children }) => {
     >
       {screenshot ? (
         <Img
-          fixed={screenshot}
+          fluid={screenshot}
           alt={`Screenshot of ${title}`}
           css={{ ...styles.screenshot }}
         />
@@ -60,8 +60,8 @@ export default ThumbnailLink
 
 export const showcaseThumbnailFragment = graphql`
   fragment ShowcaseThumbnailFragment_item on ImageSharp {
-    fixed(width: 282, height: 211) {
-      ...GatsbyImageSharpFixed_noBase64
+    fluid(maxWidth: 350) {
+      ...GatsbyImageSharpFluid_noBase64
     }
   }
 `
diff --git a/www/src/views/starter-showcase/filtered-showcase.js b/www/src/views/starter-showcase/filtered-showcase.js
index 418d6b7f4f570..1e1bb900c0de9 100644
--- a/www/src/views/starter-showcase/filtered-showcase.js
+++ b/www/src/views/starter-showcase/filtered-showcase.js
@@ -334,15 +334,7 @@ export default class FilteredShowcase extends Component {
             <button
               css={{
                 ...styles.button,
-                display: `block`,
-                marginBottom: rhythm(options.blockMarginBottom * 5),
-                marginTop: rhythm(options.blockMarginBottom * 2),
-                marginLeft: `auto`,
-                marginRight: `auto`,
-                [presets.Desktop]: {
-                  marginLeft: rhythm(6 / 4),
-                  marginRight: rhythm(6 / 4),
-                },
+                ...styles.loadMoreButton
               }}
               onClick={() => {
                 this.setState({ sitesToShow: this.state.sitesToShow + 15 })
diff --git a/www/src/views/starter-showcase/showcase-list.js b/www/src/views/starter-showcase/showcase-list.js
index d5b3b1f8e159b..690a7826fb567 100644
--- a/www/src/views/starter-showcase/showcase-list.js
+++ b/www/src/views/starter-showcase/showcase-list.js
@@ -49,13 +49,7 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
     <div
       css={{
         fontFamily: options.headerFontFamily.join(`,`),
-        display: `flex`,
-        flexWrap: `wrap`,
-        padding: rhythm(3 / 4),
-        justifyContent: `center`,
-        [presets.Desktop]: {
-          justifyContent: `flex-start`,
-        },
+        ...styles.showcaseList
       }}
     >
       {items.map(({ node }) => {
@@ -82,8 +76,7 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
             <div
               key={node.id}
               css={{
-                margin: rhythm(3 / 4),
-                width: 280,
+                ...styles.showcaseItem
               }}
               {...styles.withTitleHover}
             >

From e05c92a61b976c0a2d874076e9baa347a81ae33d Mon Sep 17 00:00:00 2001
From: Rien <rien.coertjens@gmail.com>
Date: Sat, 8 Sep 2018 23:14:54 +0200
Subject: [PATCH 2/3] align items last row

---
 www/src/views/showcase/showcase-list.js         | 7 +++++++
 www/src/views/starter-showcase/showcase-list.js | 7 +++++++
 2 files changed, 14 insertions(+)

diff --git a/www/src/views/showcase/showcase-list.js b/www/src/views/showcase/showcase-list.js
index 78220e19b26ed..deab438cfa39c 100644
--- a/www/src/views/showcase/showcase-list.js
+++ b/www/src/views/showcase/showcase-list.js
@@ -104,6 +104,13 @@ const ShowcaseList = ({ items, count }) => {
             </div>
           )
       )}
+      {/* makes last row items equal width and aligned left */}
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
     </div>
   )
 }
diff --git a/www/src/views/starter-showcase/showcase-list.js b/www/src/views/starter-showcase/showcase-list.js
index 690a7826fb567..796f06cb9c55b 100644
--- a/www/src/views/starter-showcase/showcase-list.js
+++ b/www/src/views/starter-showcase/showcase-list.js
@@ -174,6 +174,13 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
           )
         )
       })}
+      {/* makes last row items equal width and aligned left */}
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
+      <div css={{ ...styles.showcaseItem, marginTop: 0, marginBottom: 0 }} />
     </div>
   )
 }

From d6aefa066b1cb20e32d10f1673de76e977d2a17b Mon Sep 17 00:00:00 2001
From: Rien <rien.coertjens@gmail.com>
Date: Sat, 8 Sep 2018 23:15:17 +0200
Subject: [PATCH 3/3] starter showcase item title style

---
 www/src/views/starter-showcase/showcase-list.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/views/starter-showcase/showcase-list.js b/www/src/views/starter-showcase/showcase-list.js
index 796f06cb9c55b..2a997649f27d8 100644
--- a/www/src/views/starter-showcase/showcase-list.js
+++ b/www/src/views/starter-showcase/showcase-list.js
@@ -136,9 +136,9 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
                   </span>
                 </div>
                 <div>
-                  <span className="title">
+                  <span>
                     <h5 css={{ margin: 0 }}>
-                      <strong>{repo.name}</strong>
+                      <strong className="title">{repo.name}</strong>
                     </h5>
                   </span>
                   {/* {isGatsbyVersionWarning ?