Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #2398451 by idebr, Dragan Eror, thamas, DickJohnson, emma.maria, saki007ster, LewisNyman: Clean up "layout" CSS in Bartik

8.0.x
webchick 2015-03-18 23:53:34 -07:00
parent 4fd9ea47fc
commit a6893b4172
9 changed files with 197 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/themes/bartik/css/base/elements.css
View File

@ -1,6 +1,9 @@
/* ---------- Overall Specifications ---------- */
html {
height: 100%;
}
body {
min-height: 100%;
line-height: 1.5;
word-wrap: break-word;
margin: 0;

2
core/themes/bartik/css/colors.css
View File

@ -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;
}

40
core/themes/bartik/css/components/content.css
View File

@ -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;

32
core/themes/bartik/css/components/featured-bottom.css
View File

@ -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;

39
core/themes/bartik/css/components/footer.css
View File

@ -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;

20
core/themes/bartik/css/components/header.css
View File

@ -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 */

38
core/themes/bartik/css/components/sidebar.css
View File

@ -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;

246
core/themes/bartik/css/layout.css
View File

@ -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;
}

16
core/themes/bartik/templates/page.html.twig
View File

@ -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 }}