Commit 5868d523 authored by Dries's avatar Dries

- Patch #1322794 by JohnAlbin, alanburke, jrbeeman, rupl, Tor Arne Thune: make...

- Patch #1322794 by JohnAlbin, alanburke, jrbeeman, rupl, Tor Arne Thune: make Stark use a responsive layout.
parent 5d2dca68
......@@ -282,7 +282,7 @@ class MenuRouterTestCase extends DrupalWebTestCase {
theme_enable(array('stark'));
$this->drupalGet('menu-test/theme-callback/use-stark-theme');
$this->assertText('Custom theme: stark. Actual theme: stark.', t('The theme callback system uses an optional theme once it has been enabled.'));
$this->assertRaw('stark/layout.css', t("The optional theme's CSS appears on the page."));
$this->assertRaw('stark/css/layout.css', t("The optional theme's CSS appears on the page."));
}
/**
......@@ -316,7 +316,7 @@ class MenuRouterTestCase extends DrupalWebTestCase {
// should be honored.
$this->drupalGet('menu-test/no-theme-callback');
$this->assertText('Custom theme: stark. Actual theme: stark.', t('The result of hook_custom_theme() is used as the theme for the current page.'));
$this->assertRaw('stark/layout.css', t("The Stark theme's CSS appears on the page."));
$this->assertRaw('stark/css/layout.css', t("The Stark theme's CSS appears on the page."));
}
/**
......
......@@ -499,7 +499,7 @@ class ThemeHookInitUnitTest extends DrupalWebTestCase {
$this->assertRaw('Themed output generated in hook_init()');
// Verify that the default theme's CSS still appears when the theme system
// is initialized in hook_init().
$this->assertRaw('stark/layout.css');
$this->assertRaw('stark/css/layout.css');
}
}
......
/**
* @file
* Right-to-left overrides for IE
*/
#content {
float: right;
}
body.sidebar-first #content {
left: 0;
right: 20%;
}
body.two-sidebars #content {
left: 0;
right: 20%;
}
#sidebar-first {
float: right;
left: 0;
right: -80%;
}
body.two-sidebars #sidebar-first {
left: 0;
right: -60%;
}
#sidebar-second {
float: left;
}
\ No newline at end of file
/**
* @file
* Stark layout method
*
* To avoid obscuring CSS added to the page by Drupal or a contrib module, the
* Stark theme itself has no styling, except just enough CSS to arrange the page
* in a traditional "Header, sidebars, content, and footer" layout.
*
* This layout method works reasonably well, but shouldn't be used on a
* production site because it can break. For example, if an over-large image
* (one that is wider than 20% of the viewport) is in the left sidebar, the
* image will overlap with the #content to the right.
* Force IE 8 and lower to render in desktop layout.
*/
#content,
#sidebar-first,
#sidebar-second {
float: left;
display: inline;
position: relative;
}
#content {
width: 100%;
float: left; /* LTR */
}
body.sidebar-first #content {
width: 80%;
......@@ -33,14 +17,14 @@ body.sidebar-second #content {
}
body.two-sidebars #content {
width: 60%;
left: 20%;
left: 20%; /* LTR */
}
#sidebar-first {
width: 20%;
float: left; /* LTR */
left: -80%; /* LTR */
}
body.two-sidebars #sidebar-first {
left: -60%; /* LTR */
}
......@@ -48,4 +32,4 @@ body.two-sidebars #sidebar-first {
#sidebar-second {
float: right; /* LTR */
width: 20%;
}
}
\ No newline at end of file
@media all and (min-width: 480px) and (max-width: 959px) {
body.sidebar-first #content,
body.two-sidebars #content {
float: left;
}
body.sidebar-second #content {
float: right;
}
#sidebar-first {
float: right;
}
#sidebar-second {
float: left;
}
body.two-sidebars #sidebar-second {
float: right;
clear: right;
}
body.two-sidebars #sidebar-second .block {
float: right;
}
}
@media all and (min-width: 960px) {
#content {
float: right;
}
body.sidebar-first #content {
left: 0;
right: 20%;
}
body.two-sidebars #content {
left: 0;
right: 20%;
}
#sidebar-first {
float: right;
left: 0;
right: -80%;
}
body.two-sidebars #sidebar-first {
left: 0;
right: -60%;
}
#sidebar-second {
float: left;
}
}
/**
* @file
* Stark layout method
*
* To avoid obscuring CSS added to the page by Drupal or a contrib module, the
* Stark theme itself has no styling, except just enough CSS to arrange the page
* in a traditional "Header, sidebars, content, and footer" layout.
*
* This layout method works reasonably well, but shouldn't be used on a
* production site because it can break. For example, if an over-large image
* (one that is wider than 20% of the viewport) is in the left sidebar, the
* image will overlap with the #content to the right.
*/
#content,
#sidebar-first,
#sidebar-second {
display: inline;
position: relative;
}
@media all and (min-width: 480px) and (max-width: 959px) {
#content {
width: 100%;
}
body.sidebar-first #content,
body.two-sidebars #content {
width: 67%;
float: right; /* LTR */
}
body.sidebar-second #content {
width: 67%;
float: left; /* LTR */
}
#sidebar-first {
width: 33%;
float: left; /* LTR */
}
#sidebar-second {
width: 33%;
float: right; /* LTR */
}
body.two-sidebars #sidebar-second {
clear: both;
width: 100%;
}
body.two-sidebars #sidebar-second .block {
float: left; /* LTR */
width: 33%;
}
body.two-sidebars #sidebar-second .block:nth-child(3n+1) {
clear: both;
}
}
@media all and (min-width: 960px) {
#content {
width: 100%;
float: left; /* LTR */
}
body.sidebar-first #content {
width: 80%;
left: 20%; /* LTR */
}
body.sidebar-second #content {
width: 80%;
}
body.two-sidebars #content {
width: 60%;
left: 20%; /* LTR */
}
#sidebar-first {
width: 20%;
float: left; /* LTR */
left: -80%; /* LTR */
}
body.two-sidebars #sidebar-first {
left: -60%; /* LTR */
}
#sidebar-second {
float: right; /* LTR */
width: 20%;
}
}
......@@ -3,4 +3,4 @@ description = This theme demonstrates Drupal's default HTML markup and CSS style
package = Core
version = VERSION
core = 8.x
stylesheets[all][] = layout.css
stylesheets[all][] = css/layout.css
<?php
/**
* Override or insert variables into the html template.
*
* @todo Based on outcome of http://drupal.org/node/1471382, revise this
* technique to use conditional classes vs. conditional stylesheets.
*/
function stark_preprocess_html(&$variables) {
// Add conditional CSS for IE8 and below.
drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 8', '!IE' => FALSE), 'weight' => 999, 'preprocess' => FALSE));
}
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