Commit 18d21ed0 authored by Dries's avatar Dries

- Patch #1192044 by mjohnq3, Manuel Garcia, effulgentsia, sun, JohnAlbin,...

- Patch #1192044 by mjohnq3, Manuel Garcia, effulgentsia, sun, JohnAlbin, jessebeach, moshe weitzman: Convert Bartik's layout to mobile-first and responsive.
parent 33d4ef88
......@@ -235,6 +235,7 @@ tr .ajax-progress-throbber .throbber {
.element-invisible {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
left: 0;
}
/**
......
name = Bartik
description = A flexible, recolorable theme with many regions.
description = A flexible, recolorable theme with many regions and a responsive, mobile-first layout.
package = Core
version = VERSION
core = 8.x
......
......@@ -8,7 +8,6 @@ body,
}
#page-wrapper {
min-height: 100%;
min-width: 960px;
}
#header div.section,
#featured div.section,
......@@ -17,7 +16,8 @@ body,
#triptych,
#footer-columns,
#footer {
width: 960px;
width: 100%;
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
......@@ -26,47 +26,13 @@ body,
}
.region-header {
float: right; /* LTR */
margin: 0 5px 10px;
}
.with-secondary-menu .region-header {
margin-top: 3em;
}
.without-secondary-menu .region-header {
margin-top: 15px;
margin: .5em 5px .75em;
border: 1px solid #ccc;
}
#secondary-menu {
position: absolute;
right: 0; /* LTR */
top: 0;
width: 480px;
}
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
display: inline;
float: left; /* LTR */
position: relative;
}
.one-sidebar #content {
width: 720px;
}
.two-sidebars #content {
width: 480px;
}
.no-sidebars #content {
width: 960px;
float: none;
}
#sidebar-first,
#sidebar-second {
width: 240px;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#main-wrapper {
min-height: 300px;
......@@ -78,23 +44,153 @@ body,
.breadcrumb {
margin: 0 15px;
}
#footer-wrapper {
padding: 35px 0 30px;
}
#footer-wrapper .section {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
margin: 20px 20px 30px;
width: 280px;
}
#footer-wrapper {
padding: 35px 5px 30px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px 0;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
width: 220px;
}
#footer {
width: 940px;
min-width: 920px;
@media all and (min-width: 560px) and (max-width:850px) {
#sidebar-first,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
display: inline;
float: left; /* LTR */
position: relative;
}
.one-sidebar #sidebar {
width: 100%;
}
#sidebar-first,
#sidebar-second {
width: 50%;
}
#sidebar-second {
margin-left: 50%;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 15px 30px;
width: 33%;
}
.region-triptych-middle {
padding: 20px 5px 30px;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
width: 50%;
}
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
width: 50%;
}
.region-footer-thirdcolumn {
clear: both;
}
}
@media all and (min-width: 851px) {
#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
max-width: 1290px;
}
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
display: inline;
float: left; /* LTR */
position: relative;
}
.two-sidebars #content {
margin-left: 25%;
margin-right: 25%;
width: 50%;
}
.one-sidebar #content {
width: 75%;
}
.sidebar-first #content {
margin-left: 25%;
margin-right: 0;
}
.sidebar-second #content {
margin-right: 25%;
margin-left: 0;
}
#sidebar-first {
width: 25%;
margin-left: -100%;
}
#sidebar-second {
width: 25%;
margin-left: -25%;
clear: none;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
width: 33%;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
width: 25%;
}
}
body.maintenance-page {
background-color: #fff;
color: #000;
......@@ -9,25 +8,19 @@ body.maintenance-page {
margin-right: auto;
min-width: 0;
min-height: 0;
width: 800px;
border: 1px solid #ddd;
margin-top: 40px;
}
.maintenance-page #page {
margin: 20px 40px 40px;
margin: 10px;
}
.maintenance-page #main-wrapper {
min-height: inherit;
}
.maintenance-page #header,
.maintenance-page #messages,
.maintenance-page #main {
.maintenance-page #messages {
width: auto;
}
.maintenance-page #header div.section,
.maintenance-page #main {
width: 700px;
}
.maintenance-page #main {
margin: 0;
}
......@@ -61,7 +54,21 @@ body.maintenance-page {
.maintenance-page #messages div.messages {
margin: 0;
}
.maintenance-page #messages div.section {
padding: 0;
width: auto;
@media all and (min-width: 800px) {
.maintenance-page #page-wrapper {
width: 800px;
}
.maintenance-page #header div.section,
.maintenance-page #main {
width: 700px;
}
.maintenance-page #messages div.section {
padding: 0;
width: auto;
}
}
@media all and (min-width: 600px) { /* @TODO find the proper breakpoint */
.maintenance-page #page {
margin: 20px 40px 40px;
}
}
......@@ -169,6 +169,11 @@ a.feed-icon {
display: inline-block;
padding: 15px 0 0 0;
}
img {
max-width: 100%;
height: auto;
border: 0;
}
/* ------------------ Table Styles ------------------ */
......@@ -242,13 +247,33 @@ table ul.links li {
.item-list .pager {
font-size: 0.929em;
}
.item-list .pager li {
padding: 0;
}
.item-list .pager a {
display: inline-block;
padding: 10px 15px;
}
.item-list .pager .pager-first a {
padding: 10px 10px 10px 0;
}
.item-list .pager .pager-previous a {
padding: 10px 0;
}
.item-list .pager .pager-current {
padding: 0 10px;
}
.item-list .pager .pager-next a,
.item-list .pager .pager-last a {
padding: 10px 0 10px 10px;
}
ul.menu li {
margin: 0;
}
.region-content ul,
.region-content ol {
margin: 1em 0;
padding: 0 0 0.25em 2.5em; /* LTR */
padding: 0 0 0.25em 15px; /* LTR */
}
.item-list ul li {
margin: 0;
......@@ -288,15 +313,16 @@ ul.tips {
}
#logo {
float: left; /* LTR */
padding: 15px 15px 15px 10px; /* LTR */
padding-left: 5px; /* LTR */
}
#name-and-slogan {
float: left; /* LTR */
padding-top: 34px;
margin: 0 0 30px 15px; /* LTR */
margin: 0;
padding: 5px 10px 8px;
}
#site-name {
font-size: 1.821em;
font-size: 1.6em;
color: #686868;
line-height: 1;
}
......@@ -449,35 +475,34 @@ h1#site-name {
}
/* --------------- Main Menu ------------ */
#main-menu {
clear: both;
}
#main-menu-links {
font-size: 0.929em;
margin: 0;
padding: 0 15px;
margin: 0 5px;
padding: 0;
text-align: left;
}
#main-menu-links li {
float: left; /* LTR */
float: none;
list-style: none;
padding: 0 1px;
margin: 0 1px;
margin: 0;
padding: 0;
width: 100%;
}
#main-menu-links a {
color: #333;
background: #ccc;
background: rgba(255, 255, 255, 0.7);
float: left; /* LTR */
height: 2.4em;
line-height: 2.4em;
padding: 0 0.8em;
float: none;
display: block;
text-decoration: none;
text-shadow: 0 1px #eee;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 4px;
padding: 0.9em 0 0.9em 10px;
}
#main-menu-links a:hover,
#main-menu-links a:focus {
......@@ -491,18 +516,21 @@ h1#site-name {
#main-menu-links li a.active {
border-bottom: none;
}
.featured #main-menu-links li a:active,
.featured #main-menu-links li a.active {
background: #f0f0f0;
background: rgba(240, 240, 240, 1.0);
}
/* --------------- Secondary Menu ------------ */
#secondary-menu-links {
float: right; /* LTR */
font-size: 0.929em;
margin: 10px 10px 0;
margin: 0 10px;
}
#secondary-menu-links li{
margin: 0;
padding: 0;
}
#secondary-menu-links a {
display: inline-block;
padding: 0.8em;
}
#secondary-menu-links a:hover,
#secondary-menu-links a:focus {
......@@ -520,10 +548,10 @@ h1#site-name {
#featured {
text-align: center;
font-size: 1.643em;
font-size: 1.2em;
font-weight: normal;
line-height: 1.4;
padding: 20px 0 45px;
padding: 20px 10px 45px;
margin: 0;
background: #f0f0f0;
background: rgba(30, 50, 10, 0.08);
......@@ -531,7 +559,7 @@ h1#site-name {
text-shadow: 1px 1px #fff;
}
#featured h2 {
font-size: 1.174em;
font-size: 1.2em;
line-height: 1;
}
#featured p {
......@@ -770,15 +798,15 @@ ul.links {
}
#triptych h2 {
color: #000;
font-size: 1.714em;
margin-bottom: 0.8em;
font-size: 1.4em;
margin-bottom: 0.6em;
text-shadow: 0 1px 0 #fff;
text-align: center;
line-height: 1;
}
#triptych .block {
margin-bottom: 2em;
padding-bottom: 2em;
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #dfdfdf;
line-height: 1.3;
}
......@@ -1602,3 +1630,106 @@ div.admin-panel .description {
border-top: 1px solid #d6d6d6;
margin: 0;
}
/* ----------- media queries ------------------------------- */
@media all and (min-width: 461px) and (max-width: 900px) {
/* ------------ Header and Menus -------------------------- */
.region-header {
margin: .5em 5px .75em;
}
#logo {
padding: 5px 0 0 5px; /* LTR */
}
#name-and-slogan {
padding: 10px 10px 8px;
}
#main-menu-links {
margin: 0 5px;
padding: 0;
text-align: center;
}
#main-menu-links li {
float: left;
margin-right: 5px;
padding: 0;
display: inline-block;
width: 32.75%;
}
#main-menu-links li:nth-child(3n) {
margin-right: -5px;
}
#main-menu-links a {
float: none;
display: block;
-moz-border-radius: 8px;
border-radius: 8px;
margin-bottom: 5px;
padding: 0.9em 5px;
}
}
@media all and (min-width: 901px) {
.region-header {
margin: 1em 5px 1.5em;
}
#logo {
padding: 15px 15px 15px 10px; /* LTR */
}
#name-and-slogan {
padding: 26px 0 0;
margin: 0 0 30px 15px; /* LTR */
}
#site-name {
font-size: 1.821em;
}
#main-menu-links {
font-size: 0.929em;
margin: 0;
padding: 0 15px;
}
#main-menu-links li {
float: left; /* LTR */
list-style: none;
padding: 0 1px;
margin: 0 1px;
width: auto;
}
#main-menu-links a {
float: left; /* LTR */
padding: 0.7em 0.8em;
margin-bottom: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.featured #main-menu-links li a:active,
.featured #main-menu-links li a.active {
background: #f0f0f0;
background: rgba(240, 240, 240, 1.0);
}
}
@media all and (min-width: 520px) {
/* ----------------- Featured ----------------- */
#featured {
font-size: 1.643em;
}
#featured h2 {
font-size: 1.174em;
}
/* ------------------ Triptych ----------------- */
#triptych h2 {
font-size: 1.714em;
margin-bottom: 0.9em;
}
#triptych .block {
margin-bottom: 2em;
padding-bottom: 2em;
}
}
......@@ -90,6 +90,23 @@
<div id="page-wrapper"><div id="page">
<div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">
<?php if ($secondary_menu): ?>
<div id="secondary-menu" class="navigation">
<?php print theme('links__system_secondary_menu', array(
'links' => $secondary_menu,
'attributes' => array(
'id' => 'secondary-menu-links',
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Secondary menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</div> <!-- /#secondary-menu -->
<?php endif; ?>
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
......@@ -142,22 +159,7 @@
</div> <!-- /#main-menu -->
<?php endif; ?>
<?php if ($secondary_menu): ?>
<div id="secondary-menu" class="navigation">
<?php print theme('links__system_secondary_menu', array(
'links' => $secondary_menu,
'attributes' => array(
'id' => 'secondary-menu-links',
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Secondary menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</div> <!-- /#secondary-menu -->
<?php endif; ?>
</div></div> <!-- /.section, /#header -->
......@@ -177,12 +179,6 @@
<?php print $breadcrumb; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
......@@ -209,6 +205,12 @@
</div></div> <!-- /.section, /#content -->
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
......
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