5www] Overall typography edits - starter showcase #6719 (#7708)

* (#6719): typography edits to starter showcase * (#6719): centralize common showcase styles for meta info
gatsbyjs · Aug 30, 2018 · c9a8950 · c9a8950
1 parent ea4dcf7
commit c9a8950
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/www/src/views/shared/styles.js b/www/src/views/shared/styles.js
@@ -1,4 +1,4 @@
-import typography, { options, rhythm } from "../../utils/typography"
+import typography, { options, rhythm, scale } from "../../utils/typography"
 import presets, { colors } from "../../utils/presets"
 import { style } from "glamor"
 import hex2rgba from "hex2rgba"
@@ -144,6 +144,13 @@ const styles = {
     borderBottom: `none !important`, // i know i know
     boxShadow: `none !important`, // but people really want this
   },
+  meta: {
+    ...scale(-1 / 5),
+    alignItems: `baseline`,
+    "&&": {
+      color: colors.gray.bright,
+    },
+  },
   searchInput: {
     appearance: `none`,
     backgroundColor: `transparent`,

diff --git a/www/src/views/showcase/showcase-list.js b/www/src/views/showcase/showcase-list.js
@@ -78,13 +78,9 @@ const ShowcaseList = ({ items, count }) => {
               </Link>
               <div
                 css={{
-                  ...scale(-2 / 5),
+                  ...styles.meta,
                   display: `flex`,
                   justifyContent: `space-between`,
-                  alignItems: `baseline`,
-                  "&&": {
-                    color: `#9B9B9B`,
-                  },
                 }}
                 className="meta"
               >

diff --git a/www/src/views/starter-showcase/showcase-list.js b/www/src/views/starter-showcase/showcase-list.js
@@ -4,7 +4,8 @@ import Img from "gatsby-image"
 import FaExtLink from "react-icons/lib/fa/external-link"
 import FaGithub from "react-icons/lib/fa/github"
 import FaClipboard from "react-icons/lib/fa/clipboard"
-import { /* options, rhythm, */ scale, rhythm } from "../../utils/typography"
+import MdStar from "react-icons/lib/md/star"
+import { /* rhythm, */ scale, rhythm, options } from "../../utils/typography"
 import presets, { colors } from "../../utils/presets"
 import copyToClipboard from "../../utils/copy-to-clipboard"
 import styles from "../shared/styles"
@@ -48,6 +49,7 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
   return (
     <div
       css={{
+        fontFamily: options.headerFontFamily.join(`,`),
         display: `flex`,
         flexWrap: `wrap`,
         padding: rhythm(3 / 4),
@@ -136,14 +138,25 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
               </Link>
               <div
                 css={{
-                  ...scale(-2 / 5),
-                  color: `#9B9B9B`,
-                  fontWeight: `normal`,
+                  ...styles.meta,
+                  marginTop: rhythm(options.blockMarginBottom),
                 }}
               >
                 <div css={{ display: `flex`, justifyContent: `space-between` }}>
-                  {repo.owner && repo.owner.login} /
-                  <span>
+                  <span css={{ color: colors.gray.dark }}>
+                    {repo.owner && repo.owner.login} /
+                  </span>
+                  <span
+                    css={{
+                      "> a": {
+                        paddingLeft: 5,
+                        "&:hover": {
+                          background: `none`,
+                          color: colors.gatsby,
+                        },
+                      },
+                    }}
+                  >
                     <a
                       href="#copy-to-clipboard"
                       onClick={() =>
@@ -196,9 +209,12 @@ const ShowcaseList = ({ urlState, items, imgs, count, sortRecent }) => {
                 </div>
                 <div css={{ display: `flex`, justifyContent: `space-between` }}>
                   <div css={{ display: `inline-block` }}>
-                    <span role="img" aria-label="star">
-                      ⭐
-                    </span>
+                    <MdStar
+                      style={{
+                        color: colors.accent,
+                        verticalAlign: "text-top",
+                      }}
+                    />
                     {stars}
                   </div>
                   <div css={{ display: `inline-block` }}>