123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- // 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;
- }
- }
|