Commit a7c37e03 authored by webchick's avatar webchick

Issue #1164784 by emma.maria, kattekrab, tadityar, DickJohnson, vermario,...

Issue #1164784 by emma.maria, kattekrab, tadityar, DickJohnson, vermario, luco, Jeff Burnz, davidhernandez, David_Rothstein, webchick, Bojhan, LewisNyman, alexpott: “Triptych” term is not widely understood; add "Featured top" and "Featured bottom"
parent e45522cf
...@@ -20,16 +20,17 @@ regions: ...@@ -20,16 +20,17 @@ regions:
help: Help help: Help
page_top: 'Page top' page_top: 'Page top'
page_bottom: 'Page bottom' page_bottom: 'Page bottom'
featured: Featured featured_top: 'Featured top'
breadcrumb: Breadcrumb breadcrumb: Breadcrumb
content: Content content: Content
sidebar_first: 'Sidebar first' sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second' sidebar_second: 'Sidebar second'
triptych_first: 'Triptych first' featured_bottom_first: 'Featured bottom first'
triptych_middle: 'Triptych middle' featured_bottom_second: 'Featured bottom second'
triptych_last: 'Triptych last' featured_bottom_third: 'Featured bottom third'
footer_first: 'Footer first' footer_first: 'Footer first'
footer_second: 'Footer second' footer_second: 'Footer second'
footer_third: 'Footer third' footer_third: 'Footer third'
footer_fourth: 'Footer fourth' footer_fourth: 'Footer fourth'
footer_fifth: 'Footer fifth' footer_fifth: 'Footer fifth'
...@@ -15,7 +15,7 @@ global-styling: ...@@ -15,7 +15,7 @@ global-styling:
css/components/contextual.css: {} css/components/contextual.css: {}
# @see https://www.drupal.org/node/2389735 # @see https://www.drupal.org/node/2389735
css/components/dropbutton.component.css: {} css/components/dropbutton.component.css: {}
css/components/featured.css: {} css/components/featured-top.css: {}
css/components/footer.css: {} css/components/footer.css: {}
css/components/form.css: {} css/components/form.css: {}
css/components/forum.css: {} css/components/forum.css: {}
...@@ -35,7 +35,7 @@ global-styling: ...@@ -35,7 +35,7 @@ global-styling:
css/components/table.css: {} css/components/table.css: {}
css/components/tabs.css: {} css/components/tabs.css: {}
css/components/tips.css: {} css/components/tips.css: {}
css/components/triptych.css: {} css/components/featured-bottom.css: {}
css/components/user.css: {} css/components/user.css: {}
# @see https://www.drupal.org/node/2389735 # @see https://www.drupal.org/node/2389735
css/components/vertical-tabs.component.css: {} css/components/vertical-tabs.component.css: {}
......
...@@ -31,8 +31,8 @@ function bartik_preprocess_html(&$variables) { ...@@ -31,8 +31,8 @@ function bartik_preprocess_html(&$variables) {
$variables['attributes']['class'][] = 'layout-no-sidebars'; $variables['attributes']['class'][] = 'layout-no-sidebars';
} }
if (!empty($variables['page']['featured'])) { if (!empty($variables['page']['featured_top'])) {
$variables['attributes']['class'][] = 'featured'; $variables['attributes']['class'][] = 'featured-top';
} }
} }
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
text-align: center; text-align: center;
text-shadow: none; text-shadow: none;
} }
#featured .demo-block { #featured-top .demo-block {
font-size: 0.55em; font-size: 0.55em;
} }
#header .demo-block { #header .demo-block {
......
/* ----------------- Triptych ----------------- */ /* ----------------- Featured Bottom ----------------- */
#triptych-wrapper { #featured-bottom-wrapper {
background-color: #f0f0f0; background-color: #f0f0f0;
background: rgba(30, 50, 10, 0.08); background: rgba(30, 50, 10, 0.08);
border-top: 1px solid #e7e7e7; border-top: 1px solid #e7e7e7;
} }
#triptych h2 { #featured-bottom h2 {
color: #000; color: #000;
font-size: 1.4em; font-size: 1.4em;
margin-bottom: 0.6em; margin-bottom: 0.6em;
...@@ -13,63 +13,43 @@ ...@@ -13,63 +13,43 @@
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }
#triptych .block { #featured-bottom .block {
margin-bottom: 1em; margin-bottom: 1em;
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
line-height: 1.3; line-height: 1.3;
} }
@media all and (min-width: 520px) { #featured-bottom .block:last-child {
#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; border-bottom: none;
} }
#triptych .block ul li, #featured-bottom .block ul li,
#triptych .block ol li { #featured-bottom .block ol li {
list-style: none; list-style: none;
} }
#triptych .block ul, #featured-bottom .block ul,
#triptych .block ol { #featured-bottom .block ol {
padding-left: 0; /* LTR */ padding-left: 0;
}
[dir="rtl"] #triptych .block ul,
[dir="rtl"] #triptych .block ol {
padding-right: 0;
} }
#triptych #block-user-login .form-text { #featured-bottom #block-user-login .form-text {
width: 185px; width: 185px;
} }
#triptych #block-user-online p { #featured-bottom #block-user-online p {
margin-bottom: 0; margin-bottom: 0;
} }
#triptych #block-node-syndicate h2 { #featured-bottom #block-node-syndicate h2 {
overflow: hidden; overflow: hidden;
width: 0; width: 0;
height: 0; height: 0;
} }
#triptych-last #block-node-syndicate { #featured-bottom-third #block-node-syndicate {
text-align: right; /* LTR */ text-align: right;
} }
[dir="rtl"] #triptych-last #block-node-syndicate { #featured-bottom #block-search-form .form-type-search input {
text-align: left;
}
#triptych #block-search-form .form-type-search input {
width: 185px; width: 185px;
} }
#triptych-middle #block-system-powered-by { #featured-bottom-second #block-system-powered-by {
text-align: center; text-align: center;
} }
#triptych-last #block-system-powered-by { #featured-bottom-third #block-system-powered-by {
text-align: right; /* LTR */ text-align: right;
}
[dir="rtl"] #triptych-last #block-system-powered-by {
text-align: left;
} }
/* ----------------- Featured ----------------- */ /* ----------------- Featured ----------------- */
#featured { #featured-top {
text-align: center; text-align: center;
font-size: 1.2em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
...@@ -12,21 +12,11 @@ ...@@ -12,21 +12,11 @@
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
text-shadow: 1px 1px #fff; text-shadow: 1px 1px #fff;
} }
@media all and (min-width: 520px) { #featured-top h2 {
#featured {
font-size: 1.643em;
}
}
#featured h2 {
font-size: 1.2em; font-size: 1.2em;
line-height: 1; line-height: 1;
} }
@media all and (min-width: 520px) { #featured-top p {
#featured h2 {
font-size: 1.174em;
}
}
#featured p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
margin: 0 auto; margin: 0 auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.featured #messages { .featured-top #messages {
background: #f0f0f0; background: #f0f0f0;
background: rgba(30, 50, 10, 0.08); background: rgba(30, 50, 10, 0.08);
} }
......
...@@ -10,10 +10,10 @@ body, ...@@ -10,10 +10,10 @@ body,
min-height: 100%; min-height: 100%;
} }
#header div.section, #header div.section,
#featured aside.section, #featured-top aside.section,
#messages div.section, #messages div.section,
#main, #main,
#triptych, #featured-bottom,
#footer-columns, #footer-columns,
#site-footer__bottom { #site-footer__bottom {
width: 100%; width: 100%;
...@@ -59,9 +59,9 @@ body, ...@@ -59,9 +59,9 @@ body,
box-sizing: border-box; box-sizing: border-box;
padding: 0 15px; padding: 0 15px;
} }
.region-triptych-first, .region-featured-bottom-first,
.region-triptych-middle, .region-featured-bottom-second,
.region-triptych-last { .region-featured-bottom-third {
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px 0; padding: 0 20px 0;
} }
...@@ -76,9 +76,9 @@ body, ...@@ -76,9 +76,9 @@ body,
@media all and (min-width: 560px) and (max-width: 850px) { @media all and (min-width: 560px) and (max-width: 850px) {
#sidebar-first, #sidebar-first,
.region-triptych-first, .region-featured-bottom-first,
.region-triptych-middle, .region-featured-bottom-second,
.region-triptych-last, .region-featured-bottom-third,
.region-footer-first, .region-footer-first,
.region-footer-second, .region-footer-second,
.region-footer-third, .region-footer-third,
...@@ -88,9 +88,9 @@ body, ...@@ -88,9 +88,9 @@ body,
position: relative; position: relative;
} }
[dir="rtl"] #sidebar-first, [dir="rtl"] #sidebar-first,
[dir="rtl"] .region-triptych-first, [dir="rtl"] .region-featured-bottom-first,
[dir="rtl"] .region-triptych-middle, [dir="rtl"] .region-featured-bottom-second,
[dir="rtl"] .region-triptych-last, [dir="rtl"] .region-featured-bottom-third,
[dir="rtl"] .region-footer-first, [dir="rtl"] .region-footer-first,
[dir="rtl"] .region-footer-second, [dir="rtl"] .region-footer-second,
[dir="rtl"] .region-footer-third, [dir="rtl"] .region-footer-third,
...@@ -117,14 +117,14 @@ body, ...@@ -117,14 +117,14 @@ body,
[dir="rtl"] .layout-one-sidebar #sidebar-second { [dir="rtl"] .layout-one-sidebar #sidebar-second {
margin-right: 0; margin-right: 0;
} }
.region-triptych-first, .region-featured-bottom-first,
.region-triptych-middle, .region-featured-bottom-second,
.region-triptych-last { .region-featured-bottom-third {
box-sizing: border-box; box-sizing: border-box;
padding: 20px 15px 30px; padding: 20px 15px 30px;
width: 33%; width: 33%;
} }
.region-triptych-middle { .region-featured-bottom-second {
padding: 20px 5px 30px; padding: 20px 5px 30px;
} }
.region-footer-first, .region-footer-first,
...@@ -147,10 +147,10 @@ body, ...@@ -147,10 +147,10 @@ body,
@media all and (min-width: 851px) { @media all and (min-width: 851px) {
#header div.section, #header div.section,
#featured aside.section, #featured-top aside.section,
#messages div.section, #messages div.section,
#main, #main,
#triptych, #featured-bottom,
#footer-columns, #footer-columns,
#site-footer__bottom { #site-footer__bottom {
max-width: 1290px; max-width: 1290px;
...@@ -158,9 +158,9 @@ body, ...@@ -158,9 +158,9 @@ body,
#content, #content,
#sidebar-first, #sidebar-first,
#sidebar-second, #sidebar-second,
.region-triptych-first, .region-featured-bottom-first,
.region-triptych-middle, .region-featured-bottom-second,
.region-triptych-last, .region-featured-bottom-third,
.region-footer-first, .region-footer-first,
.region-footer-second, .region-footer-second,
.region-footer-third, .region-footer-third,
...@@ -172,9 +172,9 @@ body, ...@@ -172,9 +172,9 @@ body,
[dir="rtl"] #content, [dir="rtl"] #content,
[dir="rtl"] #sidebar-first, [dir="rtl"] #sidebar-first,
[dir="rtl"] #sidebar-second, [dir="rtl"] #sidebar-second,
[dir="rtl"] .region-triptych-first, [dir="rtl"] .region-featured-bottom-first,
[dir="rtl"] .region-triptych-middle, [dir="rtl"] .region-featured-bottom-second,
[dir="rtl"] .region-triptych-last, [dir="rtl"] .region-featured-bottom-third,
[dir="rtl"] .region-footer-first, [dir="rtl"] .region-footer-first,
[dir="rtl"] .region-footer-second, [dir="rtl"] .region-footer-second,
[dir="rtl"] .region-footer-third, [dir="rtl"] .region-footer-third,
...@@ -223,9 +223,9 @@ body, ...@@ -223,9 +223,9 @@ body,
[dir="rtl"] #sidebar-second { [dir="rtl"] #sidebar-second {
margin-right: -25%; margin-right: -25%;
} }
.region-triptych-first, .region-featured-bottom-first,
.region-triptych-middle, .region-featured-bottom-second,
.region-triptych-last { .region-featured-bottom-third {
width: 33%; width: 33%;
} }
.region-footer-first, .region-footer-first,
......
...@@ -27,13 +27,13 @@ body { ...@@ -27,13 +27,13 @@ body {
.two-sidebars #content { .two-sidebars #content {
width: 100%; width: 100%;
} }
#triptych-wrapper { #featured-bottom-wrapper {
width: 960px; width: 960px;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
} }
#triptych-first, #triptych-middle, #triptych-last { #featured-bottom-first, #featured-bottom-second, #featured-bottom-third {
width: 250px; width: 250px;
} }
......
...@@ -52,14 +52,14 @@ ...@@ -52,14 +52,14 @@
* - page.header: Items for the header region. * - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region. * - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary 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.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page. * - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar. * - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar. * - page.sidebar_second: Items for the second sidebar.
* - page.triptych_first: Items for the first triptych. * - page.featured_bottom_first: Items for the first featured bottom region.
* - page.triptych_middle: Items for the middle triptych. * - page.featured_bottom_second: Items for the second featured bottom region.
* - page.triptych_last: Items for the last triptych. * - page.featured_bottom_third: Items for the third featured bottom region.
* - page.footer_first: Items for the first footer column. * - page.footer_first: Items for the first footer column.
* - page.footer_second: Items for the second footer column. * - page.footer_second: Items for the second footer column.
* - page.footer_third: Items for the third footer column. * - page.footer_third: Items for the third footer column.
...@@ -114,10 +114,10 @@ ...@@ -114,10 +114,10 @@
<div class="section clearfix">{{ messages }}</div> <div class="section clearfix">{{ messages }}</div>
</div> </div>
{% endif %} {% endif %}
{% if page.featured %} {% if page.featured_top %}
<div id="featured"> <div id="featured-top">
<aside class="section clearfix" role="complementary"> <aside class="section clearfix" role="complementary">
{{ page.featured }} {{ page.featured_top }}
</aside> </aside>
</div> </div>
{% endif %} {% endif %}
...@@ -162,12 +162,12 @@ ...@@ -162,12 +162,12 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% if page.triptych_first or page.triptych_middle or page.triptych_last %} {% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
<div id="triptych-wrapper"> <div id="featured-bottom-wrapper">
<aside id="triptych" class="clearfix" role="complementary"> <aside id="featured-bottom" class="clearfix" role="complementary">
{{ page.triptych_first }} {{ page.featured_bottom_first }}
{{ page.triptych_middle }} {{ page.featured_bottom_second }}
{{ page.triptych_last }} {{ page.featured_bottom_third }}
</aside> </aside>
</div> </div>
{% endif %} {% endif %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment