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 { ...@@ -235,6 +235,7 @@ tr .ajax-progress-throbber .throbber {
.element-invisible { .element-invisible {
position: absolute !important; position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
left: 0;
} }
/** /**
......
name = Bartik 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 package = Core
version = VERSION version = VERSION
core = 8.x core = 8.x
......
...@@ -8,7 +8,6 @@ body, ...@@ -8,7 +8,6 @@ body,
} }
#page-wrapper { #page-wrapper {
min-height: 100%; min-height: 100%;
min-width: 960px;
} }
#header div.section, #header div.section,
#featured div.section, #featured div.section,
...@@ -17,7 +16,8 @@ body, ...@@ -17,7 +16,8 @@ body,
#triptych, #triptych,
#footer-columns, #footer-columns,
#footer { #footer {
width: 960px; width: 100%;
max-width: 860px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
...@@ -26,47 +26,13 @@ body, ...@@ -26,47 +26,13 @@ body,
} }
.region-header { .region-header {
float: right; /* LTR */ float: right; /* LTR */
margin: 0 5px 10px; margin: .5em 5px .75em;
} border: 1px solid #ccc;
.with-secondary-menu .region-header {
margin-top: 3em;
}
.without-secondary-menu .region-header {
margin-top: 15px;
} }
#secondary-menu { #secondary-menu {
position: absolute; width: 100%;
right: 0; /* LTR */ margin: 0 auto;
top: 0; overflow: hidden;
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;
} }
#main-wrapper { #main-wrapper {
min-height: 300px; min-height: 300px;
...@@ -78,23 +44,153 @@ body, ...@@ -78,23 +44,153 @@ body,
.breadcrumb { .breadcrumb {
margin: 0 15px; 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-first,
.region-triptych-middle, .region-triptych-middle,
.region-triptych-last { .region-triptych-last {
margin: 20px 20px 30px; -moz-box-sizing: border-box;
width: 280px; -webkit-box-sizing: border-box;
} box-sizing: border-box;
#footer-wrapper { padding: 0 20px 0;
padding: 35px 5px 30px;
} }
.region-footer-firstcolumn, .region-footer-firstcolumn,
.region-footer-secondcolumn, .region-footer-secondcolumn,
.region-footer-thirdcolumn, .region-footer-thirdcolumn,
.region-footer-fourthcolumn { .region-footer-fourthcolumn {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px; padding: 0 10px;
width: 220px;
} }
#footer {
width: 940px; @media all and (min-width: 560px) and (max-width:850px) {
min-width: 920px;
#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 { body.maintenance-page {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
...@@ -9,25 +8,19 @@ body.maintenance-page { ...@@ -9,25 +8,19 @@ body.maintenance-page {
margin-right: auto; margin-right: auto;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
width: 800px;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-top: 40px; margin-top: 40px;
} }
.maintenance-page #page { .maintenance-page #page {
margin: 20px 40px 40px; margin: 10px;
} }
.maintenance-page #main-wrapper { .maintenance-page #main-wrapper {
min-height: inherit; min-height: inherit;
} }
.maintenance-page #header, .maintenance-page #header,
.maintenance-page #messages, .maintenance-page #messages {
.maintenance-page #main {
width: auto; width: auto;
} }
.maintenance-page #header div.section,
.maintenance-page #main {
width: 700px;
}
.maintenance-page #main { .maintenance-page #main {
margin: 0; margin: 0;
} }
...@@ -61,7 +54,21 @@ body.maintenance-page { ...@@ -61,7 +54,21 @@ body.maintenance-page {
.maintenance-page #messages div.messages { .maintenance-page #messages div.messages {
margin: 0; margin: 0;
} }
.maintenance-page #messages div.section { @media all and (min-width: 800px) {
padding: 0; .maintenance-page #page-wrapper {
width: auto; 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 { ...@@ -169,6 +169,11 @@ a.feed-icon {
display: inline-block; display: inline-block;
padding: 15px 0 0 0; padding: 15px 0 0 0;
} }
img {
max-width: 100%;
height: auto;
border: 0;
}
/* ------------------ Table Styles ------------------ */ /* ------------------ Table Styles ------------------ */
...@@ -242,13 +247,33 @@ table ul.links li { ...@@ -242,13 +247,33 @@ table ul.links li {
.item-list .pager { .item-list .pager {
font-size: 0.929em; 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 { ul.menu li {
margin: 0; margin: 0;
} }
.region-content ul, .region-content ul,
.region-content ol { .region-content ol {
margin: 1em 0; margin: 1em 0;
padding: 0 0 0.25em 2.5em; /* LTR */ padding: 0 0 0.25em 15px; /* LTR */
} }
.item-list ul li { .item-list ul li {
margin: 0; margin: 0;
...@@ -288,15 +313,16 @@ ul.tips { ...@@ -288,15 +313,16 @@ ul.tips {
} }
#logo { #logo {
float: left; /* LTR */ float: left; /* LTR */
padding: 15px 15px 15px 10px; /* LTR */ padding-left: 5px; /* LTR */
} }
#name-and-slogan { #name-and-slogan {
float: left; /* LTR */ float: left; /* LTR */
padding-top: 34px; margin: 0;
margin: 0 0 30px 15px; /* LTR */ padding: 5px 10px 8px;
} }
#site-name { #site-name {
font-size: 1.821em; font-size: 1.6em;
color: #686868; color: #686868;
line-height: 1; line-height: 1;
} }
...@@ -449,35 +475,34 @@ h1#site-name { ...@@ -449,35 +475,34 @@ h1#site-name {
} }
/* --------------- Main Menu ------------ */ /* --------------- Main Menu ------------ */
#main-menu { #main-menu {
clear: both; clear: both;
} }
#main-menu-links { #main-menu-links {
font-size: 0.929em; font-size: 0.929em;
margin: 0; margin: 0 5px;
padding: 0 15px; padding: 0;
text-align: left;
} }
#main-menu-links li { #main-menu-links li {
float: left; /* LTR */ float: none;
list-style: none; list-style: none;
padding: 0 1px; margin: 0;
margin: 0 1px; padding: 0;
width: 100%;
} }
#main-menu-links a { #main-menu-links a {
color: #333; color: #333;
background: #ccc; background: #ccc;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
float: left; /* LTR */ float: none;
height: 2.4em; display: block;
line-height: 2.4em;
padding: 0 0.8em;
text-decoration: none; text-decoration: none;
text-shadow: 0 1px #eee; text-shadow: 0 1px #eee;
-moz-border-radius-topleft: 8px; -moz-border-radius: 8px;
-moz-border-radius-topright: 8px; border-radius: 8px;
border-top-left-radius: 8px; margin-bottom: 4px;
border-top-right-radius: 8px; padding: 0.9em 0 0.9em 10px;
} }
#main-menu-links a:hover, #main-menu-links a:hover,
#main-menu-links a:focus { #main-menu-links a:focus {
...@@ -491,18 +516,21 @@ h1#site-name { ...@@ -491,18 +516,21 @@ h1#site-name {
#main-menu-links li a.active { #main-menu-links li a.active {
border-bottom: none; 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 ------------ */
#secondary-menu-links { #secondary-menu-links {
float: right; /* LTR */ float: right; /* LTR */
font-size: 0.929em; 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:hover,
#secondary-menu-links a:focus { #secondary-menu-links a:focus {
...@@ -520,10 +548,10 @@ h1#site-name { ...@@ -520,10 +548,10 @@ h1#site-name {
#featured { #featured {
text-align: center; text-align: center;
font-size: 1.643em; font-size: 1.2em;
font-weight: normal; font-weight: normal;
line-height: 1.4; line-height: 1.4;
padding: 20px 0 45px; padding: 20px 10px 45px;
margin: 0; margin: 0;
background: #f0f0f0; background: #f0f0f0;
background: rgba(30, 50, 10, 0.08); background: rgba(30, 50, 10, 0.08);
...@@ -531,7 +559,7 @@ h1#site-name { ...@@ -531,7 +559,7 @@ h1#site-name {
text-shadow: 1px 1px #fff; text-shadow: 1px 1px #fff;
} }
#featured h2 { #featured h2 {
font-size: 1.174em; font-size: 1.2em;
line-height: 1; line-height: 1;
} }
#featured p { #featured p {
...@@ -770,15 +798,15 @@ ul.links { ...@@ -770,15 +798,15 @@ ul.links {
} }
#triptych h2 { #triptych h2 {
color: #000; color: #000;
font-size: 1.714em; font-size: 1.4em;
margin-bottom: 0.8em; margin-bottom: 0.6em;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }
#triptych .block { #triptych .block {
margin-bottom: 2em; margin-bottom: 1em;
padding-bottom: 2em; padding-bottom: 1em;
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
line-height: 1.3; line-height: 1.3;
} }
...@@ -1602,3 +1630,106 @@ div.admin-panel .description { ...@@ -1602,3 +1630,106 @@ div.admin-panel .description {
border-top: 1px solid #d6d6d6; border-top: 1px solid #d6d6d6;
margin: 0; 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 {