/* No context defined. */
%article-layout {
display: grid;
grid-template-columns: $spacer-sm [content-start] 1fr [content-center-start] 3fr [content-center-end] 1fr [content-end] $spacer-sm; //magic numbers
grid-template-rows: repeat(10, auto);
margin-top: $spacer-base;
padding-bottom: $spacer-base;
.author-section {
grid-column: content-start / content-end;
}
.content {
display: flex;
grid-column: content-start / content-end;
flex-direction: column;
row-gap: $spacer-base;
}
// Left aligned elements
.toc {
grid-column: content-start / content-end;
}
.cta-sidebar {
grid-column: content-center-start / content-center-end;
grid-row: -1;
}
> * + * {
margin-top: $spacer-md;
}
super-quote,
long-quote,
pull-quote {
@extend %container-vertical-spacing-lg;
justify-self: center;
}
//Wrapper for contant that should not stretch
.centered-content {
display: flex;
align-items: center;
justify-content: center;
}
.centered-content-75 {
display: flex;
align-self: center;
justify-self: center;
width: 75%;
}
@media screen and (max-width: $grid-breakpoint-sm) {
.cta-sidebar {
grid-column: content-start / content-end;
margin-top: $spacer-base;
}
}
// Breakpoints
@media screen and (min-width: $grid-breakpoint-md) {
padding-right: $spacer-xxl;
padding-left: $spacer-xxl;
}
@media screen and (min-width: $grid-breakpoint-lg-xl) {
grid-template-columns: 1fr 11rem 5rem 2rem [content-start] 10rem [content-center-start] 30rem [content-center-end] 10rem [content-end] 2rem 5rem 11rem 1fr;
padding-right: $spacer-sm;
padding-left: $spacer-sm;
.author-section {
grid-column: 5 / 6;
grid-row: 1 / 2;
}
.content {
grid-area: content;
grid-row: 2 / 5;
}
// Left aligned elements
.toc,
.cta-sidebar {
align-self: start;
margin-top: $spacer-md;
//display: flex;
//flex-direction: column;
}
.toc {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.cta-sidebar {
grid-column: 2 / 4;
grid-row: 3 / 4;
margin-top: $spacer-base;
}
// Right aligned elements
.info-note {
grid-column: 7 / 9;
grid-row: 2/ 100;
align-self: start;
}
}
}
No notes defined.