diff --git a/components/_patterns/00-base/_global.scss b/components/_patterns/00-base/_global.scss index 2f1878815959d562f21c740a2b50719da63461c5..6782e527ce7081275ee54cc9d6784f053ee8352c 100644 --- a/components/_patterns/00-base/_global.scss +++ b/components/_patterns/00-base/_global.scss @@ -14,20 +14,42 @@ body { } .layout-container { + @supports not (display: grid) { + clear: both; + float: left; + width: 100%; + } + display: grid; grid-template-columns: auto; grid-template-rows: minmax(60px, auto) minmax(451.5px, auto) minmax(100px, auto); } .layout-container header { + @supports not (display: grid) { + clear: both; + float: left; + width: 100%; + } + grid-column: 1 / 2; grid-row: 1 / 2; } .layout-container main { + @supports not (display: grid) { + clear: both; + float: left; + margin-left: auto; + margin-right: auto; + } + + @supports (display: grid) { + max-width: 63.125rem; + } + grid-column: 1 / 2; grid-row: 2 / 3; - max-width: 63.125rem; width: 100%; margin-left: auto; margin-right: auto; @@ -35,11 +57,23 @@ body { } .layout-container .block-site-footer-block { + @supports not (display: grid) { + clear: both; + float: left; + width: 100%; + } + grid-column: 1 / 2; grid-row: 3 / 4; } .layout-container footer { + @supports not (display: grid) { + clear: both; + float: left; + width: 100%; + } + grid-column: 1 / 2; grid-row: 4 / 5; } diff --git a/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss b/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss index 969f2ac58bd0246d9799574337ca916f75a539c5..d03b35053197c7475a5eb24682d6b68d5d2acf1d 100644 --- a/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss +++ b/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss @@ -8,6 +8,11 @@ ul.global-footer-menu { } .global-footer-menu { + @supports not (display: grid) { + clear: both; + width: 100%; + } + display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto auto; @@ -23,6 +28,23 @@ ul.global-footer-menu { border-right: 1px solid grey; } +@supports not (display: grid) { + .global-footer-menu li:nth-child(1n) { + float: left; + width: 25%; + } + + .global-footer-menu li:nth-child(2n) { + float: left; + width: 25%; + } + + .global-footer-menu li:nth-child(3n) { + float: left; + width: 25%; + } +} + .global-footer-menu li:nth-child(1) { grid-column: 1; grid-row: 1; diff --git a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss index 5a475e67ba981992a278af27ffffe83757e6757a..ff9e84dcd7c59c8c10a6a0f5f5a54a51088a4916 100644 --- a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss +++ b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss @@ -7,26 +7,52 @@ footer { } .uw-footer-grid { - max-width: 63.125rem; - margin-left: auto; - margin-right: auto; + @supports not (display: grid) { + clear: both; + width: 100%; + max-width: 80%; + margin-left: auto; + margin-right: auto; + } + + @supports (display: grid) { + max-width: 63.125rem; + } + display: grid; grid-template-columns: 25% auto 30%; grid-template-rows: auto; + margin-left: auto; + margin-right: auto; padding: 1rem; } .uw-footer-grid .footer-1 { + @supports not (display: grid) { + float: left; + width: 25%; + } + grid-column: 1 / 2; grid-row: 1 / 2; } .uw-footer-grid .footer-2 { + @supports not (display: grid) { + float: left; + width: 45%; + } + grid-column: 2 / 3; grid-row: 1 / 2; } .uw-footer-grid .footer-3 { + @supports not (display: grid) { + float: left; + width: 30%; + } + grid-column: 3 / 4; grid-row: 1 / 2; text-align: right; diff --git a/components/_patterns/03-organisms/site/site-header/_site-header.scss b/components/_patterns/03-organisms/site/site-header/_site-header.scss index 5937a953eb30ee39571a7f05d133dd7c1fceff9c..d68142be0c876a54e3e1a3079a03146bb25858f6 100644 --- a/components/_patterns/03-organisms/site/site-header/_site-header.scss +++ b/components/_patterns/03-organisms/site/site-header/_site-header.scss @@ -1,4 +1,10 @@ .header { + @supports not (display: grid) { + display: block; + margin-left: auto; + margin-right: auto; + } + width: 100%; background-color: $uw-black; padding-top: 0.5rem; @@ -19,22 +25,42 @@ } .uw-header-grid { + @supports not (display: grid) { + clear: both; + max-width: 80%; + } + display: grid; grid-template-columns: 17% auto 10%; grid-template-rows: auto; } .uw-header-grid .header-1 { + @supports not (display: grid) { + float: left; + width: 17%; + } + grid-column: 1 / 2; grid-row: 1 / 2; } .uw-header-grid .header-2 { + @supports not (display: grid) { + float: left; + width: 73%; + } + grid-column: 2 / 3; grid-row: 1 / 2; } .uw-header-grid .header-3 { + @supports not (display: grid) { + float: left; + width: 10%; + } + grid-column: 3 / 4; grid-row: 1 / 2; } diff --git a/components/_patterns/05-pages/_page.scss b/components/_patterns/05-pages/_page.scss index 02bd1d364ff58b8ffe061c3cfe8ed90ea6ca1d4c..6ffbe9396bcc2885aec2b877072318c0d8fa83ed 100644 --- a/components/_patterns/05-pages/_page.scss +++ b/components/_patterns/05-pages/_page.scss @@ -1,21 +1,48 @@ +main.main { + background-color: $uw-white; + padding-bottom: 2rem; +} .main-content-wrapper { + @supports not (display: grid) { + clear: both; + width: 100%; + max-width: 80%; + margin-left: auto; + margin-right: auto; + } + display: grid; grid-template-columns: 23% 77%; grid-template-rows: auto; .uw-main-navigation { + @supports not (display: grid) { + float: left; + width: 23%; + } + grid-column: 1 / 2; grid-row: 1 / 2; } .main-content { + @supports not (display: grid) { + float: left; + width: 77%; + } + grid-column: 2 / 3; grid-row: 1 / 2; } } .main-content--with-sidebar { + @supports not (display: grid) { + clear: both; + width: 100%; + } + display: grid; grid-template-columns: 70% 30%; grid-template-rows: auto auto auto; @@ -26,6 +53,11 @@ } .main-content--tabs { + @supports not (display: grid) { + float: left; + width: 77%; + } + grid-column: 1 / 3; grid-row: 2 / 3; }