From 79bc5c5bcc6a447edc81cdb26228cc6bf43c3ff6 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 5 Oct 2019 20:20:23 +0200
Subject: [PATCH] fixes

---
 src/components/Post/PostActions.module.scss | 10 ++------
 src/components/Post/PostActions.tsx         | 26 ++++-----------------
 src/components/Post/PostMeta.module.scss    |  8 +++++++
 src/components/Post/PostTeaser.module.scss  | 15 ++++++++----
 src/components/Post/PostTeaser.tsx          | 10 +++-----
 src/pages/photos.tsx                        | 17 ++++++++------
 6 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/src/components/Post/PostActions.module.scss b/src/components/Post/PostActions.module.scss
index 0ba10de8..cb9342b3 100644
--- a/src/components/Post/PostActions.module.scss
+++ b/src/components/Post/PostActions.module.scss
@@ -17,14 +17,8 @@
     background: darken($body-background-color--dark, 2%);
   }
 
-  @media (min-width: $screen-md) {
-    margin-left: -100%;
-    margin-right: -18%;
-    padding-left: 80%;
-  }
-
   > div {
-    flex: 0 0 100%;
+    flex: 1 1 100%;
     border-bottom: 1px dashed rgba($brand-grey-light, 0.3);
 
     &:last-child {
@@ -32,7 +26,7 @@
     }
 
     @media (min-width: $screen-sm) {
-      flex: 0 0 33.33333%;
+      flex: 0 0 33%;
       border-bottom: 0;
       border-left: 1px dashed rgba($brand-grey-light, 0.3);
 
diff --git a/src/components/Post/PostActions.tsx b/src/components/Post/PostActions.tsx
index 0b5e159e..03dce2c2 100644
--- a/src/components/Post/PostActions.tsx
+++ b/src/components/Post/PostActions.tsx
@@ -7,20 +7,10 @@ import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 import { ReactComponent as GitHub } from '../../images/github.svg'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const ActionContent = ({
-  title,
-  text,
-  textLink
-}: {
-  title: string
-  text: string
-  textLink: string
-}) => (
+const ActionContent = ({ title, text }: { title: string; text: string }) => (
   <>
     <h1 className={styles.actionTitle}>{title}</h1>
-    <p className={styles.actionText}>
-      {text} <span className={styles.link}>{textLink}</span>
-    </p>
+    <p className={styles.actionText}>{text}</p>
   </>
 )
 
@@ -33,11 +23,7 @@ const ActionTwitter = ({ slug }: { slug: string }) => {
       href={`https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`}
     >
       <Twitter />
-      <ActionContent
-        title="Have a comment?"
-        text="Hit me up"
-        textLink="@kremalicious"
-      />
+      <ActionContent title="Have a comment?" text="Hit me up @kremalicious" />
     </a>
   )
 }
@@ -47,8 +33,7 @@ const ActionCrypto = ({ toggleModal }: { toggleModal(): void }) => (
     <Bitcoin />
     <ActionContent
       title="Found something useful?"
-      text="Say thanks with"
-      textLink="Bitcoins or Ether"
+      text="Say thanks with Bitcoins or Ether"
     />
   </button>
 )
@@ -58,8 +43,7 @@ const ActionGitHub = ({ githubLink }: { githubLink: string }) => (
     <GitHub />
     <ActionContent
       title="Edit on GitHub"
-      text="Contribute to this post on"
-      textLink="GitHub"
+      text="Contribute to this post on GitHub"
     />
   </a>
 )
diff --git a/src/components/Post/PostMeta.module.scss b/src/components/Post/PostMeta.module.scss
index f0fc7b4a..83fa3339 100644
--- a/src/components/Post/PostMeta.module.scss
+++ b/src/components/Post/PostMeta.module.scss
@@ -82,4 +82,12 @@
     content: '#';
     margin-right: 1px;
   }
+
+  :global(.dark) & {
+    color: $brand-grey-light;
+
+    &::before {
+      color: $brand-grey;
+    }
+  }
 }
diff --git a/src/components/Post/PostTeaser.module.scss b/src/components/Post/PostTeaser.module.scss
index 76226a38..884b4466 100644
--- a/src/components/Post/PostTeaser.module.scss
+++ b/src/components/Post/PostTeaser.module.scss
@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 .postTitle {
   display: inline-block;
@@ -17,13 +18,17 @@
 }
 
 .empty {
+  @include media-frame;
+
   height: 100%;
   min-height: 80px;
-  display: flex;
-  align-items: center;
-  padding: $spacer / 4;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACaADAAQAAAABAAAACQAAAAAvQpmhAAAAHElEQVQYGWNgoBL4T8gcggoIGcBA0ASCCmhsBQBhFwX7u70C8QAAAABJRU5ErkJggg==);
 
-  .postTitle {
-    margin-top: 0;
+  a:hover & {
+    border-color: $link-color;
+  }
+
+  @media (min-width: $screen-md) {
+    min-height: 110px;
   }
 }
diff --git a/src/components/Post/PostTeaser.tsx b/src/components/Post/PostTeaser.tsx
index ab32440f..07f85992 100644
--- a/src/components/Post/PostTeaser.tsx
+++ b/src/components/Post/PostTeaser.tsx
@@ -17,15 +17,11 @@ export default function PostTeaser({
     <li>
       <Link to={slug} onClick={toggleSearch && toggleSearch}>
         {image ? (
-          <>
-            <Image fluid={image.childImageSharp.fluid} alt={title} />
-            <h4 className={styles.postTitle}>{title}</h4>
-          </>
+          <Image fluid={image.childImageSharp.fluid} alt={title} />
         ) : (
-          <div className={styles.empty}>
-            <h4 className={styles.postTitle}>{title}</h4>
-          </div>
+          <div className={styles.empty} />
         )}
+        <h4 className={styles.postTitle}>{title}</h4>
       </Link>
     </li>
   )
diff --git a/src/pages/photos.tsx b/src/pages/photos.tsx
index bae83446..54269099 100644
--- a/src/pages/photos.tsx
+++ b/src/pages/photos.tsx
@@ -14,15 +14,18 @@ const page = {
 }
 
 interface PhotoNode {
-  id: string
-  fields: { slug: string }
-  frontmatter: {
-    title: string
-    image: { childImageSharp: { fluid: FluidObject } }
+  node: {
+    id: string
+    fields: { slug: string }
+    frontmatter: {
+      title: string
+      type: string
+      image: { childImageSharp: { fluid: FluidObject } }
+    }
   }
 }
 
-const PhotoThumbs = ({ edges }: { edges: [{ node: PhotoNode }] }) =>
+const PhotoThumbs = ({ edges }: { edges: PhotoNode[] }) =>
   edges.map(({ node }) => {
     const { title, image } = node.frontmatter
     const { slug } = node.fields
@@ -42,7 +45,7 @@ export default function Photos({
   data,
   location
 }: {
-  data: { photos: { edges: [{ node: PhotoNode }] } }
+  data: { photos: { edges: PhotoNode[] } }
   location: Location
 }) {
   return (