1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 18:00:06 +01:00

photo titles

This commit is contained in:
Matthias Kretschmann 2018-09-07 01:00:13 +02:00
parent 0180ad26b4
commit a19a603923
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 52 additions and 33 deletions

View File

@ -173,7 +173,6 @@ a {
&:focus {
outline: 0;
color: lighten($link-color, 10%);
transform: translate3d(0, -.1rem, 0);
}
&:active {

View File

@ -26,7 +26,7 @@ const Post = ({ data, location }) => {
<PostLead post={post} />
{image && (
<figure className={styles.hentry__teaser}>
<figure className={styles.hentryImage}>
<Image fluid={image.childImageSharp.fluid} alt={title} />
</figure>
)}

View File

@ -10,7 +10,7 @@
// Post/photo teaser
/////////////////////////////////////
.hentry__teaser {
.hentryImage {
@include breakoutviewport();
max-width: none;

View File

@ -22,17 +22,24 @@ const Posts = ({ data, location, pageContext }) => {
return (
<article className={styles.hentry} key={node.id}>
<PostTitle type={type} slug={slug} linkurl={linkurl} title={title} />
{type !== 'photo' && (
<PostTitle type={type} slug={slug} linkurl={linkurl} title={title} />
)}
{image && (
<figure className={styles.hentry__image}>
<figure className={styles.hentryImage}>
<Link to={slug}>
<Image fluid={image.childImageSharp.fluid} alt={title} />
{type === 'photo' && (
<figcaption className={styles.hentryImageTitle}>
{title}
</figcaption>
)}
</Link>
</figure>
)}
<PostLead post={node} />
{type === 'post' && <PostLead post={node} />}
{type === 'post' && <PostMore to={slug}>Continue Reading</PostMore>}

View File

@ -15,12 +15,51 @@
padding-top: $spacer * 3;
padding-bottom: $spacer * 3;
}
a {
position: relative;
display: block;
}
}
.hentryImageTitle {
transition: .1s ease-out;
font-size: $font-size-h3;
font-family: $font-family-headings;
line-height: $line-height-headings;
font-weight: $font-weight-headings;
letter-spacing: -.02em;
margin: 0;
position: absolute;
top: 10%;
padding: $spacer / 3 $spacer;
background: rgba($link-color, .85);
color: #fff;
text-shadow: 0 1px 0 #000;
left: 0;
opacity: 0;
transform: translate3d(0, -20px, 0);
}
.hentryImage {
composes: hentryImage from './Post.module.scss';
a:hover {
> div {
border-color: $link-color !important;
}
.hentryImageTitle {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
.archiveTitle {
@include heading-band();
font-size: $font-size-h4;
font-size: $font-size-h3;
margin-top: 0;
margin-bottom: 0;
@ -28,29 +67,3 @@
margin-left: -117%;
}
}
// Post/photo teaser
/////////////////////////////////////
.hentry__image {
@include breakoutviewport();
max-width: none;
display: block;
margin-top: $spacer * 1.5;
margin-bottom: $spacer * 1.5;
> div {
@include media-frame();
border-radius: 0;
@media (min-width: $screen-sm) {
border-radius: $border-radius;
}
}
img {
border-radius: 0;
}
}