diff --git a/gatsby/createExifFields.js b/gatsby/createExifFields.js index 6f39d518..c17312b0 100644 --- a/gatsby/createExifFields.js +++ b/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 } } diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index ada64bc4..7f516f15 100644 --- a/src/components/Layout.module.scss +++ b/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%); - box-shadow: 0 1px 4px darken($brand-main, 10%), + border-bottom-color: darken($body-background-color--dark, 3%); + 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; diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index c47c8fda..797a72a3 100644 --- a/src/components/atoms/Exif.module.scss +++ b/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; } diff --git a/src/components/atoms/Exif.tsx b/src/components/atoms/Exif.tsx index 18c49cf2..fdf05876 100644 --- a/src/components/atoms/Exif.tsx +++ b/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 ( - ) -} diff --git a/src/components/molecules/ThemeSwitch.module.scss b/src/components/molecules/ThemeSwitch.module.scss index 4735aaa9..69e852a0 100644 --- a/src/components/molecules/ThemeSwitch.module.scss +++ b/src/components/molecules/ThemeSwitch.module.scss @@ -4,9 +4,7 @@ .themeSwitch { position: relative; display: inline-block; - margin-right: $spacer; - opacity: 0.75; - bottom: -0.1rem; + margin-bottom: $spacer * $line-height; svg { width: 0.8rem; diff --git a/src/components/molecules/Vcard.module.scss b/src/components/molecules/Vcard.module.scss index 9f025617..63c125db 100644 --- a/src/components/molecules/Vcard.module.scss +++ b/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; diff --git a/src/components/molecules/Vcard.tsx b/src/components/molecules/Vcard.tsx index 68a5765e..94201d97 100644 --- a/src/components/molecules/Vcard.tsx +++ b/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 ( -
+
{name} -

- -

View source @@ -58,8 +55,9 @@ export default function Footer() { return (

diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx index 375870da..1aab7517 100644 --- a/src/components/organisms/Header.tsx +++ b/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() { diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 2583af2d..ea23e298 100644 --- a/src/styles/_mixins.scss +++ b/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); + } } diff --git a/src/templates/Post.tsx b/src/templates/Post.tsx index db634e94..34a6e3e8 100644 --- a/src/templates/Post.tsx +++ b/src/templates/Post.tsx @@ -75,6 +75,7 @@ export const pageQuery = graphql` fstop shutterspeed focalLength + lensModel exposure gps { latitude