105 lines
1.8 KiB
SCSS
105 lines
1.8 KiB
SCSS
// Centered page, post titles and subtitles
|
|
//-------------------------------
|
|
|
|
.page-title-container,
|
|
.post-title-container {
|
|
width: 100%;
|
|
margin-bottom: 6rem;
|
|
height: 20rem;
|
|
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
h1 {
|
|
font-weight: $base-font-weight-bold;
|
|
font-size: $post-title-size;
|
|
border: 0; // reset
|
|
a {
|
|
display: block; // slide border needs to cover the whole heading
|
|
@include border-slide(left)
|
|
}
|
|
}
|
|
|
|
// heading container
|
|
.heading-container {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
}
|
|
|
|
// Post meta under post title
|
|
.post-meta {
|
|
font-weight: $base-font-weight;
|
|
font-size: 22px;
|
|
color: var(--text-color-light);
|
|
|
|
span {
|
|
display: inline-block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.85em;
|
|
|
|
a {
|
|
color: var(--text-color-light);
|
|
text-transform: lowercase;
|
|
margin: .2em .25em;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.page-title,
|
|
.post-title {
|
|
height: 10rem;
|
|
margin-bottom: 2rem;
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
}
|
|
.post-meta {
|
|
font-size: $mobile-font-size;
|
|
}
|
|
}
|
|
|
|
// Hero layout off - blog post titles
|
|
//-------------------------------
|
|
.post-title-container-nohero {
|
|
margin-bottom: 4rem;
|
|
text-align: center;
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: $blog-title-size;
|
|
}
|
|
}
|
|
|
|
.post-meta-nohero {
|
|
margin-top: 0.5rem;
|
|
color: var(--text-color-light);
|
|
font-weight: $base-font-weight;
|
|
font-size: 0.75em;
|
|
|
|
a {
|
|
color: var(--text-color-light);
|
|
margin: 0 .25em;
|
|
text-transform: lowercase;
|
|
}
|
|
}
|
|
|
|
.post-meta-link-nohero {
|
|
margin: 0 .5em 0 .5em;
|
|
}
|
|
|
|
.no-hero-margin {
|
|
margin-bottom: 0rem; // margin reset
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.post-title-container-nohero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|