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.
- /**
- * @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;
- }
-
- img {
- height: auto;
- max-width: 100%;
- }
-
- @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%;
- }
- }
-
- /**
- * Responsive tables.
- */
- @media screen and (max-width:28.125em) { /* 450px */
- th.priority-low,
- td.priority-low,
- th.priority-medium,
- td.priority-medium {
- display: none;
- }
- }
- @media screen and (max-width:45em) { /* 720px */
- th.priority-low,
- td.priority-low {
- display: none;
- }
- }