Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Article Grid
- //
- // The Article Grid is a CSS Grid algorithm specifically created for the single article layout.
- // It supports a side area called `social` that snaps to the second row on the left at desktop-xl
- // in response to `author` becoming a full row. On small screens it is single column.
- //
- // The Article Grid algorithm is only responsible for position the _outer most_ elements of
- // the single article contents.
- //
- // Markup: a-article-grid.html
- //
- // Style Guide: Algorithms.ArticleGrid
- @import '~@setup';
- .a-article-grid {
- @supports( display: grid ) {
- display: grid;
- grid-gap: $spacer-050;
- grid-template-columns: 100%;
- @include breakpoint( tablet ) {
- grid-template-columns: repeat( 2, 1fr );
- grid-template-rows: repeat( 3, auto );
- grid-gap: $spacer-1;
- }
- }
- @include breakpoint( desktop-xl ) {
- @supports( display: grid ) {
- grid-template-columns: repeat( 6, 1fr );
- grid-column-gap: $spacer-2;
- }
- }
- }
- .a-article-grid__main,
- .a-article-grid__header {
- @include breakpoint( tablet ) {
- @supports( display: grid ) {
- grid-column: 1 / -1;
- }
- }
- }
- .a-article-grid__main {
- width: 100%;
- @include breakpoint( desktop-max ) {
- display: initial; // This resets and issue with pmc-a-grid and resizing images that have inline widths larger than the viewport.
- }
- @include breakpoint( desktop-xl ) {
- @supports( display: grid ) {
- width: initial;
- grid-column: 2 / -1;
- }
- }
- }
- .a-article-grid__author {
- @include breakpoint( desktop-xl ) {
- @supports( display: grid ) {
- grid-column: 1 / -1;
- }
- }
- }
- .a-article-grid__author,
- .a-article-grid__social {
- @include breakpoint( mobile-max ) {
- display: flex;
- justify-content: center;
- }
- @include breakpoint( tablet ) {
- float: left;
- width: calc( 50% - #{$spacer-1} );
- @supports( display: grid ) {
- width: initial;
- }
- }
- }
- .a-article-grid__social {
- @include clearfix;
- }
Add Comment
Please, Sign In to add comment