more photo style fixes, clean up footer

gatsby/createExifFields.js

@@ -55,10 +55,10 @@ const constructExifFields = (exifData, createNodeField, node) => {
     ExposureTime,
     FocalLength,
     ExposureBiasValue,
-    ExposureMode
+    ExposureMode,
+    LensModel
   } = exifData.exif
 
-  const model = `${Model}`
   const iso = `ISO ${ISO}`
   const fstop = `ƒ ${FNumber}`
   const focalLength = `${FocalLength}mm`
@@ -81,10 +81,11 @@ const constructExifFields = (exifData, createNodeField, node) => {
     name: 'exif',
     value: {
       iso,
-      model,
+      model: Model,
       fstop,
       shutterspeed,
       focalLength,
+      lensModel: LensModel,
       exposure,
       gps: { latitude, longitude }
     }

src/components/Layout.module.scss

@@ -42,14 +42,14 @@
     background-color: $body-background-color--dark;
     color: $text-color--dark;
     border-top-color: darken($brand-grey, 15%);
-    border-bottom-color: darken($brand-grey, 15%);
+    border-bottom-color: darken($body-background-color--dark, 3%);
-    box-shadow: 0 1px 4px darken($brand-main, 10%),
+    box-shadow: 0 1px 8px rgba(darken($brand-main, 15%), 0.1),
       0 -1px 4px darken($brand-main, 15%);
   }
 
   @media (min-width: $screen-sm) and (min-height: 500px) {
     margin-top: $spacer * 2.65;
-    margin-bottom: $spacer * 19; // height of footer
+    margin-bottom: $spacer * 18; // height of footer
     position: relative;
     z-index: 2;
     min-height: 500px;

src/components/atoms/Exif.module.scss

@@ -21,7 +21,7 @@
     display: block;
     flex: 1 1 20%;
     white-space: nowrap;
-    padding: $spacer / 1.5;
+    padding: $spacer $spacer / 1.5;
     border-bottom: 1px dashed $brand-grey-dimmed;
 
     &:first-child {
@@ -29,17 +29,18 @@
     }
 
     :global(.dark) & {
-      border-bottom-color: $brand-grey;
+      border-bottom-color: rgba($brand-grey, 0.6);
     }
   }
 
   @media (min-width: $screen-sm) {
     margin-bottom: 0;
+    font-size: $font-size-small;
 
     span {
       border-left: 1px dashed $brand-grey-dimmed;
       border-bottom: 0;
-      padding: $spacer;
+      padding: $spacer * 1.5 $spacer;
 
       &,
       &:first-child {
@@ -51,7 +52,7 @@
       }
 
       :global(.dark) & {
-        border-left-color: $brand-grey;
+        border-left-color: rgba($brand-grey, 0.6);
       }
     }
   }
@@ -62,5 +63,5 @@
   @include media-frame;
 
   overflow: hidden;
-  height: 160px;
+  height: 200px;
 }

src/components/atoms/Exif.tsx

