mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 18:00:06 +01:00
photo titles
This commit is contained in:
parent
0180ad26b4
commit
a19a603923
@ -173,7 +173,6 @@ a {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
color: lighten($link-color, 10%);
|
||||
transform: translate3d(0, -.1rem, 0);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
@ -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>
|
||||
)}
|
||||
|
@ -10,7 +10,7 @@
|
||||
// Post/photo teaser
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry__teaser {
|
||||
.hentryImage {
|
||||
@include breakoutviewport();
|
||||
|
||||
max-width: none;
|
||||
|
@ -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>}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user