diff --git a/core/themes/bartik/bartik.info.yml b/core/themes/bartik/bartik.info.yml index f4bea7842a8..a91e7876912 100644 --- a/core/themes/bartik/bartik.info.yml +++ b/core/themes/bartik/bartik.info.yml @@ -20,16 +20,17 @@ regions: help: Help page_top: 'Page top' page_bottom: 'Page bottom' - featured: Featured + featured_top: 'Featured top' breadcrumb: Breadcrumb content: Content sidebar_first: 'Sidebar first' sidebar_second: 'Sidebar second' - triptych_first: 'Triptych first' - triptych_middle: 'Triptych middle' - triptych_last: 'Triptych last' + featured_bottom_first: 'Featured bottom first' + featured_bottom_second: 'Featured bottom second' + featured_bottom_third: 'Featured bottom third' footer_first: 'Footer first' footer_second: 'Footer second' footer_third: 'Footer third' footer_fourth: 'Footer fourth' footer_fifth: 'Footer fifth' + diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml index 7379c6e04eb..73e06aec4d4 100644 --- a/core/themes/bartik/bartik.libraries.yml +++ b/core/themes/bartik/bartik.libraries.yml @@ -15,7 +15,7 @@ global-styling: css/components/contextual.css: {} # @see https://www.drupal.org/node/2389735 css/components/dropbutton.component.css: {} - css/components/featured.css: {} + css/components/featured-top.css: {} css/components/footer.css: {} css/components/form.css: {} css/components/forum.css: {} @@ -35,7 +35,7 @@ global-styling: css/components/table.css: {} css/components/tabs.css: {} css/components/tips.css: {} - css/components/triptych.css: {} + css/components/featured-bottom.css: {} css/components/user.css: {} # @see https://www.drupal.org/node/2389735 css/components/vertical-tabs.component.css: {} diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme index 145c15c7254..899c49dd0cc 100644 --- a/core/themes/bartik/bartik.theme +++ b/core/themes/bartik/bartik.theme @@ -31,8 +31,8 @@ function bartik_preprocess_html(&$variables) { $variables['attributes']['class'][] = 'layout-no-sidebars'; } - if (!empty($variables['page']['featured'])) { - $variables['attributes']['class'][] = 'featured'; + if (!empty($variables['page']['featured_top'])) { + $variables['attributes']['class'][] = 'featured-top'; } } diff --git a/core/themes/bartik/css/components/admin.css b/core/themes/bartik/css/components/admin.css index c97c6a670a3..bb1d6edae3f 100644 --- a/core/themes/bartik/css/components/admin.css +++ b/core/themes/bartik/css/components/admin.css @@ -24,7 +24,7 @@ text-align: center; text-shadow: none; } -#featured .demo-block { +#featured-top .demo-block { font-size: 0.55em; } #header .demo-block { diff --git a/core/themes/bartik/css/components/featured-bottom.css b/core/themes/bartik/css/components/featured-bottom.css new file mode 100644 index 00000000000..6fdb71a13e0 --- /dev/null +++ b/core/themes/bartik/css/components/featured-bottom.css @@ -0,0 +1,55 @@ +/* ----------------- Featured Bottom ----------------- */ + +#featured-bottom-wrapper { + background-color: #f0f0f0; + background: rgba(30, 50, 10, 0.08); + border-top: 1px solid #e7e7e7; +} +#featured-bottom h2 { + color: #000; + font-size: 1.4em; + margin-bottom: 0.6em; + text-shadow: 0 1px 0 #fff; + text-align: center; + line-height: 1; +} +#featured-bottom .block { + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid #dfdfdf; + line-height: 1.3; +} +#featured-bottom .block:last-child { + border-bottom: none; +} +#featured-bottom .block ul li, +#featured-bottom .block ol li { + list-style: none; +} +#featured-bottom .block ul, +#featured-bottom .block ol { + padding-left: 0; +} +#featured-bottom #block-user-login .form-text { + width: 185px; +} +#featured-bottom #block-user-online p { + margin-bottom: 0; +} +#featured-bottom #block-node-syndicate h2 { + overflow: hidden; + width: 0; + height: 0; +} +#featured-bottom-third #block-node-syndicate { + text-align: right; +} +#featured-bottom #block-search-form .form-type-search input { + width: 185px; +} +#featured-bottom-second #block-system-powered-by { + text-align: center; +} +#featured-bottom-third #block-system-powered-by { + text-align: right; +} diff --git a/core/themes/bartik/css/components/featured.css b/core/themes/bartik/css/components/featured-top.css similarity index 64% rename from core/themes/bartik/css/components/featured.css rename to core/themes/bartik/css/components/featured-top.css index 36c793f7a2f..c55bd59ec17 100644 --- a/core/themes/bartik/css/components/featured.css +++ b/core/themes/bartik/css/components/featured-top.css @@ -1,6 +1,6 @@ /* ----------------- Featured ----------------- */ -#featured { +#featured-top { text-align: center; font-size: 1.2em; font-weight: normal; @@ -12,21 +12,11 @@ border-bottom: 1px solid #e7e7e7; text-shadow: 1px 1px #fff; } -@media all and (min-width: 520px) { - #featured { - font-size: 1.643em; - } -} -#featured h2 { +#featured-top h2 { font-size: 1.2em; line-height: 1; } -@media all and (min-width: 520px) { - #featured h2 { - font-size: 1.174em; - } -} -#featured p { +#featured-top p { margin: 0; padding: 0; } diff --git a/core/themes/bartik/css/components/messages.css b/core/themes/bartik/css/components/messages.css index 5c46ce56265..d2a25db44de 100644 --- a/core/themes/bartik/css/components/messages.css +++ b/core/themes/bartik/css/components/messages.css @@ -5,7 +5,7 @@ margin: 0 auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } -.featured #messages { +.featured-top #messages { background: #f0f0f0; background: rgba(30, 50, 10, 0.08); } diff --git a/core/themes/bartik/css/components/triptych.css b/core/themes/bartik/css/components/triptych.css deleted file mode 100644 index c7258d9d9eb..00000000000 --- a/core/themes/bartik/css/components/triptych.css +++ /dev/null @@ -1,75 +0,0 @@ -/* ----------------- Triptych ----------------- */ - -#triptych-wrapper { - background-color: #f0f0f0; - background: rgba(30, 50, 10, 0.08); - border-top: 1px solid #e7e7e7; -} -#triptych h2 { - color: #000; - font-size: 1.4em; - margin-bottom: 0.6em; - text-shadow: 0 1px 0 #fff; - text-align: center; - line-height: 1; -} -#triptych .block { - margin-bottom: 1em; - padding-bottom: 1em; - border-bottom: 1px solid #dfdfdf; - line-height: 1.3; -} -@media all and (min-width: 520px) { - #triptych h2 { - font-size: 1.714em; - margin-bottom: 0.9em; - } - #triptych .block { - margin-bottom: 2em; - padding-bottom: 2em; - } -} -#triptych .block:last-child { - border-bottom: none; -} -#triptych .block ul li, -#triptych .block ol li { - list-style: none; -} -#triptych .block ul, -#triptych .block ol { - padding-left: 0; /* LTR */ -} -[dir="rtl"] #triptych .block ul, -[dir="rtl"] #triptych .block ol { - padding-right: 0; -} -#triptych #block-user-login .form-text { - width: 185px; -} -#triptych #block-user-online p { - margin-bottom: 0; -} -#triptych #block-node-syndicate h2 { - overflow: hidden; - width: 0; - height: 0; -} -#triptych-last #block-node-syndicate { - text-align: right; /* LTR */ -} -[dir="rtl"] #triptych-last #block-node-syndicate { - text-align: left; -} -#triptych #block-search-form .form-type-search input { - width: 185px; -} -#triptych-middle #block-system-powered-by { - text-align: center; -} -#triptych-last #block-system-powered-by { - text-align: right; /* LTR */ -} -[dir="rtl"] #triptych-last #block-system-powered-by { - text-align: left; -} diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css index 8537380b158..8d36908490a 100644 --- a/core/themes/bartik/css/layout.css +++ b/core/themes/bartik/css/layout.css @@ -10,10 +10,10 @@ body, min-height: 100%; } #header div.section, -#featured aside.section, +#featured-top aside.section, #messages div.section, #main, -#triptych, +#featured-bottom, #footer-columns, #site-footer__bottom { width: 100%; @@ -59,9 +59,9 @@ body, box-sizing: border-box; padding: 0 15px; } -.region-triptych-first, -.region-triptych-middle, -.region-triptych-last { +.region-featured-bottom-first, +.region-featured-bottom-second, +.region-featured-bottom-third { box-sizing: border-box; padding: 0 20px 0; } @@ -76,9 +76,9 @@ body, @media all and (min-width: 560px) and (max-width: 850px) { #sidebar-first, - .region-triptych-first, - .region-triptych-middle, - .region-triptych-last, + .region-featured-bottom-first, + .region-featured-bottom-second, + .region-featured-bottom-third, .region-footer-first, .region-footer-second, .region-footer-third, @@ -88,9 +88,9 @@ body, position: relative; } [dir="rtl"] #sidebar-first, - [dir="rtl"] .region-triptych-first, - [dir="rtl"] .region-triptych-middle, - [dir="rtl"] .region-triptych-last, + [dir="rtl"] .region-featured-bottom-first, + [dir="rtl"] .region-featured-bottom-second, + [dir="rtl"] .region-featured-bottom-third, [dir="rtl"] .region-footer-first, [dir="rtl"] .region-footer-second, [dir="rtl"] .region-footer-third, @@ -117,14 +117,14 @@ body, [dir="rtl"] .layout-one-sidebar #sidebar-second { margin-right: 0; } - .region-triptych-first, - .region-triptych-middle, - .region-triptych-last { + .region-featured-bottom-first, + .region-featured-bottom-second, + .region-featured-bottom-third { box-sizing: border-box; padding: 20px 15px 30px; width: 33%; } - .region-triptych-middle { + .region-featured-bottom-second { padding: 20px 5px 30px; } .region-footer-first, @@ -147,10 +147,10 @@ body, @media all and (min-width: 851px) { #header div.section, - #featured aside.section, + #featured-top aside.section, #messages div.section, #main, - #triptych, + #featured-bottom, #footer-columns, #site-footer__bottom { max-width: 1290px; @@ -158,9 +158,9 @@ body, #content, #sidebar-first, #sidebar-second, - .region-triptych-first, - .region-triptych-middle, - .region-triptych-last, + .region-featured-bottom-first, + .region-featured-bottom-second, + .region-featured-bottom-third, .region-footer-first, .region-footer-second, .region-footer-third, @@ -172,9 +172,9 @@ body, [dir="rtl"] #content, [dir="rtl"] #sidebar-first, [dir="rtl"] #sidebar-second, - [dir="rtl"] .region-triptych-first, - [dir="rtl"] .region-triptych-middle, - [dir="rtl"] .region-triptych-last, + [dir="rtl"] .region-featured-bottom-first, + [dir="rtl"] .region-featured-bottom-second, + [dir="rtl"] .region-featured-bottom-third, [dir="rtl"] .region-footer-first, [dir="rtl"] .region-footer-second, [dir="rtl"] .region-footer-third, @@ -223,9 +223,9 @@ body, [dir="rtl"] #sidebar-second { margin-right: -25%; } - .region-triptych-first, - .region-triptych-middle, - .region-triptych-last { + .region-featured-bottom-first, + .region-featured-bottom-second, + .region-featured-bottom-third { width: 33%; } .region-footer-first, diff --git a/core/themes/bartik/css/print.css b/core/themes/bartik/css/print.css index fbe386a43cc..7c07339bc81 100644 --- a/core/themes/bartik/css/print.css +++ b/core/themes/bartik/css/print.css @@ -27,13 +27,13 @@ body { .two-sidebars #content { width: 100%; } -#triptych-wrapper { +#featured-bottom-wrapper { width: 960px; margin: 0; padding: 0; border: none; } -#triptych-first, #triptych-middle, #triptych-last { +#featured-bottom-first, #featured-bottom-second, #featured-bottom-third { width: 250px; } diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig index 10f6fc9d4ca..838089265a2 100644 --- a/core/themes/bartik/templates/page.html.twig +++ b/core/themes/bartik/templates/page.html.twig @@ -52,14 +52,14 @@ * - page.header: Items for the header region. * - page.primary_menu: Items for the primary menu region. * - page.secondary_menu: Items for the secondary menu region. - * - page.featured: Items for the featured region. + * - page.featured_top: Items for the featured top region. * - page.help: Dynamic help text, mostly for admin pages. * - page.content: The main content of the current page. * - page.sidebar_first: Items for the first sidebar. * - page.sidebar_second: Items for the second sidebar. - * - page.triptych_first: Items for the first triptych. - * - page.triptych_middle: Items for the middle triptych. - * - page.triptych_last: Items for the last triptych. + * - page.featured_bottom_first: Items for the first featured bottom region. + * - page.featured_bottom_second: Items for the second featured bottom region. + * - page.featured_bottom_third: Items for the third featured bottom region. * - page.footer_first: Items for the first footer column. * - page.footer_second: Items for the second footer column. * - page.footer_third: Items for the third footer column. @@ -114,10 +114,10 @@
{{ messages }}
{% endif %} - {% if page.featured %} - - {% if page.triptych_first or page.triptych_middle or page.triptych_last %} -
-