diff --git a/css/styles.css b/css/styles.css index bb2386d0ed55930f262ec76e018348b514776bab..363ab4c406c34cf1008a00dbb4c6ef07e581e9ec 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1923,6 +1923,35 @@ svg:not(:root) { margin: 0 0 0 1rem; order: 1; } +.uw-node { + width: 100%; } + .uw-node__grid { + display: grid; + grid-gap: 1rem; + grid-template-columns: 100%; } + @media (min-width: 48.06rem) { + .uw-node__grid { + grid-template-columns: 70% 30%; } } + .uw-node__node { + grid-column: 1 / 2; + grid-row: 1 / 2; } + @media (min-width: 48.06rem) { + .uw-node__node { + grid-column: 1 / 3; } } + .uw-node__node--with-sidebar { + grid-column: 1 / 2; + grid-row: 1 / 2; } + @media (min-width: 48.06rem) { + .uw-node__node--with-sidebar { + grid-column: 1 / 2; } } + .uw-node__sidebar { + grid-column: 1 / 2; + grid-row: 2 / 3; } + @media (min-width: 48.06rem) { + .uw-node__sidebar { + grid-column: 2 / 3; + grid-row: 1 / 2; } } + .l-section { margin-bottom: 2.5rem; } diff --git a/source/_patterns/03-layouts/node/_node.scss b/source/_patterns/03-layouts/node/_node.scss new file mode 100644 index 0000000000000000000000000000000000000000..c34b2a9d739e61938b1a9b5985ec97c06c868997 --- /dev/null +++ b/source/_patterns/03-layouts/node/_node.scss @@ -0,0 +1,43 @@ +$sidebar-width: 300px; + +.uw-node { + width: 100%; + + &__grid { + display: grid; + grid-gap: 1rem; + grid-template-columns: 100%; + + @include medium { + grid-template-columns: 70% 30%; + } + } + + &__node { + grid-column: 1 / 2; + grid-row: 1 / 2; + + @include medium { + grid-column: 1 / 3; + } + } + + &__node--with-sidebar { + grid-column: 1 / 2; + grid-row: 1 / 2; + + @include medium { + grid-column: 1 / 2; + } + } + + &__sidebar { + grid-column: 1 / 2; + grid-row: 2 / 3; + + @include medium { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + } +} \ No newline at end of file diff --git a/source/_patterns/03-layouts/node/node.twig b/source/_patterns/03-layouts/node/node.twig new file mode 100644 index 0000000000000000000000000000000000000000..90ffffc696dff9c990f4655e3149a979562c90d2 --- /dev/null +++ b/source/_patterns/03-layouts/node/node.twig @@ -0,0 +1,25 @@ +{% if has_sidebar == 'Yes' %} + {% set classes = classes | merge(['uw-node__node--with-sidebar']) %} +{% else %} + {% set classes = classes | merge(['uw-node__node']) %} +{% endif %} + +<div class="uw-node"> + <div class="uw-node__grid"> + + <article{{ attributes.addClass(classes) }}> + {% block content %} + This is the node content + {% endblock %} + </article> + + {% if has_sidebar %} + <aside class="uw-node__sidebar"> + {% block sidebar_content %} + This is the sidebar + {% endblock %} + </aside> + {% endif %} + + </div> +</div>