@@ -8,6 +8,7 @@ interface ExifProps {
   fstop: string
   shutterspeed: string
   focalLength: string
+  lensModel: string
   exposure: string
   gps: {
     latitude: string
@@ -18,15 +19,17 @@ interface ExifProps {
 export default function Exif({ exif }: { exif: ExifProps }) {
   const { iso, model, fstop, shutterspeed, focalLength, exposure, gps } = exif
 
+  // iPhone lenses
+
   return (
     <aside className={styles.exif}>
       <div className={styles.data}>
         {model && <span title="Camera model">{model}</span>}
+        {focalLength && <span title="Focal length">{focalLength}</span>}
         {fstop && <span title="Aperture">{fstop}</span>}
         {shutterspeed && <span title="Shutter speed">{shutterspeed}</span>}
         {exposure && <span title="Exposure">{exposure}</span>}
         {iso && <span title="ISO">{iso}</span>}
-        {focalLength && <span title="Focal length">{focalLength}</span>}
       </div>
       {gps.latitude && (
         <div className={styles.map}>{gps && <ExifMap gps={gps} />}</div>

src/components/atoms/ExifMap.tsx

@@ -51,7 +51,7 @@ export default function ExifMap({
     <Map
       center={[latitude, longitude]}
       zoom={zoom}
-      height={160}
+      height={200}
       attribution={false}
       provider={isDarkMode ? providers['dark'] : providers['light']}
       metaWheelZoom={true}

src/components/molecules/IconLinks.module.scss

@@ -4,7 +4,8 @@
   text-align: center;
   width: 2rem;
   padding: $spacer / 4;
-  margin: 0;
+  margin-left: $spacer / 4;
+  margin-right: $spacer / 4;
   display: inline-block;
   color: $text-color-light;
 

src/components/molecules/Subscribe.module.scss

@@ -1,16 +0,0 @@
-@import 'variables';
-
-// Subscribe component
-.subscribe {
-  margin: $spacer auto;
-
-  p {
-    text-align: center;
-    margin: 0;
-  }
-}
-
-.title {
-  font-size: $font-size-h5;
-  margin-bottom: $spacer / 2;
-}

src/components/molecules/Subscribe.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import IconLinks from './IconLinks'
-import styles from './Subscribe.module.scss'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
-
-export default function Subscribe() {
-  const { rss, jsonfeed } = useSiteMetadata()
-  const links = [rss, jsonfeed]
-
-  return (
-    <aside className={styles.subscribe}>
-      <h1 className={styles.title}>Subscribe</h1>
-      <IconLinks links={links} />
-    </aside>
-  )
-}

src/components/molecules/ThemeSwitch.module.scss

@@ -4,9 +4,7 @@
 .themeSwitch {
   position: relative;
   display: inline-block;
-  margin-right: $spacer;
+  margin-bottom: $spacer * $line-height;
-  opacity: 0.75;
-  bottom: -0.1rem;
 
   svg {
     width: 0.8rem;

src/components/molecules/Vcard.module.scss

@@ -1,10 +1,14 @@
 @import 'variables';
 @import 'mixins';
 
+.vcard {
+  margin-bottom: $spacer * 2;
+}
+
 .avatar {
   @include media-frame;
 
-  margin-bottom: ($spacer / 2);
+  margin-bottom: $spacer / 3;
 
   &,
   img {
@@ -16,7 +20,7 @@
 .description {
   font-size: $font-size-h5;
   margin-top: 0;
-  margin-bottom: ($spacer / 4);
+  margin-bottom: ($spacer / $line-height);
 
   a {
     display: block;

src/components/molecules/Vcard.tsx

@@ -23,12 +23,13 @@ const query = graphql`
 
 export default function Vcard() {
   const data = useStaticQuery(query)
-  const { twitter, github, facebook, name, uri } = useSiteMetadata().author
+  const { author, rss, jsonfeed } = useSiteMetadata()
+  const { twitter, github, name, uri } = author
   const avatar = data.avatar.edges[0].node.childImageSharp.fixed
-  const links = [twitter, github, facebook]
+  const links = [twitter, github, rss, jsonfeed]
 
   return (
-    <div className="vcard author">
+    <div className={styles.vcard}>
       <Img
         className={styles.avatar}
         fixed={avatar}

src/components/organisms/Footer.module.scss

@@ -22,6 +22,20 @@
   }
 }
 
+.theme {
+  margin: $spacer auto;
+
+  p {
+    text-align: center;
+    margin: 0;
+  }
+}
+
+.themeTitle {
+  font-size: $font-size-h5;
+  margin-bottom: $spacer / 2;
+}
+
 .copyright {
   padding-top: $spacer;
   padding-bottom: $spacer;
@@ -31,22 +45,28 @@
     font-size: $font-size-mini;
   }
 
+  a,
+  button {
+    margin-left: $spacer;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
   svg {
     width: 15px;
     height: 15px;
-    margin-right: 0.2em;
+    margin-right: 0.25rem;
     margin-bottom: -2px;
     display: inline-block;
   }
 }
 
 .btc {
-  margin-left: ($spacer / 2);
-
   // stylelint-disable-next-line
   svg {
     width: 10px;
-    margin-right: 0;
   }
 
   code {

src/components/organisms/Footer.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Container from '../atoms/Container'
 import Vcard from '../molecules/Vcard'
-import Subscribe from '../molecules/Subscribe'
+import ThemeSwitch from '../molecules/ThemeSwitch'
 import ModalThanks from '../molecules/ModalThanks'
 
 import { ReactComponent as Github } from '../../images/github.svg'
@@ -28,9 +28,6 @@ function Copyright({
         <a href={uri} rel="me">
           {name}
         </a>
-      </p>
-
-      <p>
         <a href={`${github}/blog`}>
           <Github />
           View source
@@ -58,8 +55,9 @@ export default function Footer() {
   return (
     <footer role="contentinfo" className={styles.footer}>
       <Container>
+        <ThemeSwitch />
         <Vcard />
-        <Subscribe />
+
         <Copyright showModal={showModal} toggleModal={toggleModal} />
       </Container>
     </footer>

src/components/organisms/Header.tsx

@@ -3,7 +3,6 @@ import { Link } from 'gatsby'
 import Container from '../atoms/Container'
 import Search from '../Search'
 import Menu from '../molecules/Menu'
-import ThemeSwitch from '../molecules/ThemeSwitch'
 import { ReactComponent as Logo } from '../../images/logo.svg'
 
 import styles from './Header.module.scss'
@@ -20,7 +19,6 @@ export default function Header() {
           </h1>
 
           <nav role="navigation" className={styles.nav}>
-            <ThemeSwitch />
             <Search lng="en" />
             <Menu />
           </nav>

src/styles/_mixins.scss

@@ -244,12 +244,12 @@
   border-radius: $border-radius;
   box-shadow: 0 1px 3px rgba($brand-grey, 0.2);
 
-  :global(.dark) & {
-    box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15),
-      0 5px 16px rgba(darken($brand-main, 20%), 0.15);
-  }
-
   @media (min-width: $screen-sm) {
     border: 2px solid transparent;
   }
+
+  :global(.dark) & {
+    box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.25),
+      0 5px 16px rgba(darken($brand-main, 20%), 0.25);
+  }
 }

src/templates/Post.tsx

@@ -75,6 +75,7 @@ export const pageQuery = graphql`
               fstop
               shutterspeed
               focalLength
+              lensModel
               exposure
               gps {
                 latitude