119 lines
2.3 KiB
CSS
119 lines
2.3 KiB
CSS
/**
|
|
* @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 .layout-content to the right.
|
|
*/
|
|
img {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
main:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
.layout-content,
|
|
.layout-sidebar-first,
|
|
.layout-sidebar-second {
|
|
display: inline;
|
|
position: relative;
|
|
}
|
|
|
|
@media all and (min-width: 480px) and (max-width: 959px) {
|
|
.layout-content {
|
|
width: 67%;
|
|
float: right; /* LTR */
|
|
}
|
|
[dir="rtl"] .layout-content {
|
|
float: left;
|
|
}
|
|
|
|
.layout-sidebar-first {
|
|
width: 33%;
|
|
float: left; /* LTR */
|
|
}
|
|
[dir="rtl"] .layout-sidebar-first {
|
|
float: right;
|
|
}
|
|
|
|
.layout-sidebar-second {
|
|
float: right; /* LTR */
|
|
clear: both;
|
|
width: 100%;
|
|
}
|
|
[dir="rtl"] .layout-sidebar-second {
|
|
float: right;
|
|
clear: right;
|
|
}
|
|
|
|
.layout-sidebar-second .block {
|
|
float: left; /* LTR */
|
|
width: 33%;
|
|
}
|
|
[dir="rtl"] .layout-sidebar-second .block {
|
|
float: right;
|
|
}
|
|
.layout-sidebar-second .block:nth-child(3n+1) {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 960px) {
|
|
.layout-content {
|
|
width: 60%;
|
|
float: left; /* LTR */
|
|
left: 20%; /* LTR */
|
|
}
|
|
[dir="rtl"] .layout-content {
|
|
float: right;
|
|
left: 0;
|
|
right: 20%;
|
|
}
|
|
|
|
.layout-sidebar-first {
|
|
width: 20%;
|
|
float: left; /* LTR */
|
|
left: -60%; /* LTR */
|
|
}
|
|
[dir="rtl"] .layout-sidebar-first {
|
|
float: right;
|
|
left: 0;
|
|
right: -60%;
|
|
}
|
|
|
|
.layout-sidebar-second {
|
|
float: right; /* LTR */
|
|
width: 20%;
|
|
}
|
|
[dir="rtl"] .layout-sidebar-second {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|