From 5c6e5c0ac445bd84cbdfcde14c50d484fc884b20 Mon Sep 17 00:00:00 2001 From: Igor Biki <ibiki@uwaterloo.ca> Date: Wed, 2 Jun 2021 11:39:42 -0400 Subject: [PATCH] ISTWCMS-4818 Removing unused css classes from ofis markup. --- css/styles.css | 1 + css/uw-dashboards.css | 1018 +++++++++++-------- source/_patterns/03-layouts/ofis/_ofis.scss | 1 + source/_patterns/03-layouts/ofis/ofis.twig | 14 +- 4 files changed, 618 insertions(+), 416 deletions(-) diff --git a/css/styles.css b/css/styles.css index 94864b08..8773c09d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2946,6 +2946,7 @@ svg:not(:root) { .ofis-header { display: flex; gap: 1rem; + padding-top: 1rem; } .ofis-header .ofis-picture { max-width: 144px; diff --git a/css/uw-dashboards.css b/css/uw-dashboards.css index d3e9f949..c87e3f08 100644 --- a/css/uw-dashboards.css +++ b/css/uw-dashboards.css @@ -5,155 +5,206 @@ */ @-webkit-keyframes fadeIn { 0% { - opacity: 0; } + opacity: 0; +} 100% { - opacity: 1; } } + opacity: 1; +} } @keyframes fadeIn { 0% { - opacity: 0; } + opacity: 0; +} 100% { - opacity: 1; } } + opacity: 1; +} } .org-default__uw-white--lvl1 { - background: #fff; } + background: #fff; +} .org-default__uw-white--primary { - background: #fff; } + background: #fff; +} .org-default__uw-black--lvl1 { - background: #dfdfdf; } + background: #dfdfdf; +} .org-default__uw-black--lvl2 { - background: #a2a2a2; } + background: #a2a2a2; +} .org-default__uw-black--lvl3 { - background: #787878; } + background: #787878; +} .org-default__uw-black--lvl4 { - background: #000; } + background: #000; +} .org-default__uw-black--primary { - background: #000; } + background: #000; +} .org-default__uw-gold--lvl1 { - background: #fffaaa; } + background: #fffaaa; +} .org-default__uw-gold--lvl2 { - background: #ffea30; } + background: #ffea30; +} .org-default__uw-gold--lvl3 { - background: #fdd54f; } + background: #fdd54f; +} .org-default__uw-gold--lvl4 { - background: #e4b429; } + background: #e4b429; +} .org-default__uw-gold--primary { - background: #fdd54f; } + background: #fdd54f; +} .org-ahs--lvl1 { - background: #97dfef; } + background: #97dfef; +} .org-ahs--lvl2 { - background: #00bed0; } + background: #00bed0; +} .org-ahs--lvl3 { - background: #0098a5; } + background: #0098a5; +} .org-ahs--lvl4 { - background: #005963; } + background: #005963; +} .org-ahs--primary { - background: #005963; } + background: #005963; +} .org-art--lvl1 { - background: #ffd5a5; } + background: #ffd5a5; +} .org-art--lvl2 { - background: #fbaf00; } + background: #fbaf00; +} .org-art--lvl3 { - background: #e78100; } + background: #e78100; +} .org-art--lvl4 { - background: #d93f00; } + background: #d93f00; +} .org-art--primary { - background: #d93f00; } + background: #d93f00; +} .org-eng--lvl1 { - background: #d0b4ef; } + background: #d0b4ef; +} .org-eng--lvl2 { - background: #be33da; } + background: #be33da; +} .org-eng--lvl3 { - background: #8100b4; } + background: #8100b4; +} .org-eng--lvl4 { - background: #57058b; } + background: #57058b; +} .org-eng--primary { - background: #57058b; } + background: #57058b; +} .org-env--lvl1 { - background: #daf582; } + background: #daf582; +} .org-env--lvl2 { - background: #bed500; } + background: #bed500; +} .org-env--lvl3 { - background: #b4be00; } + background: #b4be00; +} .org-env--lvl4 { - background: #607000; } + background: #607000; +} .org-env--primary { - background: #607000; } + background: #607000; +} .org-mat--lvl1 { - background: #ffbeef; } + background: #ffbeef; +} .org-mat--lvl2 { - background: #ff63aa; } + background: #ff63aa; +} .org-mat--lvl3 { - background: #df2498; } + background: #df2498; +} .org-mat--lvl4 { - background: #c60078; } + background: #c60078; +} .org-mat--primary { - background: #c60078; } + background: #c60078; +} .org-sci--lvl1 { - background: #b4d5ff; } + background: #b4d5ff; +} .org-sci--lvl2 { - background: #63a0ff; } + background: #63a0ff; +} .org-sci--lvl3 { - background: #0073ce; } + background: #0073ce; +} .org-sci--lvl4 { - background: #0033be; } + background: #0033be; +} .org-sci--primary { - background: #0033be; } + background: #0033be; +} .org-school--lvl1 { - background: #ffa5aa; } + background: #ffa5aa; +} .org-school--lvl2 { - background: #e41740; } + background: #e41740; +} .org-school--lvl3 { - background: #b71233; } + background: #b71233; +} .org-school--lvl4 { - background: #80001f; } + background: #80001f; +} .org-school--primary { - background: #b71233; } + background: #b71233; +} /** * This stylesheet is for styles you want to include only when displaying demo @@ -164,7 +215,8 @@ -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; - padding: 0 0.5rem; } + padding: 0 0.5rem; +} .demo-animate { background: #ddd; @@ -172,7 +224,8 @@ cursor: pointer; margin-bottom: 1rem; padding: 1rem; - text-align: center; } + text-align: center; +} .sg-colors { display: flex; @@ -180,7 +233,8 @@ flex-wrap: wrap; list-style: none; margin: 0; - padding: 0; } + padding: 0; +} .sg-colors li { border: 1px solid #ddd; @@ -191,7 +245,8 @@ margin: 0 0.5rem 0.5rem 0; max-width: 14rem; padding: 0.3rem; - width: 100%; } + width: 100%; +} .sg-swatch { border-radius: 0.25rem; @@ -199,24 +254,29 @@ height: auto; margin-bottom: 0.25rem; padding: 0.5rem; - position: relative; } + position: relative; +} .sg-sub { font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.88889rem; - padding: 0 0.5rem; } + padding: 0 0.5rem; +} .sg-info { - padding: 0.25rem 0.125rem 0.25rem 1rem; } - .sg-info code { - display: block; - font-size: 14.22224px; - margin-bottom: 0.5rem; } - .sg-info h4 { - font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; - font-size: 0.88889rem; - margin: 0; - padding: 0; } + padding: 0.25rem 0.125rem 0.25rem 1rem; +} +.sg-info code { + display: block; + font-size: 14.22224px; + margin-bottom: 0.5rem; +} +.sg-info h4 { + font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; + font-size: 0.88889rem; + margin: 0; + padding: 0; +} .sg-swatch-colors { background: rgba(255, 255, 255, 0.75); @@ -224,118 +284,137 @@ height: auto; padding: 0.75rem; position: relative; - width: 50%; } + width: 50%; +} .sg-swatch-hex { display: block; font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 0.88889rem; margin: 0; - padding: 0; } + padding: 0; +} .sg-swatch-name { font-family: Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; font-size: 1rem; margin: 0; - padding: 0; } + padding: 0; +} @font-face { font-family: 'BureauGrotCond Book'; font-style: normal; font-weight: normal; - src: url("/fonts/Bureau_Grot-Condensed_Book.eot"), url("/fonts/Bureau_Grot-Condensed_Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Condensed_Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Condensed_Book.woff") format("woff"), url("/fonts/Bureau_Grot-Condensed_Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Condensed_Book.svg#Bureau_Grot-Condensed_Book") format("svg"); } + src: url("/fonts/Bureau_Grot-Condensed_Book.eot"), url("/fonts/Bureau_Grot-Condensed_Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Condensed_Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Condensed_Book.woff") format("woff"), url("/fonts/Bureau_Grot-Condensed_Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Condensed_Book.svg#Bureau_Grot-Condensed_Book") format("svg"); +} @font-face { font-family: 'BureauGrotWide'; font-style: normal; font-weight: 300; - src: url("/fonts/Bureau_Grot-Wide_Light.eot"), url("/fonts/Bureau_Grot-Wide_Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Wide_Light.woff2") format("woff2"), url("/fonts/Bureau_Grot-Wide_Light.woff") format("woff"), url("/fonts/Bureau_Grot-Wide_Light.ttf") format("truetype"), url("/fonts/Bureau_Grot-Wide_Light.svg#Bureau_Grot-Wide_Light") format("svg"); } + src: url("/fonts/Bureau_Grot-Wide_Light.eot"), url("/fonts/Bureau_Grot-Wide_Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Wide_Light.woff2") format("woff2"), url("/fonts/Bureau_Grot-Wide_Light.woff") format("woff"), url("/fonts/Bureau_Grot-Wide_Light.ttf") format("truetype"), url("/fonts/Bureau_Grot-Wide_Light.svg#Bureau_Grot-Wide_Light") format("svg"); +} @font-face { font-family: 'BureauGrot Book'; font-style: normal; font-weight: normal; - src: url("/fonts/Bureau_Grot-Book.eot"), url("/fonts/Bureau_Grot-Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Book.woff") format("woff"), url("/fonts/Bureau_Grot-Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Book.svg#Bureau_Grot-Book") format("svg"); } + src: url("/fonts/Bureau_Grot-Book.eot"), url("/fonts/Bureau_Grot-Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Book.woff") format("woff"), url("/fonts/Bureau_Grot-Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Book.svg#Bureau_Grot-Book") format("svg"); +} @font-face { font-family: 'BureauGrotCond'; font-style: normal; font-weight: bold; - src: url("/fonts/Bureau_Grot-Condensed_Bold.eot"), url("/fonts/Bureau_Grot-Condensed_Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Condensed_Bold.woff2") format("woff2"), url("/fonts/Bureau_Grot-Condensed_Bold.woff") format("woff"), url("/fonts/Bureau_Grot-Condensed_Bold.ttf") format("truetype"), url("/fonts/Bureau_Grot-Condensed_Bold.svg#Bureau_Grot-Condensed_Bold") format("svg"); } + src: url("/fonts/Bureau_Grot-Condensed_Bold.eot"), url("/fonts/Bureau_Grot-Condensed_Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Condensed_Bold.woff2") format("woff2"), url("/fonts/Bureau_Grot-Condensed_Bold.woff") format("woff"), url("/fonts/Bureau_Grot-Condensed_Bold.ttf") format("truetype"), url("/fonts/Bureau_Grot-Condensed_Bold.svg#Bureau_Grot-Condensed_Bold") format("svg"); +} @font-face { font-family: 'BureauGrot'; font-style: normal; font-weight: 300; - src: url("/fonts/Bureau_Grot-Light.eot"), url("/fonts/Bureau_Grot-Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Light.woff2") format("woff2"), url("/fonts/Bureau_Grot-Light.woff") format("woff"), url("/fonts/Bureau_Grot-Light.ttf") format("truetype"), url("/fonts/Bureau_Grot-Light.svg#Bureau_Grot-Light") format("svg"); } + src: url("/fonts/Bureau_Grot-Light.eot"), url("/fonts/Bureau_Grot-Light.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Light.woff2") format("woff2"), url("/fonts/Bureau_Grot-Light.woff") format("woff"), url("/fonts/Bureau_Grot-Light.ttf") format("truetype"), url("/fonts/Bureau_Grot-Light.svg#Bureau_Grot-Light") format("svg"); +} @font-face { font-family: 'BureauGrotWide Book'; font-style: normal; font-weight: normal; - src: url("/fonts/Bureau_Grot-Wide_Book.eot"), url("/fonts/Bureau_Grot-Wide_Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Wide_Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Wide_Book.woff") format("woff"), url("/fonts/Bureau_Grot-Wide_Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book") format("svg"); } + src: url("/fonts/Bureau_Grot-Wide_Book.eot"), url("/fonts/Bureau_Grot-Wide_Book.eot?#iefix") format("embedded-opentype"), url("/fonts/Bureau_Grot-Wide_Book.woff2") format("woff2"), url("/fonts/Bureau_Grot-Wide_Book.woff") format("woff"), url("/fonts/Bureau_Grot-Wide_Book.ttf") format("truetype"), url("/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book") format("svg"); +} @font-face { font-family: 'iconic'; font-style: normal; font-weight: normal; src: url("/fonts/iconic.eot"); - src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype"); } + src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype"); +} /* Complete 1451 */ @font-face { font-family: "Typ1451-Regularalternate"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-regularalternate.eot"), url("/fonts/lineto-typ1451-regularalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regularalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-regularalternate.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-regularalternate.eot"), url("/fonts/lineto-typ1451-regularalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regularalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-regularalternate.woff") format("woff"); +} @font-face { font-family: "Typ1451-Mediumalternate"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-mediumalternate.eot"), url("/fonts/lineto-typ1451-mediumalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-mediumalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-mediumalternate.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-mediumalternate.eot"), url("/fonts/lineto-typ1451-mediumalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-mediumalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-mediumalternate.woff") format("woff"); +} @font-face { font-family: "Typ1451-Regular"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-regular.eot"), url("/fonts/lineto-typ1451-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regular.woff2") format("woff2"), url("/fonts/lineto-typ1451-regular.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-regular.eot"), url("/fonts/lineto-typ1451-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-regular.woff2") format("woff2"), url("/fonts/lineto-typ1451-regular.woff") format("woff"); +} @font-face { font-family: "Typ1451-Boldalternate"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-boldalternate.eot"), url("/fonts/lineto-typ1451-boldalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-boldalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-boldalternate.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-boldalternate.eot"), url("/fonts/lineto-typ1451-boldalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-boldalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-boldalternate.woff") format("woff"); +} @font-face { font-family: "Typ1451-Medium"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-medium.eot"), url("/fonts/lineto-typ1451-medium.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-medium.woff2") format("woff2"), url("/fonts/lineto-typ1451-medium.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-medium.eot"), url("/fonts/lineto-typ1451-medium.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-medium.woff2") format("woff2"), url("/fonts/lineto-typ1451-medium.woff") format("woff"); +} @font-face { font-family: "Typ1451-Bold"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-bold.eot"), url("/fonts/lineto-typ1451-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-bold.woff2") format("woff2"), url("/fonts/lineto-typ1451-bold.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-bold.eot"), url("/fonts/lineto-typ1451-bold.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-bold.woff2") format("woff2"), url("/fonts/lineto-typ1451-bold.woff") format("woff"); +} @font-face { font-family: "Typ1451-Light"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-light.eot"), url("/fonts/lineto-typ1451-light.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-light.woff2") format("woff2"), url("/fonts/lineto-typ1451-light.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-light.eot"), url("/fonts/lineto-typ1451-light.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-light.woff2") format("woff2"), url("/fonts/lineto-typ1451-light.woff") format("woff"); +} @font-face { font-family: "Typ1451-Lightalternate"; font-style: normal; font-weight: normal; - src: url("/fonts/lineto-typ1451-lightalternate.eot"), url("/fonts/lineto-typ1451-lightalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-lightalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-lightalternate.woff") format("woff"); } + src: url("/fonts/lineto-typ1451-lightalternate.eot"), url("/fonts/lineto-typ1451-lightalternate.eot?#iefix") format("embedded-opentype"), url("/fonts/lineto-typ1451-lightalternate.woff2") format("woff2"), url("/fonts/lineto-typ1451-lightalternate.woff") format("woff"); +} @font-face { font-family: "fdsu-rwd"; font-style: normal; font-weight: normal; - src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg"); } + src: url("/fonts/fdsu-rwd.eot"), url("/fonts/fdsu-rwd.eot?#iefix") format("embedded-opentype"), url("/fonts/fdsu-rwd.ttf") format("truetype"), url("/fonts/fdsu-rwd.woff") format("woff"), url("/fonts/fdsu-rwd.svg?#fdsu-rwd") format("svg"); +} .breakpoint { background-color: rgba(34, 139, 34, 0.7); @@ -347,400 +426,521 @@ position: fixed; top: 7rem; width: auto; - z-index: 9; } + z-index: 9; +} +.breakpoint::before { + content: "no break- Phone up"; +} +@media (min-width: 30rem) { + .breakpoint { + background-color: rgba(255, 140, 0, 0.7); +} + .breakpoint::before { + content: "xs"; +} } +@media (min-width: 40.06rem) { + .breakpoint { + background-color: rgba(178, 34, 34, 0.7); +} + .breakpoint::before { + content: "small"; +} } +@media (min-width: 48.06rem) { + .breakpoint { + background-color: rgba(255, 255, 0, 0.7); + color: #000; +} + .breakpoint::before { + content: "medium"; +} } +@media (min-width: 63.1875rem) { + .breakpoint { + background-color: rgba(0, 0, 255, 0.7); + color: #fff; +} + .breakpoint::before { + content: "large"; +} } +@media (min-width: 75rem) { + .breakpoint { + background-color: rgba(95, 158, 160, 0.7); + color: #fff; +} .breakpoint::before { - content: "no break- Phone up"; } - @media (min-width: 30rem) { - .breakpoint { - background-color: rgba(255, 140, 0, 0.7); } - .breakpoint::before { - content: "xs"; } } - @media (min-width: 40.06rem) { - .breakpoint { - background-color: rgba(178, 34, 34, 0.7); } - .breakpoint::before { - content: "small"; } } - @media (min-width: 48.06rem) { - .breakpoint { - background-color: rgba(255, 255, 0, 0.7); - color: #000; } - .breakpoint::before { - content: "medium"; } } - @media (min-width: 63.1875rem) { - .breakpoint { - background-color: rgba(0, 0, 255, 0.7); - color: #fff; } - .breakpoint::before { - content: "large"; } } - @media (min-width: 75rem) { - .breakpoint { - background-color: rgba(95, 158, 160, 0.7); - color: #fff; } - .breakpoint::before { - content: "xl"; } } - @media (min-width: 102.5rem) { - .breakpoint { - background-color: rgba(255, 127, 80, 0.7); - color: #fff; } - .breakpoint::before { - content: "xxl"; } } - @media (min-width: 120rem) { - .breakpoint { - background-color: rgba(127, 255, 212, 0.7); - color: #000; } - .breakpoint::before { - content: "onek - 1K"; } } - @media (min-width: 159.93rem) { - .breakpoint { - background-color: rgba(123, 104, 238, 0.7); } - .breakpoint::before { - content: "twok - 2K"; } } + content: "xl"; +} } +@media (min-width: 102.5rem) { + .breakpoint { + background-color: rgba(255, 127, 80, 0.7); + color: #fff; +} + .breakpoint::before { + content: "xxl"; +} } +@media (min-width: 120rem) { + .breakpoint { + background-color: rgba(127, 255, 212, 0.7); + color: #000; +} + .breakpoint::before { + content: "onek - 1K"; +} } +@media (min-width: 159.93rem) { + .breakpoint { + background-color: rgba(123, 104, 238, 0.7); +} + .breakpoint::before { + content: "twok - 2K"; +} } .layout { margin-left: auto; margin-right: auto; max-width: 75rem; - padding: 0 16px; } - @media (min-width: 75rem) { - .layout { - padding-left: 0; - padding-right: 0; } } + padding: 0 16px; +} +@media (min-width: 75rem) { + .layout { + padding-left: 0; + padding-right: 0; +} } +.layout.uw-contained-width { + margin-left: auto; + margin-right: auto; + max-width: 75rem; + padding: 0 16px; + padding: 1rem; +} +@media (min-width: 75rem) { + .layout.uw-contained-width { + padding-left: 0; + padding-right: 0; +} } +@media (min-width: 102.5rem) { .layout.uw-contained-width { + padding: 1rem 0; +} } +.layout.uw-contained-width--narrow { + /* Match the width of WCMS2's narrow: 496px */ + max-width: 31rem; +} +.layout.uw-contained-width--wide { + /* Match the width of WCMS2's wide: 753px */ + max-width: 47.0625rem; +} +.layout.uw-full-width { + max-width: 100%; + padding: 0; + width: 100%; +} +.uw-node__with-sidebar .layout { + margin: inherit; + max-width: 100%; +} +@media (min-width: 48.06rem) { + .uw-node__with-sidebar .layout { margin-left: auto; margin-right: auto; max-width: 75rem; padding: 0 16px; - padding: 1rem; } - @media (min-width: 75rem) { - .layout.uw-contained-width { - padding-left: 0; - padding-right: 0; } } - @media (min-width: 102.5rem) { - .layout.uw-contained-width { - padding: 1rem 0; } } - .layout.uw-contained-width--narrow { - /* Match the width of WCMS2's narrow: 496px */ - max-width: 31rem; } - .layout.uw-contained-width--wide { - /* Match the width of WCMS2's wide: 753px */ - max-width: 47.0625rem; } - .layout.uw-full-width { - max-width: 100%; - padding: 0; - width: 100%; } +} } +@media (min-width: 48.06rem) and (min-width: 75rem) { .uw-node__with-sidebar .layout { - margin: inherit; - max-width: 100%; } - @media (min-width: 48.06rem) { - .uw-node__with-sidebar .layout { - margin-left: auto; - margin-right: auto; - max-width: 75rem; - padding: 0 16px; } } - @media (min-width: 48.06rem) and (min-width: 75rem) { - .uw-node__with-sidebar .layout { - padding-left: 0; - padding-right: 0; } } - .uw-node__with-sidebar .layout.uw-contained-width { - margin-left: auto; - margin-right: auto; - max-width: 75rem; - padding: 0 16px; - margin: inherit; - padding: 1rem; } - @media (min-width: 75rem) { - .uw-node__with-sidebar .layout.uw-contained-width { - padding-left: 0; - padding-right: 0; } } - @media (min-width: 102.5rem) { - .uw-node__with-sidebar .layout.uw-contained-width { - padding: 1rem 0; } } - .uw-node__with-sidebar .layout.uw-contained-width--narrow { - /* Match the width of WCMS2's narrow: 496px */ - margin: inherit; } - .uw-node__with-sidebar .layout.uw-contained-width--wide { - /* Match the width of WCMS2's wide: 753px */ - margin: inherit; } + padding-left: 0; + padding-right: 0; +} } +.uw-node__with-sidebar .layout.uw-contained-width { + margin-left: auto; + margin-right: auto; + max-width: 75rem; + padding: 0 16px; + margin: inherit; + padding: 1rem; +} +@media (min-width: 75rem) { + .uw-node__with-sidebar .layout.uw-contained-width { + padding-left: 0; + padding-right: 0; +} } +@media (min-width: 102.5rem) { + .uw-node__with-sidebar .layout.uw-contained-width { + padding: 1rem 0; +} } +.uw-node__with-sidebar .layout.uw-contained-width--narrow { + /* Match the width of WCMS2's narrow: 496px */ + margin: inherit; +} +.uw-node__with-sidebar .layout.uw-contained-width--wide { + /* Match the width of WCMS2's wide: 753px */ + margin: inherit; +} .path-dashboard .layout__region { margin-bottom: 1rem; - margin-right: 1rem; } + margin-right: 1rem; +} .path-dashboard .layout__region--wrapper { border: 1px solid #bfbfba; box-shadow: none; - padding: 1rem; } + padding: 1rem; +} .layout--uw-1-col { display: grid; - grid-template-columns: 100%; } + grid-template-columns: 100%; +} .layout--uw-1-col .layout__region--first { - grid-column: 1 / 2; } + grid-column: 1 / 2; +} .layout--uw-2-col { display: grid; - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-2-col.larger-left { - grid-template-columns: 67% 33%; } } - @media (min-width: 48.06rem) { - .layout--uw-2-col.larger-right { - grid-template-columns: 33% 67%; } } + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { + .layout--uw-2-col.larger-left { + grid-template-columns: 67% 33%; +} } +@media (min-width: 48.06rem) { + .layout--uw-2-col.larger-right { + grid-template-columns: 33% 67%; +} } +.layout--uw-2-col.even-split { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-2-col.even-split { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-2-col.even-split { - grid-template-columns: 50% 50%; } } - .layout--uw-2-col .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 2; } + grid-template-columns: 50% 50%; +} } +.layout--uw-2-col .layout__region--first { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-2-col .layout__region--second { + grid-column: 1 / 2; + grid-row: 2/ 3; +} +@media (min-width: 48.06rem) { .layout--uw-2-col .layout__region--second { - grid-column: 1 / 2; - grid-row: 2/ 3; } - @media (min-width: 48.06rem) { - .layout--uw-2-col .layout__region--second { - grid-column: 2 / 3; - grid-row: 1 / 2; } } + grid-column: 2 / 3; + grid-row: 1 / 2; +} } .layout--uw-3-col { - display: grid; } + display: grid; +} +.layout--uw-3-col.even-split { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-3-col.even-split { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-3-col.even-split { - grid-template-columns: 33% 34% 33%; } } + grid-template-columns: 33% 34% 33%; +} } +.layout--uw-3-col.larger-left { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-3-col.larger-left { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-3-col.larger-left { - grid-template-columns: 50% 25% 25%; } } + grid-template-columns: 50% 25% 25%; +} } +.layout--uw-3-col.larger-middle { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-3-col.larger-middle { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-3-col.larger-middle { - grid-template-columns: 25% 50% 25%; } } + grid-template-columns: 25% 50% 25%; +} } +.layout--uw-3-col.larger-right { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-3-col.larger-right { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-3-col.larger-right { - grid-template-columns: 25% 25% 50%; } } + grid-template-columns: 25% 25% 50%; +} } +.layout--uw-3-col.legacy-38-38-24 { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-3-col.legacy-38-38-24 { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-3-col.legacy-38-38-24 { - grid-template-columns: 38% 38% 24%; } } + grid-template-columns: 38% 38% 24%; +} } +.layout--uw-3-col.legacy-24-38-38 { + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { .layout--uw-3-col.legacy-24-38-38 { - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-3-col.legacy-24-38-38 { - grid-template-columns: 24% 38% 38%; } } - .layout--uw-3-col .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 2; } + grid-template-columns: 24% 38% 38%; +} } +.layout--uw-3-col .layout__region--first { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-3-col .layout__region--second { + grid-column: 1 / 2; + grid-row: 2 / 3; +} +@media (min-width: 48.06rem) { .layout--uw-3-col .layout__region--second { - grid-column: 1 / 2; - grid-row: 2 / 3; } - @media (min-width: 48.06rem) { - .layout--uw-3-col .layout__region--second { - grid-column: 2 / 3; - grid-row: 1 / 2; } } + grid-column: 2 / 3; + grid-row: 1 / 2; +} } +.layout--uw-3-col .layout__region--third { + grid-column: 1 / 2; + grid-row: 3 / 4; +} +@media (min-width: 48.06rem) { .layout--uw-3-col .layout__region--third { - grid-column: 1 / 2; - grid-row: 3 / 4; } - @media (min-width: 48.06rem) { - .layout--uw-3-col .layout__region--third { - grid-column: 3 / 4; - grid-row: 1 / 2; } } + grid-column: 3 / 4; + grid-row: 1 / 2; +} } .layout--uw-4-col { display: grid; - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-4-col.even-split { - grid-template-columns: 25% 25% 25% 25%; } } - @media (min-width: 48.06rem) { - .layout--uw-4-col.larger-left { - grid-template-columns: 50% 16.67% 16.67% 16.66%; } } - @media (min-width: 48.06rem) { - .layout--uw-4-col.larger-second { - grid-template-columns: 16.67% 50% 16.67% 16.66%; } } - @media (min-width: 48.06rem) { - .layout--uw-4-col.larger-third { - grid-template-columns: 16.67% 16.67% 50% 16.66%; } } - @media (min-width: 48.06rem) { - .layout--uw-4-col.larger-right { - grid-template-columns: 16.67% 16.67% 16.66% 50%; } } - @media (min-width: 48.06rem) { - .layout--uw-4-col.legacy-23-27-27-23 { - grid-template-columns: 23% 27% 27% 23%; } } - .layout--uw-4-col .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 2; } + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { + .layout--uw-4-col.even-split { + grid-template-columns: 25% 25% 25% 25%; +} } +@media (min-width: 48.06rem) { + .layout--uw-4-col.larger-left { + grid-template-columns: 50% 16.67% 16.67% 16.66%; +} } +@media (min-width: 48.06rem) { + .layout--uw-4-col.larger-second { + grid-template-columns: 16.67% 50% 16.67% 16.66%; +} } +@media (min-width: 48.06rem) { + .layout--uw-4-col.larger-third { + grid-template-columns: 16.67% 16.67% 50% 16.66%; +} } +@media (min-width: 48.06rem) { + .layout--uw-4-col.larger-right { + grid-template-columns: 16.67% 16.67% 16.66% 50%; +} } +@media (min-width: 48.06rem) { + .layout--uw-4-col.legacy-23-27-27-23 { + grid-template-columns: 23% 27% 27% 23%; +} } +.layout--uw-4-col .layout__region--first { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-4-col .layout__region--second { + grid-column: 1 / 2; + grid-row: 2 / 3; +} +@media (min-width: 48.06rem) { .layout--uw-4-col .layout__region--second { - grid-column: 1 / 2; - grid-row: 2 / 3; } - @media (min-width: 48.06rem) { - .layout--uw-4-col .layout__region--second { - grid-column: 2 / 3; - grid-row: 1 / 2; } } + grid-column: 2 / 3; + grid-row: 1 / 2; +} } +.layout--uw-4-col .layout__region--third { + grid-column: 1 / 2; + grid-row: 3 / 4; +} +@media (min-width: 48.06rem) { .layout--uw-4-col .layout__region--third { - grid-column: 1 / 2; - grid-row: 3 / 4; } - @media (min-width: 48.06rem) { - .layout--uw-4-col .layout__region--third { - grid-column: 3 / 4; - grid-row: 1 / 2; } } + grid-column: 3 / 4; + grid-row: 1 / 2; +} } +.layout--uw-4-col .layout__region--fourth { + grid-column: 1 / 2; + grid-row: 4 / 5; +} +@media (min-width: 48.06rem) { .layout--uw-4-col .layout__region--fourth { - grid-column: 1 / 2; - grid-row: 4 / 5; } - @media (min-width: 48.06rem) { - .layout--uw-4-col .layout__region--fourth { - grid-column: 4 / 5; - grid-row: 1 / 2; } } + grid-column: 4 / 5; + grid-row: 1 / 2; +} } .layout--uw-5-col { display: grid; - grid-template-columns: 100%; } - @media (min-width: 48.06rem) { - .layout--uw-5-col.even-split { - grid-template-columns: 20% 20% 20% 20% 20%; } } - @media (min-width: 48.06rem) { - .layout--uw-5-col.larger-left { - grid-template-columns: 40% 15% 15% 15% 15%; } } - @media (min-width: 48.06rem) { - .layout--uw-5-col.larger-second { - grid-template-columns: 15% 40% 15% 15% 15%; } } - @media (min-width: 48.06rem) { - .layout--uw-5-col.larger-third { - grid-template-columns: 15% 15% 40% 15% 15%; } } - @media (min-width: 48.06rem) { - .layout--uw-5-col.larger-fourth { - grid-template-columns: 15% 15% 15% 40% 15%; } } - @media (min-width: 48.06rem) { - .layout--uw-5-col.larger-right { - grid-template-columns: 15% 15% 15% 15% 40%; } } - @media (min-width: 48.06rem) { - .layout--uw-5-col.legacy-23-19-19-19-20 { - grid-template-columns: 23% 19% 19% 19% 20%; } } - .layout--uw-5-col .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 2; } + grid-template-columns: 100%; +} +@media (min-width: 48.06rem) { + .layout--uw-5-col.even-split { + grid-template-columns: 20% 20% 20% 20% 20%; +} } +@media (min-width: 48.06rem) { + .layout--uw-5-col.larger-left { + grid-template-columns: 40% 15% 15% 15% 15%; +} } +@media (min-width: 48.06rem) { + .layout--uw-5-col.larger-second { + grid-template-columns: 15% 40% 15% 15% 15%; +} } +@media (min-width: 48.06rem) { + .layout--uw-5-col.larger-third { + grid-template-columns: 15% 15% 40% 15% 15%; +} } +@media (min-width: 48.06rem) { + .layout--uw-5-col.larger-fourth { + grid-template-columns: 15% 15% 15% 40% 15%; +} } +@media (min-width: 48.06rem) { + .layout--uw-5-col.larger-right { + grid-template-columns: 15% 15% 15% 15% 40%; +} } +@media (min-width: 48.06rem) { + .layout--uw-5-col.legacy-23-19-19-19-20 { + grid-template-columns: 23% 19% 19% 19% 20%; +} } +.layout--uw-5-col .layout__region--first { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-5-col .layout__region--second { + grid-column: 1 / 2; + grid-row: 2 / 3; +} +@media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--second { - grid-column: 1 / 2; - grid-row: 2 / 3; } - @media (min-width: 48.06rem) { - .layout--uw-5-col .layout__region--second { - grid-column: 2 / 3; - grid-row: 1 / 2; } } + grid-column: 2 / 3; + grid-row: 1 / 2; +} } +.layout--uw-5-col .layout__region--third { + grid-column: 1 / 2; + grid-row: 3 / 4; +} +@media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--third { - grid-column: 1 / 2; - grid-row: 3 / 4; } - @media (min-width: 48.06rem) { - .layout--uw-5-col .layout__region--third { - grid-column: 3 / 4; - grid-row: 1 / 2; } } + grid-column: 3 / 4; + grid-row: 1 / 2; +} } +.layout--uw-5-col .layout__region--fourth { + grid-column: 1 / 2; + grid-row: 4 / 5; +} +@media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--fourth { - grid-column: 1 / 2; - grid-row: 4 / 5; } - @media (min-width: 48.06rem) { - .layout--uw-5-col .layout__region--fourth { - grid-column: 4 / 5; - grid-row: 1 / 2; } } + grid-column: 4 / 5; + grid-row: 1 / 2; +} } +.layout--uw-5-col .layout__region--fifth { + grid-column: 1 / 2; + grid-row: 5 / 6; +} +@media (min-width: 48.06rem) { .layout--uw-5-col .layout__region--fifth { - grid-column: 1 / 2; - grid-row: 5 / 6; } - @media (min-width: 48.06rem) { - .layout--uw-5-col .layout__region--fifth { - grid-column: 5 / 6; - grid-row: 1 / 2; } } + grid-column: 5 / 6; + grid-row: 1 / 2; +} } .layout--uw-inverted-l-left { display: grid; - grid-template-columns: 100%; } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-left.even-split { - grid-template-columns: 50% 50%; } } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-left.larger-left { - grid-template-columns: 67% 33%; } } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-left.larger-right { - grid-template-columns: 33% 67%; } } - .layout--uw-inverted-l-left .uw-inverted-l--left-side { - grid-column: 1 / 2; - grid-row: 1 / 2; } + grid-template-columns: 100%; +} +@media (min-width: 63.1875rem) { + .layout--uw-inverted-l-left.even-split { + grid-template-columns: 50% 50%; +} } +@media (min-width: 63.1875rem) { + .layout--uw-inverted-l-left.larger-left { + grid-template-columns: 67% 33%; +} } +@media (min-width: 63.1875rem) { + .layout--uw-inverted-l-left.larger-right { + grid-template-columns: 33% 67%; +} } +.layout--uw-inverted-l-left .uw-inverted-l--left-side { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-inverted-l-left .uw-inverted-l--right-side { + display: grid; + grid-column: 1 / 2; + grid-row: 2 / 3; +} +@media (min-width: 63.1875rem) { .layout--uw-inverted-l-left .uw-inverted-l--right-side { - display: grid; - grid-column: 1 / 2; - grid-row: 2 / 3; } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-left .uw-inverted-l--right-side { - grid-column: 2 / 3; - grid-row: 1 / 2; - grid-template-columns: 50% 50%; } } - .layout--uw-inverted-l-left .layout__region--second { - grid-column: 1 / 2; - grid-row: 1 / 2; } - .layout--uw-inverted-l-left .layout__region--third { grid-column: 2 / 3; - grid-row: 1 / 2; } - .layout--uw-inverted-l-left .layout__region--fourth { - grid-column: 1 / 3; - grid-row: 2 / 3; } + grid-row: 1 / 2; + grid-template-columns: 50% 50%; +} } +.layout--uw-inverted-l-left .layout__region--second { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-inverted-l-left .layout__region--third { + grid-column: 2 / 3; + grid-row: 1 / 2; +} +.layout--uw-inverted-l-left .layout__region--fourth { + grid-column: 1 / 3; + grid-row: 2 / 3; +} .layout--uw-inverted-l-right { display: grid; - grid-template-columns: 100%; } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-right.even-split { - grid-template-columns: 50% 50%; } } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-right.larger-left { - grid-template-columns: 67% 33%; } } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-right.larger-right { - grid-template-columns: 33% 67%; } } + grid-template-columns: 100%; +} +@media (min-width: 63.1875rem) { + .layout--uw-inverted-l-right.even-split { + grid-template-columns: 50% 50%; +} } +@media (min-width: 63.1875rem) { + .layout--uw-inverted-l-right.larger-left { + grid-template-columns: 67% 33%; +} } +@media (min-width: 63.1875rem) { + .layout--uw-inverted-l-right.larger-right { + grid-template-columns: 33% 67%; +} } +.layout--uw-inverted-l-right .uw-inverted-l--left-side { + display: grid; + grid-column: 1 / 2; + grid-row: 1 / 2; +} +@media (min-width: 63.1875rem) { .layout--uw-inverted-l-right .uw-inverted-l--left-side { - display: grid; - grid-column: 1 / 2; - grid-row: 1 / 2; } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-right .uw-inverted-l--left-side { - grid-template-columns: 50% 50%; } } + grid-template-columns: 50% 50%; +} } +.layout--uw-inverted-l-right .uw-inverted-l--right-side { + grid-column: 1 / 2; + grid-row: 2 / 3; +} +@media (min-width: 63.1875rem) { .layout--uw-inverted-l-right .uw-inverted-l--right-side { - grid-column: 1 / 2; - grid-row: 2 / 3; } - @media (min-width: 63.1875rem) { - .layout--uw-inverted-l-right .uw-inverted-l--right-side { - grid-column: 2 / 3; - grid-row: 1 / 2; } } - .layout--uw-inverted-l-right .layout__region--first { - grid-column: 1 / 2; - grid-row: 1 / 2; } - .layout--uw-inverted-l-right .layout__region--second { grid-column: 2 / 3; - grid-row: 1 / 2; } - .layout--uw-inverted-l-right .layout__region--third { - grid-column: 1 / 3; - grid-row: 2 / 3; } + grid-row: 1 / 2; +} } +.layout--uw-inverted-l-right .layout__region--first { + grid-column: 1 / 2; + grid-row: 1 / 2; +} +.layout--uw-inverted-l-right .layout__region--second { + grid-column: 2 / 3; + grid-row: 1 / 2; +} +.layout--uw-inverted-l-right .layout__region--third { + grid-column: 1 / 3; + grid-row: 2 / 3; +} .layout-builder .layout__region { - outline: 2px dashed #2f91da; } + outline: 2px dashed #2f91da; +} .pattern-lab-content .layout__region { outline: 2px dashed #2f91da; padding: 1.5rem; - text-align: center; } - .pattern-lab-content .layout__region .pl-labels { - text-align: center; } + text-align: center; +} +.pattern-lab-content .layout__region .pl-labels { + text-align: center; +} .pl-layout-h2 { margin-left: auto; margin-right: auto; max-width: 75rem; - padding: 0 16px; } - @media (min-width: 75rem) { - .pl-layout-h2 { - padding-left: 0; - padding-right: 0; } } + padding: 0 16px; +} +@media (min-width: 75rem) { + .pl-layout-h2 { + padding-left: 0; + padding-right: 0; +} } diff --git a/source/_patterns/03-layouts/ofis/_ofis.scss b/source/_patterns/03-layouts/ofis/_ofis.scss index 302cc385..d2c93963 100644 --- a/source/_patterns/03-layouts/ofis/_ofis.scss +++ b/source/_patterns/03-layouts/ofis/_ofis.scss @@ -1,6 +1,7 @@ .ofis-header { display: flex; gap: 1rem; + padding-top: 1rem; .ofis-picture { max-width: 144px; diff --git a/source/_patterns/03-layouts/ofis/ofis.twig b/source/_patterns/03-layouts/ofis/ofis.twig index 20d4e3c3..26f88b17 100644 --- a/source/_patterns/03-layouts/ofis/ofis.twig +++ b/source/_patterns/03-layouts/ofis/ofis.twig @@ -1,12 +1,12 @@ -<div class="profile-check"> - <div class="field field-name-field-profile-title field-type-text field-label-hidden"> - <div class="field-items"> - <div class="field-item even" property="schema:jobTitle">{{ ofis_data.title }}</div> +<div> + <div> + <div> + <div property="schema:jobTitle">{{ ofis_data.title }}</div> </div> </div> - <div class="field field-name-body field-type-text-with-summary field-label-hidden"> - <div class="field-items"> - <div class="field-item even" property="content:encoded"> + <div> + <div> + <div property="content:encoded"> <div class="ofis-header"> {% if ofis_data.picture %} <div class="ofis-picture"> -- GitLab