photo fixes, show related photos

content/photos/2019-09-28-vatican-museums.md

@@ -0,0 +1,9 @@
+---
+type: photo
+date: 2019-09-28T17:35:27.000Z
+
+title: Vatican Museums
+image: 2019-09-28-vatican-museums.jpg
+---
+
+Staircase in the [Vatican Museums](https://en.wikipedia.org/wiki/Vatican_Museums) in Vatican City.

src/components/molecules/RelatedPosts.tsx

@@ -9,6 +9,7 @@ const query = graphql`
       edges {
         node {
           id
+          fileAbsolutePath
           frontmatter {
             title
             type
@@ -30,12 +31,8 @@ const query = graphql`
   }
 `
 
-const postsWithDataFilter = (
+function postsWithDataFilter(posts: [], key: string, valuesToFind: string[]) {
-  postsArray: [],
+  const newArray = posts.filter((post: any) => {
-  key: string,
-  valuesToFind: string[]
-) => {
-  const newArray = postsArray.filter((post: any) => {
     const frontmatterKey = post.node.frontmatter[key]
 
     if (
@@ -48,20 +45,42 @@ const postsWithDataFilter = (
   return newArray
 }
 
-export default function RelatedPosts({ tags }: { tags: string[] }) {
+function photosWithDataFilter(posts: []) {
+  const newArray = posts.filter((post: any) => {
+    const { fileAbsolutePath } = post.node
+
+    if (fileAbsolutePath.includes('content/photos')) {
+      return post
+    }
+  })
+  return newArray
+}
+
+export default function RelatedPosts({
+  tags,
+  photos
+}: {
+  tags: string[]
+  photos?: boolean
+}) {
   const data = useStaticQuery(query)
   const posts = data.allMarkdownRemark.edges
-  const [filteredPosts, setFilteredPosts] = useState(
+
-    postsWithDataFilter(posts, 'tags', tags)
+  function getPosts() {
-  )
+    return photos
+      ? photosWithDataFilter(posts)
+      : postsWithDataFilter(posts, 'tags', tags)
+  }
+
+  const [filteredPosts, setFilteredPosts] = useState(getPosts())
 
   function refreshPosts() {
-    setFilteredPosts(postsWithDataFilter(posts, 'tags', tags))
+    setFilteredPosts(getPosts())
   }
 
   return (
     <aside className={styles.relatedPosts}>
-      <h1 className={styles.title}>Related Posts</h1>
+      <h1 className={styles.title}>Related {photos ? 'Photos' : 'Posts'}</h1>
       <ul>
         {filteredPosts
           .sort(() => 0.5 - Math.random())
@@ -71,7 +90,7 @@ export default function RelatedPosts({ tags }: { tags: string[] }) {
           ))}
       </ul>
       <button className={`${styles.button} btn`} onClick={refreshPosts}>
-        Refresh Related Posts
+        Refresh Related {photos ? 'Photos' : 'Posts'}
       </button>
     </aside>
   )

src/styles/_buttons.scss

@@ -22,15 +22,15 @@ a.btn {
     $border-radius
   );
 
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(#fff, 0.1);
-  border: 1px solid rgba(94, 131, 162, 0.3);
+  border: 1px solid rgba($brand-grey-light, 0.3);
-  border-bottom-color: rgba(94, 131, 162, 0.4);
+  border-bottom-color: rgba($brand-grey-light, 0.4);
   font-family: $font-family-headings;
   font-weight: $font-weight-headings;
   color: $brand-grey;
   text-transform: uppercase;
-  box-shadow: 0 1px 3px rgba($brand-grey-light, 0.1),
+  box-shadow: 0 1px 3px rgba($brand-grey-light, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    inset 0 1px 0 rgba(#fff, 0.7);
 
   @media (min-width: $screen-sm) {
     max-width: 20rem;
@@ -39,26 +39,39 @@ a.btn {
   &:hover,
   &:focus {
     outline: 0;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(#fff, 0.5);
   }
 
   &:active {
     color: $brand-grey;
-    border-color: rgba(94, 131, 162, 0.3);
+    border-color: rgba($brand-grey-light, 0.3);
     background-color: transparent;
     box-shadow: 0 1px 0 #fff;
     transition: none;
     outline: 0;
   }
 
+  :global(.dark) &:not(.btn-primary) {
+    color: $brand-grey-light;
+    background-color: darken($body-background-color--dark, 3%);
+    border: 1px solid darken($body-background-color--dark, 10%);
+    box-shadow: 0 1px 3px rgba(darken($body-background-color--dark, 10%), 0.5),
+      inset 0 1px 0 rgba(#fff, 0.1);
+
+    &:hover,
     &:focus {
-    outline: 0;
+      background-color: darken($body-background-color--dark, 1%);
+    }
+
+    &:active {
+      background-color: darken($body-background-color--dark, 5%);
+      box-shadow: 0 1px 0 rgba(#fff, 0.1);
+    }
   }
 
   // Disabled State
   &.disabled,
-  &[disabled],
+  &[disabled] {
-  fieldset[disabled] & {
     cursor: not-allowed;
     pointer-events: none;
     opacity: 0.6;
@@ -76,8 +89,8 @@ a.btn {
   }
 
   span {
-    font-size: 0.9rem;
+    font-size: $font-size-mini;
-    color: rgba(19, 56, 50, 0.6);
+    color: $text-color-light;
     margin-left: 0.3em;
   }
 }
@@ -103,17 +116,17 @@ a.btn-primary {
   @extend .btn;
 
   color: darken($link-color, 50%);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-shadow: 0 1px 0 rgba(#fff, 0.3);
   background: lighten($link-color, 15%);
   border-color: $link-color;
   box-shadow: 0 1px 3px rgba($brand-grey-light, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+    inset 0 1px 0 rgba(#fff, 0.4);
 
   &:hover,
   &:focus {
     color: darken($link-color, 50%);
     background-color: lighten($link-color, 25%);
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    text-shadow: 0 1px 0 rgba(#fff, 0.3);
   }
 
   &:active {
@@ -121,6 +134,27 @@ a.btn-primary {
     border-color: darken($link-color, 10%);
     background-color: lighten($link-color, 15%);
   }
+
+  .dark &,
+  &:global(.dark) & {
+    border-color: darken($body-background-color--dark, 10%);
+    background: $link-color;
+    box-shadow: 0 1px 3px darken($body-background-color--dark, 10%),
+      inset 0 1px 0 rgba(#fff, 0.4);
+
+    // stylelint-disable no-descending-specificity
+    &:hover,
+    &:focus {
+      background-color: lighten($link-color, 10%);
+      text-shadow: 0 1px 0 rgba(#fff, 0.3);
+    }
+
+    &:active {
+      background-color: darken($link-color, 5%);
+      box-shadow: 0 1px 0 rgba(#fff, 0.2);
+    }
+    // stylelint-enable no-descending-specificity
+  }
 }
 
 .btn-block {
@@ -166,8 +200,8 @@ a.btn-primary {
 .content-download {
   text-align: center;
   display: block;
-  margin-top: $spacer;
+  margin-top: $spacer * 2;
-  margin-bottom: $spacer;
+  margin-bottom: $spacer * 2;
 
   @media (min-width: $screen-xs) {
     display: flex;
@@ -197,13 +231,8 @@ a.btn-primary {
       font-size: $font-size-mini;
       color: $text-color-light;
     }
-  }
 
-  .icon-download,
+    &[class*='icon-'] {
-  .icon-heart,
-  .icon-wordpress,
-  .icon-github,
-  .icon-eye {
       &::before {
         content: '';
         width: $font-size-large;
@@ -211,11 +240,30 @@ a.btn-primary {
         display: inline-block;
         margin-right: 0.3rem;
         margin-bottom: -0.25rem;
-      opacity: 0.5;
+        opacity: 0.75;
-      background: url('../images/arrow-with-circle-down.svg') no-repeat left
+        background-repeat: no-repeat;
-        center;
+        background-position: left center;
+
+        .dark &,
+        :global(.dark) & {
+          filter: invert(0.75);
         }
       }
+    }
+
+    &[class*='btn-primary'] {
+      &::before {
+        .dark &,
+        :global(.dark) & {
+          filter: invert(0);
+        }
+      }
+    }
+  }
+
+  .icon-download::before {
+    background-image: url('../images/arrow-with-circle-down.svg');
+  }
 
   .icon-heart::before {
     background-image: url('../images/heart.svg');

src/styles/_code.scss

@@ -51,7 +51,6 @@ pre {
   }
 
   code {
-    font-size: 0.8rem;
     padding: $spacer / 2;
     white-space: pre;
     display: block;

src/styles/global.scss

@@ -257,6 +257,7 @@ ol {
 
   li {
     position: relative;
+    margin-bottom: $spacer / 4;
 
     // stylelint-disable no-descending-specificity
     &::before {

src/templates/Post.tsx

@@ -50,7 +50,9 @@ export default function Post({
           <PostMeta post={post} />
         </article>
 
-        {type === 'post' && <RelatedPosts tags={tags} />}
+        {(type === 'post' || type === 'photo') && (
+          <RelatedPosts photos={type === 'photo'} tags={tags} />
+        )}
       </Layout>
     </>
   )