74 lines
981 B
SCSS
74 lines
981 B
SCSS
// Teaser
|
|
//
|
|
// Styles for teasers, typically lists of linked excerpts.
|
|
//
|
|
// Styleguide: Component.Teaser
|
|
|
|
a.teaser {
|
|
display: block;
|
|
//
|
|
&:hover {
|
|
outline: 0.5em solid lighten($grey,5%);
|
|
background: lighten($grey,5%);
|
|
//
|
|
.title,
|
|
.subtitle {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content .teaser,
|
|
.teaser {
|
|
*.title {
|
|
margin-bottom: 0;
|
|
}
|
|
//
|
|
.subtitle {}
|
|
.title + .subtitle {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.teaser + .teaser {
|
|
margin-top: $gap;
|
|
}
|
|
|
|
.media.teaser {
|
|
display: flex;
|
|
//
|
|
.media-left {
|
|
width: 12em;
|
|
//
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.media-list .media,
|
|
.media-list .media + .media {
|
|
margin-bottom: $gap;
|
|
}
|
|
|
|
.media-list .teaser {
|
|
.media-left {
|
|
height: 7rem;
|
|
overflow: hidden;
|
|
img + .byline {
|
|
display: none;
|
|
}
|
|
}
|
|
&:hover {
|
|
.media-left {
|
|
img {
|
|
display: none;
|
|
}
|
|
.byline {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|