summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwebchick2015-03-19 06:53:34 (GMT)
committerwebchick2015-03-19 06:53:34 (GMT)
commita6893b41723acec71a6b0ae309f52ff7918f3923 (patch)
tree3e21a1f198a2fc063cb5f09e6e6edabe265ceafa
parent4fd9ea47fc47b91ca61f89b5e73c32d8a90ea341 (diff)
Issue #2398451 by idebr, Dragan Eror, thamas, DickJohnson, emma.maria, saki007ster, LewisNyman: Clean up "layout" CSS in Bartik
-rw-r--r--core/themes/bartik/css/base/elements.css5
-rw-r--r--core/themes/bartik/css/colors.css2
-rw-r--r--core/themes/bartik/css/components/content.css40
-rw-r--r--core/themes/bartik/css/components/featured-bottom.css32
-rw-r--r--core/themes/bartik/css/components/footer.css39
-rw-r--r--core/themes/bartik/css/components/header.css20
-rw-r--r--core/themes/bartik/css/components/sidebar.css38
-rw-r--r--core/themes/bartik/css/layout.css246
-rw-r--r--core/themes/bartik/templates/page.html.twig16
9 files changed, 197 insertions, 241 deletions
diff --git a/core/themes/bartik/css/base/elements.css b/core/themes/bartik/css/base/elements.css
index 6eb45b5..5565dd8 100644
--- a/core/themes/bartik/css/base/elements.css
+++ b/core/themes/bartik/css/base/elements.css
@@ -1,6 +1,9 @@
/* ---------- Overall Specifications ---------- */
-
+html {
+ height: 100%;
+}
body {
+ min-height: 100%;
line-height: 1.5;
word-wrap: break-word;
margin: 0;
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 97ca1f5..a19cd96 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -2,6 +2,7 @@
body {
color: #3b3b3b;
+ background: #292929;
}
#page,
#main-wrapper,
@@ -39,7 +40,6 @@ a:active,
background-color: #f6f6f2;
border-color: #f9f9f9;
}
-#page-wrapper,
#site-footer__wrapper {
background: #292929;
}
diff --git a/core/themes/bartik/css/components/content.css b/core/themes/bartik/css/components/content.css
index 9b41285..28977ff 100644
--- a/core/themes/bartik/css/components/content.css
+++ b/core/themes/bartik/css/components/content.css
@@ -8,6 +8,46 @@ h1#page-title {
font-size: 2em;
line-height: 1;
}
+.main-content .section {
+ padding: 0 15px;
+}
+@media all and (min-width: 851px) {
+ .main-content {
+ float: left; /* LTR */
+ position: relative;
+ }
+ [dir="rtl"] .main-content {
+ float: right;
+ }
+ .layout-two-sidebars .main-content {
+ margin-left: 25%;
+ margin-right: 25%;
+ width: 50%;
+ }
+ .layout-one-sidebar .main-content {
+ width: 75%;
+ }
+ .layout-no-sidebars .main-content {
+ width: 100%;
+ }
+ .layout-sidebar-first .main-content {
+ margin-left: 25%; /* LTR */
+ margin-right: 0; /* LTR */
+ }
+ [dir="rtl"] .layout-sidebar-first .main-content {
+ margin-left: 0;
+ margin-right: 25%;
+ }
+ .layout-sidebar-second .main-content {
+ margin-right: 25%; /* LTR */
+ margin-left: 0; /* LTR */
+ }
+ [dir="rtl"] .layout-sidebar-second .main-content {
+ margin-right: 0;
+ margin-left: 25%;
+ }
+}
+
#content h2 {
margin-bottom: 2px;
font-size: 1.429em;
diff --git a/core/themes/bartik/css/components/featured-bottom.css b/core/themes/bartik/css/components/featured-bottom.css
index 6fdb71a..07f2a5c 100644
--- a/core/themes/bartik/css/components/featured-bottom.css
+++ b/core/themes/bartik/css/components/featured-bottom.css
@@ -5,6 +5,38 @@
background: rgba(30, 50, 10, 0.08);
border-top: 1px solid #e7e7e7;
}
+.region-featured-bottom-first,
+.region-featured-bottom-second,
+.region-featured-bottom-third {
+ box-sizing: border-box;
+ padding: 0 20px 0;
+}
+@media all and (min-width: 560px) {
+ .region-featured-bottom-first,
+ .region-featured-bottom-second,
+ .region-featured-bottom-third {
+ float: left; /* LTR */
+ position: relative;
+ box-sizing: border-box;
+ padding: 20px 15px 30px;
+ width: 33%;
+ }
+ [dir="rtl"] .region-featured-bottom-first,
+ [dir="rtl"] .region-featured-bottom-second,
+ [dir="rtl"] .region-featured-bottom-third {
+ float: right;
+ }
+ .region-featured-bottom-second {
+ padding: 20px 5px 30px;
+ }
+}
+@media all and (min-width: 851px) {
+ .region-featured-bottom-first,
+ .region-featured-bottom-second,
+ .region-featured-bottom-third {
+ padding: 0 20px;
+ }
+}
#featured-bottom h2 {
color: #000;
font-size: 1.4em;
diff --git a/core/themes/bartik/css/components/footer.css b/core/themes/bartik/css/components/footer.css
index 4dca1ff..0d7727d 100644
--- a/core/themes/bartik/css/components/footer.css
+++ b/core/themes/bartik/css/components/footer.css
@@ -2,6 +2,45 @@
#site-footer__wrapper {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ padding: 35px 15px 30px;
+}
+.region-footer-first,
+.region-footer-second,
+.region-footer-third,
+.region-footer-fourth,
+.region-footer-fifth {
+ box-sizing: border-box;
+ padding: 0 10px;
+}
+@media all and (min-width: 560px) {
+ .region-footer-first,
+ .region-footer-second,
+ .region-footer-third,
+ .region-footer-fourth {
+ float: left; /* LTR */
+ position: relative;
+ width: 50%;
+ }
+ [dir="rtl"] .region-footer-first,
+ [dir="rtl"] .region-footer-second,
+ [dir="rtl"] .region-footer-third,
+ [dir="rtl"] .region-footer-fourth {
+ float: right;
+ }
+ .region-footer-third {
+ clear: both;
+ }
+}
+@media all and (min-width: 851px) {
+ .region-footer-first,
+ .region-footer-second,
+ .region-footer-third,
+ .region-footer-fourth {
+ width: 25%;
+ }
+ .region-footer-third {
+ clear: none;
+ }
}
#site-footer__wrapper .block .content {
color: #c0c0c0;
diff --git a/core/themes/bartik/css/components/header.css b/core/themes/bartik/css/components/header.css
index 0d4cb58..8d1bd19 100644
--- a/core/themes/bartik/css/components/header.css
+++ b/core/themes/bartik/css/components/header.css
@@ -2,6 +2,26 @@
#header {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
+.header .section {
+ position: relative;
+}
+.region-header {
+ float: right; /* LTR */
+ margin: .5em 5px .75em;
+}
+[dir="rtl"] .region-header {
+ float: left;
+}
+@media all and (min-width: 461px) and (max-width: 900px) {
+ .region-header {
+ margin: .5em 5px .75em;
+ }
+}
+@media all and (min-width: 901px) {
+ .region-header {
+ margin: 1em 5px 1.5em;
+ }
+}
#logo,
.site-logo {
float: left; /* LTR */
diff --git a/core/themes/bartik/css/components/sidebar.css b/core/themes/bartik/css/components/sidebar.css
index 7f1d5d8..8b56352 100644
--- a/core/themes/bartik/css/components/sidebar.css
+++ b/core/themes/bartik/css/components/sidebar.css
@@ -1,7 +1,43 @@
/* ------------------ Sidebar ----------------- */
+@media all and (min-width: 560px) {
+ .sidebar {
+ float: left; /* LTR */
+ position: relative;
+ width: 50%;
+ }
+ [dir="rtl"] .sidebar {
+ float: right;
+ }
+ .layout-one-sidebar .sidebar {
+ width: 100%;
+ }
+}
+@media all and (min-width: 851px) {
+ .layout-one-sidebar .sidebar {
+ width: 25%;
+ }
+ #sidebar-first {
+ width: 25%;
+ margin-left: -100%; /* LTR */
+ }
+ [dir="rtl"] #sidebar-first {
+ margin-right: -100%;
+ margin-left: 0;
+ }
+ #sidebar-second {
+ width: 25%;
+ margin-left: -25%; /* LTR */
+ clear: none;
+ }
+ [dir="rtl"] #sidebar-second {
+ margin-right: -25%;
+ margin-left: 0;
+ }
+}
+
.sidebar .section {
- padding-top: 10px;
+ padding: 10px 15px 0;
}
.sidebar .block {
border-style: solid;
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index bd1b230..bb23434 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -1,243 +1,29 @@
+/**
+ * @file
+ * Bartik layout styling.
+ */
-/* ---------- Basic Layout Styles ----------- */
-
-html,
-body,
-#page {
- height: 100%;
-}
-#page-wrapper {
- min-height: 100%;
-}
-#header div.section,
-.featured-top__inner,
-#messages div.section,
-#main,
-#featured-bottom,
-#footer-columns,
-#site-footer__bottom {
- width: 100%;
+/**
+ * Container
+ */
+.layout-container {
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
-#header div.section {
- position: relative;
-}
-.region-header {
- float: right; /* LTR */
- margin: .5em 5px .75em;
-}
-[dir="rtl"] .region-header {
- float: left;
-}
-@media all and (min-width: 461px) and (max-width: 900px) {
- .region-header {
- margin: .5em 5px .75em;
- }
-}
-@media all and (min-width: 901px) {
- .region-header {
- margin: 1em 5px 1.5em;
- }
-}
-.region-secondary-menu .block-menu {
- width: 100%;
- margin: 0 auto;
-}
-#main-wrapper {
- min-height: 300px;
-}
-#content .section,
-.sidebar .section {
- padding: 0 15px;
-}
-#site-footer__wrapper {
- padding: 35px 15px 30px;
- box-sizing: border-box;
-}
-.region-featured-bottom-first,
-.region-featured-bottom-second,
-.region-featured-bottom-third {
- box-sizing: border-box;
- padding: 0 20px 0;
-}
-.region-footer-first,
-.region-footer-second,
-.region-footer-third,
-.region-footer-fourth,
-.region-footer-fifth {
- box-sizing: border-box;
- padding: 0 10px;
-}
-
-@media all and (min-width: 560px) and (max-width: 850px) {
-
- #sidebar-first,
- .region-featured-bottom-first,
- .region-featured-bottom-second,
- .region-featured-bottom-third,
- .region-footer-first,
- .region-footer-second,
- .region-footer-third,
- .region-footer-fourth {
- display: inline;
- float: left; /* LTR */
- position: relative;
- }
- [dir="rtl"] #sidebar-first,
- [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,
- [dir="rtl"] .region-footer-fourth {
- float: right;
- }
- #sidebar-first,
- #sidebar-second {
- width: 50%;
- }
- #sidebar-second {
- margin-left: 50%; /* LTR */
- }
- [dir="rtl"] #sidebar-second {
- margin-right: 50%;
- }
- .layout-one-sidebar #sidebar-first,
- .layout-one-sidebar #sidebar-second {
- width: 100%;
- }
- .layout-one-sidebar #sidebar-second {
- margin-left: 0; /* LTR */
- }
- [dir="rtl"] .layout-one-sidebar #sidebar-second {
- margin-right: 0;
- }
- .region-featured-bottom-first,
- .region-featured-bottom-second,
- .region-featured-bottom-third {
- box-sizing: border-box;
- padding: 20px 15px 30px;
- width: 33%;
- }
- .region-featured-bottom-second {
- padding: 20px 5px 30px;
- }
- .region-footer-first,
- .region-footer-second {
- box-sizing: border-box;
- padding: 0 10px;
- width: 50%;
- }
- .region-footer-third,
- .region-footer-fourth {
- box-sizing: border-box;
- padding: 0 10px;
- width: 50%;
- }
- .region-footer-thirdcolumn {
- clear: both;
- }
-}
-
@media all and (min-width: 851px) {
-
- #header div.section,
- .featured-top__inner,
- #messages div.section,
- #main,
- #featured-bottom,
- #footer-columns,
- #site-footer__bottom {
+ .layout-container {
max-width: 1290px;
}
- #content,
- #sidebar-first,
- #sidebar-second,
- .region-featured-bottom-first,
- .region-featured-bottom-second,
- .region-featured-bottom-third,
- .region-footer-first,
- .region-footer-second,
- .region-footer-third,
- .region-footer-fourth {
- display: inline;
- float: left; /* LTR */
- position: relative;
- }
- [dir="rtl"] #content,
- [dir="rtl"] #sidebar-first,
- [dir="rtl"] #sidebar-second,
- [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,
- [dir="rtl"] .region-footer-fourth {
- float: right;
- }
- .layout-two-sidebars #content {
- margin-left: 25%;
- margin-right: 25%;
- width: 50%;
- }
- .layout-one-sidebar #content {
- width: 75%;
- }
- .layout-no-sidebars #content {
- width: 100%;
- }
- .layout-sidebar-first #content {
- margin-left: 25%; /* LTR */
- margin-right: 0; /* LTR */
- }
- [dir="rtl"] .layout-sidebar-first #content {
- margin-left: 0;
- margin-right: 25%;
- }
- .layout-sidebar-second #content {
- margin-right: 25%; /* LTR */
- margin-left: 0; /* LTR */
- }
- [dir="rtl"] .layout-sidebar-second #content {
- margin-right: 0;
- margin-left: 25%;
- }
- #sidebar-first {
- width: 25%;
- margin-left: -100%; /* LTR */
- }
- [dir="rtl"] #sidebar-first {
- margin-right: -100%;
- }
- #sidebar-second {
- width: 25%;
- margin-left: -25%; /* LTR */
- clear: none;
- }
- [dir="rtl"] #sidebar-second {
- margin-right: -25%;
- }
- .region-featured-bottom-first,
- .region-featured-bottom-second,
- .region-featured-bottom-third {
- width: 33%;
- }
- .region-footer-first,
- .region-footer-second,
- .region-footer-third,
- .region-footer-fourth {
- box-sizing: border-box;
- padding: 0 10px;
- width: 25%;
- }
}
-/* ------------------- Main ------------------- */
-#main {
+/**
+ * Main
+ */
+.layout-main-wrapper {
+ min-height: 300px;
+}
+.layout-main {
margin-top: 20px;
margin-bottom: 40px;
}
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 04ffe94..0a20ede 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -74,8 +74,8 @@
#}
<div id="page-wrapper">
<div id="page">
- <header id="header" role="banner" aria-label="{{ 'Site header'|t}}">
- <div class="section clearfix">
+ <header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
+ <div class="section layout-container clearfix">
{{ page.secondary_menu }}
{% if logo %}
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo">
@@ -112,15 +112,15 @@
{{ page.messages }}
{% if page.featured_top %}
<div class="featured-top">
- <aside class="featured-top__inner clearfix" role="complementary">
+ <aside class="featured-top__inner section layout-container clearfix" role="complementary">
{{ page.featured_top }}
</aside>
</div>
{% endif %}
- <div id="main-wrapper" class="clearfix">
- <div id="main" class="clearfix">
+ <div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
+ <div id="main" class="layout-main clearfix">
{{ page.breadcrumb }}
- <main id="content" class="column" role="main">
+ <main id="content" class="column main-content" role="main">
<section class="section">
<a id="main-content" tabindex="-1"></a>
{{ title_prefix }}
@@ -160,7 +160,7 @@
</div>
{% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
<div id="featured-bottom-wrapper">
- <aside id="featured-bottom" class="clearfix" role="complementary">
+ <aside id="featured-bottom" class="section layout-container clearfix" role="complementary">
{{ page.featured_bottom_first }}
{{ page.featured_bottom_second }}
{{ page.featured_bottom_third }}
@@ -168,7 +168,7 @@
</div>
{% endif %}
<div id="site-footer__wrapper">
- <footer class="site-footer">
+ <footer class="site-footer section layout-container">
{% if page.footer_first or page.footer_second or page.footer_third or page.footer_fourth %}
<div id="footer-columns" class="clearfix">
{{ page.footer_first }}