diff --git a/css/styles.css b/css/styles.css index 2094c32230f230af359d6b37095a570753fcd044..ad2c50c0ca2d3083b7266eaea33fa835f2abc6ec 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1996,24 +1996,27 @@ svg:not(:root) { max-width: calc(75rem - 20.75rem); } @media (min-width: 48.06rem) { .uw-node.uw-node__with-sidebar .uw-node__grid { - flex-direction: row; } - .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width { - max-width: calc(75rem - 20.75rem); } - .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow { - max-width: 100%; } } - @media (min-width: 48.06rem) and (min-width: 48.06rem) { + flex-direction: row; } } + .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width { + max-width: calc(75rem - 20.75rem); } + .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow { + max-width: 100%; } + @media (min-width: 48.06rem) { .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--narrow { + margin: 0 auto; max-width: 31rem; } } - @media (min-width: 48.06rem) { - .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide { - margin: inherit; - max-width: 100%; } } - @media (min-width: 48.06rem) and (min-width: 48.06rem) { + .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide { + max-width: 100%; } + @media (min-width: 48.06rem) { .uw-node.uw-node__with-sidebar .uw-node__grid .uw-contained-width--wide { + margin: 0 auto; max-width: 47.0625rem; } } - @media (min-width: 48.06rem) { + .uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width { + margin: inherit; + max-width: 100vw; + padding: 0; } + @media (min-width: 48.06rem) { .uw-node.uw-node__with-sidebar .uw-node__grid .uw-full-width { - margin: inherit; max-width: calc(100vw - 18.75rem); } } .uw-node.uw-node__with-sidebar .uw-node__node { @@ -2033,6 +2036,11 @@ svg:not(:root) { .uw-node.uw-node__with-sidebar .uw-node__sidebar .layout { max-width: inherit; } +@media (min-width: 48.06rem) { + .uw-section-has-full-width .uw-node__grid .uw-node__sidebar { + margin-left: 0; + padding-left: 1rem; } } + .l-section { margin-bottom: 2.5rem; } diff --git a/source/_patterns/03-layouts/node/_node.scss b/source/_patterns/03-layouts/node/_node.scss index b4ffca873e684bee84f21c9b368b41dfe46ac2d8..bb2d611b57b763dc699086629538877c1b85c3e3 100644 --- a/source/_patterns/03-layouts/node/_node.scss +++ b/source/_patterns/03-layouts/node/_node.scss @@ -18,26 +18,32 @@ $sidebar-width: 18.75rem; } @include medium { flex-direction: row; - .uw-contained-width{ - max-width:calc(75rem - 20.75rem); - } - .uw-contained-width--narrow{ - max-width:100%; - @include medium { - max-width: 31rem; - } + } + .uw-contained-width{ + max-width:calc(75rem - 20.75rem); + } + .uw-contained-width--narrow{ + max-width:100%; + @include medium { + margin:0 auto; + max-width: 31rem; } - .uw-contained-width--wide{ - margin:inherit; - max-width:100%; - @include medium { - max-width: 47.0625rem; - } + } + .uw-contained-width--wide{ + + max-width:100%; + @include medium { + margin:0 auto; + max-width: 47.0625rem; } - .uw-full-width{ - margin:inherit; + } + .uw-full-width{ + margin:inherit; + max-width:100vw; + @include medium{ max-width:calc(100vw - 18.75rem); } + padding:0; } } .uw-node__node{ @@ -60,3 +66,15 @@ $sidebar-width: 18.75rem; } } } +// Class appears when full width content loads with sidebar on page +.uw-section-has-full-width { + .uw-node__grid { + .uw-node__sidebar { + @include medium { + margin-left: 0; + padding-left:1rem; + } + } + } +} + diff --git a/source/_patterns/03-layouts/node/node.twig b/source/_patterns/03-layouts/node/node.twig index 2febd7b6ae4c5d1dcfea077e8fefdff1284a7a41..80e8e6e030f701eef9bc11bdbb07292e03601501 100644 --- a/source/_patterns/03-layouts/node/node.twig +++ b/source/_patterns/03-layouts/node/node.twig @@ -12,20 +12,17 @@ <div {{ attributes.addClass(classes) }}"> <div class="uw-node__grid"> - <article class="uw-node__node"> {% block content %} This is the node content {% endblock %} </article> - {% if has_sidebar == 'Yes' %} - <aside class="uw-node__sidebar"> - {% block sidebar_content %} - This is the sidebar - {% endblock %} - </aside> + <aside class="uw-node__sidebar"> + {% block sidebar_content %} + This is the sidebar + {% endblock %} + </aside> {% endif %} - </div> </div>