diff --git a/src/components/atoms/Exif.module.scss b/src/components/atoms/Exif.module.scss index 0f447825..9a6a9efa 100644 --- a/src/components/atoms/Exif.module.scss +++ b/src/components/atoms/Exif.module.scss @@ -2,7 +2,7 @@ @import 'mixins'; .exif { - margin-top: -($spacer); + margin-top: -($spacer * $line-height); margin-bottom: $spacer * 2; } diff --git a/src/components/atoms/Image.module.scss b/src/components/atoms/Image.module.scss index f1d7b3e3..b5c7cc57 100644 --- a/src/components/atoms/Image.module.scss +++ b/src/components/atoms/Image.module.scss @@ -1,20 +1,54 @@ +@import 'variables'; @import 'mixins'; -.imageWrap { +.imageTitle { + @include transition(); + + font-size: $font-size-h3; + font-family: $font-family-headings; + line-height: $line-height-headings; + font-weight: $font-weight-headings; + font-style: normal; + text-align: left; + margin: 0; + position: absolute; + top: 10%; + padding: $spacer / 3 $spacer; + background: rgba($link-color, 0.85); + color: #fff !important; + text-shadow: 0 1px 0 #000; + left: 0; + opacity: 0; + transform: translate3d(0, -20px, 0); +} + +.image { @include media-frame; + @include breakoutviewport; - margin-left: auto; - margin-right: auto; - margin-bottom: $spacer; + max-width: none; + margin: $spacer * $line-height auto; display: block; + border-radius: $border-radius; - @media (min-width: 940px) { - max-width: 940px; - border-radius: $border-radius; - overflow: hidden; + a & { + position: relative; + display: block; } - a:hover & { + // single photo post teasers + &:only-child { + margin-top: 0; + margin-bottom: 0; + } + + a:hover &, + a:focus & { border-color: $link-color !important; + + .imageTitle { + opacity: 1; + transform: translate3d(0, 0, 0); + } } } diff --git a/src/components/atoms/Image.tsx b/src/components/atoms/Image.tsx index 0916c3cc..d0d0df44 100644 --- a/src/components/atoms/Image.tsx +++ b/src/components/atoms/Image.tsx @@ -1,17 +1,14 @@ import React from 'react' import { graphql } from 'gatsby' import Img from 'gatsby-image' -import styles from './Image.module.scss' import { ImageProps } from '../../@types/Image' +import styles from './Image.module.scss' -export const Image = ({ fluid, fixed, alt }: ImageProps) => ( - {alt} +export const Image = ({ title, fluid, fixed, alt, original }: ImageProps) => ( +
+ {alt} + {title &&
{title}
} +
) export const imageSizeDefault = graphql` diff --git a/src/components/molecules/Featured.module.scss b/src/components/molecules/Featured.module.scss index bba61492..c5e2aab0 100644 --- a/src/components/molecules/Featured.module.scss +++ b/src/components/molecules/Featured.module.scss @@ -47,6 +47,10 @@ } } + figure { + margin: 0; + } + :global(.gatsby-image-wrapper) { margin-bottom: 0; } diff --git a/src/components/molecules/RelatedPosts.module.scss b/src/components/molecules/RelatedPosts.module.scss index e7de8fef..0adbfe16 100644 --- a/src/components/molecules/RelatedPosts.module.scss +++ b/src/components/molecules/RelatedPosts.module.scss @@ -35,6 +35,10 @@ } } + figure { + margin: 0; + } + img { margin-bottom: 0; } diff --git a/src/pages/photos.module.scss b/src/pages/photos.module.scss index 6ab9415a..6ece0741 100644 --- a/src/pages/photos.module.scss +++ b/src/pages/photos.module.scss @@ -21,6 +21,8 @@ } figure { + margin: 0; + > div { margin: 0; } diff --git a/src/pages/photos.tsx b/src/pages/photos.tsx index 6d686749..300646e5 100644 --- a/src/pages/photos.tsx +++ b/src/pages/photos.tsx @@ -1,9 +1,9 @@ import React from 'react' import { graphql, Link } from 'gatsby' import Page from '../templates/Page' -import PostImage from '../templates/Post/PostImage' -import styles from './photos.module.scss' import { Post } from '../@types/Post' +import { Image } from '../components/atoms/Image' +import styles from './photos.module.scss' const page = { frontmatter: { @@ -21,7 +21,7 @@ const PhotoThumb = ({ photo }: { photo: Post }) => {
{image && ( - + {title} )}
diff --git a/src/styles/_code.scss b/src/styles/_code.scss index d36fca14..f6c6e82c 100644 --- a/src/styles/_code.scss +++ b/src/styles/_code.scss @@ -31,6 +31,8 @@ kbd { } pre { + @include breakoutviewport; + position: relative; display: block; padding: 0; @@ -45,11 +47,6 @@ pre { -webkit-overflow-scrolling: touch; max-height: 800px; - @media (min-width: $screen-sm) { - margin-left: -($spacer); - margin-right: -($spacer); - } - code { padding: $spacer / 2; white-space: pre; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index ba2e7949..52b57f7d 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -77,7 +77,7 @@ $color-headings--dark: $brand-main-light; // Spacing ///////////////////////////////////// -$spacer: ($font-size-base * $line-height); +$spacer: 1.7rem; $padding-base-vertical: 0.75rem; $padding-base-horizontal: 1.25rem; diff --git a/src/templates/Page.tsx b/src/templates/Page.tsx index 00ec0371..336c3a0a 100644 --- a/src/templates/Page.tsx +++ b/src/templates/Page.tsx @@ -1,9 +1,9 @@ import React from 'react' import { Helmet } from 'react-helmet' +import { Post } from '../@types/Post' import SEO from '../components/atoms/SEO' import Layout from '../components/Layout' import styles from './Page.module.scss' -import { Post } from '../@types/Post' export default function Page({ title, diff --git a/src/templates/Post/PostImage.module.scss b/src/templates/Post/PostImage.module.scss deleted file mode 100644 index e0435419..00000000 --- a/src/templates/Post/PostImage.module.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import 'variables'; -@import 'mixins'; - -.imageTitle { - transition: 0.1s ease-out; - font-size: $font-size-h3; - font-family: $font-family-headings; - line-height: $line-height-headings; - font-weight: $font-weight-headings; - font-style: normal; - text-align: left; - margin: 0; - position: absolute; - top: 10%; - padding: $spacer / 3 $spacer; - background: rgba($link-color, 0.85); - color: #fff !important; - text-shadow: 0 1px 0 #000; - left: 0; - opacity: 0; - transform: translate3d(0, -20px, 0); -} - -.image { - display: block; - - a & { - position: relative; - display: block; - } - - a:hover & { - .imageTitle { - opacity: 1; - transform: translate3d(0, 0, 0); - } - } -} diff --git a/src/templates/Post/PostImage.tsx b/src/templates/Post/PostImage.tsx deleted file mode 100644 index b7ed31c5..00000000 --- a/src/templates/Post/PostImage.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { Image } from '../../components/atoms/Image' -import styles from './PostImage.module.scss' -import { ImageProps } from '../../@types/Image' - -const PostImage = ({ title, fluid, fixed, alt, original }: ImageProps) => ( -
- {alt} - {title &&
{title}
} -
-) - -export default PostImage diff --git a/src/templates/Post/PostLead.module.scss b/src/templates/Post/PostLead.module.scss index 1a514e99..4f5f527b 100644 --- a/src/templates/Post/PostLead.module.scss +++ b/src/templates/Post/PostLead.module.scss @@ -2,9 +2,10 @@ .lead { font-size: $font-size-large; - margin-bottom: $spacer; + margin-bottom: $spacer * $line-height; } .index { font-size: $font-size-base; + margin-top: $spacer * $line-height; } diff --git a/src/templates/Post/PostLinkActions.tsx b/src/templates/Post/PostLinkActions.tsx index c08da221..b00cc39c 100644 --- a/src/templates/Post/PostLinkActions.tsx +++ b/src/templates/Post/PostLinkActions.tsx @@ -2,8 +2,8 @@ import React from 'react' import { Link } from 'gatsby' import { ReactComponent as Forward } from '../../images/forward.svg' import { ReactComponent as Infinity } from '../../images/infinity.svg' -import styles from './PostLinkActions.module.scss' import stylesPostMore from './PostMore.module.scss' +import styles from './PostLinkActions.module.scss' const PostLinkActions = ({ linkurl, diff --git a/src/templates/Post/PostTitle.module.scss b/src/templates/Post/PostTitle.module.scss index e8eb1642..173b5868 100644 --- a/src/templates/Post/PostTitle.module.scss +++ b/src/templates/Post/PostTitle.module.scss @@ -8,7 +8,7 @@ font-size: $font-size-h1; color: $color-headings; margin-top: 0; - margin-bottom: $spacer; + margin-bottom: $spacer * $line-height; :global(.dark) & { color: $color-headings--dark; diff --git a/src/templates/Post/index.module.scss b/src/templates/Post/index.module.scss index 86a915dd..d6e00ccb 100644 --- a/src/templates/Post/index.module.scss +++ b/src/templates/Post/index.module.scss @@ -54,13 +54,3 @@ } } } - -.imageWrap { - @include breakoutviewport(); - - figure { - max-width: none; - margin-top: $spacer * 1.5; - margin-bottom: 0; - } -} diff --git a/src/templates/Post/index.tsx b/src/templates/Post/index.tsx index fe2d4928..8e564eb5 100644 --- a/src/templates/Post/index.tsx +++ b/src/templates/Post/index.tsx @@ -1,19 +1,19 @@ import React from 'react' import { Helmet } from 'react-helmet' import { graphql } from 'gatsby' +import { Post as PostMetadata } from '../../@types/Post' import Layout from '../../components/Layout' -import PostImage from './PostImage' +import Exif from '../../components/atoms/Exif' +import SEO from '../../components/atoms/SEO' +import RelatedPosts from '../../components/molecules/RelatedPosts' import PostTitle from './PostTitle' import PostLead from './PostLead' import PostContent from './PostContent' import PostActions from './PostActions' import PostLinkActions from './PostLinkActions' -import SEO from '../../components/atoms/SEO' import PostMeta from './PostMeta' -import Exif from '../../components/atoms/Exif' -import RelatedPosts from '../../components/molecules/RelatedPosts' import styles from './index.module.scss' -import { Post as PostMetadata } from '../../@types/Post' +import { Image } from '../../components/atoms/Image' export default function Post({ data, @@ -40,13 +40,11 @@ export default function Post({ {type === 'post' && } {type === 'photo' && } {image && ( -
- -
+ {title} )} {image && image.fields && } diff --git a/src/templates/Posts.tsx b/src/templates/Posts.tsx index 13fe2d3d..d76145e2 100644 --- a/src/templates/Posts.tsx +++ b/src/templates/Posts.tsx @@ -1,18 +1,17 @@ import React from 'react' import { Link, graphql } from 'gatsby' +import { Post } from '../@types/Post' import Layout from '../components/Layout' -import PostImage from './Post/PostImage' +import Pagination from '../components/molecules/Pagination' +import Featured from '../components/molecules/Featured' import PostTitle from './Post/PostTitle' import PostLead from './Post/PostLead' import PostContent from './Post/PostContent' import PostMore from './Post/PostMore' import PostLinkActions from './Post/PostLinkActions' import SEO from '../components/atoms/SEO' -import Pagination from '../components/molecules/Pagination' -import Featured from '../components/molecules/Featured' import styles from './Posts.module.scss' -import stylesPost from './Post/index.module.scss' -import { Post } from '../@types/Post' +import { Image } from '../components/atoms/Image' export default function Posts({ data, @@ -43,14 +42,12 @@ export default function Posts({ {image && ( -
- -
+ {title} )}