97 lines
1.6 KiB
SCSS
97 lines
1.6 KiB
SCSS
// Hero
|
|
//-------------------------------
|
|
|
|
// Hero heading colors
|
|
.hero-heading {
|
|
&-blog h1 {
|
|
font-size: 3.25rem;
|
|
margin: auto 5rem;
|
|
}
|
|
&-post h1 {
|
|
font-size: 4.5rem;
|
|
margin: auto 5rem;
|
|
}
|
|
h1 {
|
|
color: $hero-heading-color!important;
|
|
}
|
|
span {
|
|
color: $hero-date-color!important;
|
|
}
|
|
a {
|
|
color: $hero-heading-color!important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.hero-heading
|
|
h1 {
|
|
font-size: 2rem;
|
|
margin: initial;
|
|
}
|
|
}
|
|
|
|
// Hero hover dummy class, used only in blog layout
|
|
.hero-hov {
|
|
background: transparent;
|
|
transition: background .25s ease;
|
|
|
|
&:hover {
|
|
background: rgba(0,0,0,.5);
|
|
}
|
|
}
|
|
|
|
// Oversized hero in post layout
|
|
.bleed-hero-container {
|
|
width: 130%;
|
|
height: 130%;
|
|
margin: 0 -15% 0 -15%;
|
|
}
|
|
@media (max-width: 48rem) {
|
|
.bleed-hero-container {
|
|
width: 110%;
|
|
margin: 0 -5% 0- 5%;
|
|
}
|
|
}
|
|
|
|
// Container for hero image source link
|
|
.post-source-img {
|
|
background-color: rgba(0,0,0,.5);
|
|
position: absolute;
|
|
visibility: hidden;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
span {
|
|
font-size: .85em;
|
|
padding: .5rem;
|
|
}
|
|
|
|
.source {
|
|
color: #fff;
|
|
padding: .5rem;
|
|
}
|
|
|
|
.source-text {
|
|
color: #ccc;
|
|
margin-left: 3rem;
|
|
}
|
|
|
|
|
|
&:hover {
|
|
visibility: visible;
|
|
transition: all 0.5s ease;
|
|
}
|
|
&:before {
|
|
position: absolute;
|
|
font-family: 'icomoon';
|
|
content: '\e894';
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: .5rem .75rem;
|
|
visibility: visible;
|
|
}
|
|
&:hover:before {
|
|
color: #fff;
|
|
}
|
|
}
|