185 lines
3.8 KiB
CSS
185 lines
3.8 KiB
CSS
/**
|
|
* "Yet Another Multicolumn Layout" - YAML CSS Framework
|
|
*
|
|
* default screen stylesheet - FULLPAGE-layout type layout
|
|
*
|
|
* @copyright © 2005-2013, Dirk Jesse
|
|
* @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
|
|
* YAML-CDL (http://www.yaml.de/license.html)
|
|
* @link http://www.yaml.de
|
|
* @package yaml
|
|
* @version 4.1.2
|
|
*/
|
|
@media screen {
|
|
/* force vertical scrollbar */
|
|
body {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/* Layout Module Configuration */
|
|
.ym-wrapper {
|
|
max-width: 80em;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ym-wbox {
|
|
padding: 1.5em;
|
|
}
|
|
|
|
/* fallback for missing media queries support*/
|
|
body > header, body > nav, body > main, body > footer {
|
|
min-width: 760px;
|
|
}
|
|
|
|
/* Basic Element Styling */
|
|
header {
|
|
background: #444;
|
|
color: #ccc;
|
|
}
|
|
header h1 {
|
|
background: transparent;
|
|
color: #fff;
|
|
}
|
|
header .ym-wbox {
|
|
padding: 1.5em;
|
|
}
|
|
|
|
nav {
|
|
background: #222222;
|
|
}
|
|
|
|
main .info {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
main aside .ym-gbox-right {
|
|
border-left: 1px #ddd solid;
|
|
}
|
|
|
|
footer {
|
|
background: #eee;
|
|
color: #444;
|
|
}
|
|
footer p {
|
|
margin: 0;
|
|
}
|
|
footer .ym-wbox {
|
|
padding: 1.5em;
|
|
}
|
|
|
|
.ym-gbox {
|
|
padding: 0 1.5em;
|
|
}
|
|
|
|
.ym-gbox-left {
|
|
padding: 0 1.5em 0 0;
|
|
}
|
|
|
|
.ym-gbox-right {
|
|
padding: 0 0 0 1.5em;
|
|
}
|
|
|
|
/* skip links styling */
|
|
.ym-skiplinks a.ym-skip:focus,
|
|
.ym-skiplinks a.ym-skip:active {
|
|
color: #fff;
|
|
background: #333;
|
|
border-bottom: 1px #000 solid;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
/* reset fallback values in modern browsers */
|
|
@media screen and (min-width: 0px) {
|
|
body > header, body > nav, body > main, body > footer {
|
|
min-width: 0;
|
|
}
|
|
}
|
|
@media screen and (max-width: 760px) {
|
|
/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
|
|
.linearize-level-1, .linearize-level-1 > [class*="ym-c"], .linearize-level-1 > [class*="ym-g"] {
|
|
/* linearization for grids and columns module */
|
|
display: block;
|
|
float: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: auto !important;
|
|
}
|
|
.linearize-level-1 > [class*="ym-c"] > [class*="ym-cbox"], .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
|
|
/* reset defined gutter values */
|
|
margin: 0;
|
|
padding: 0;
|
|
/* optional for containing floats */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.secondary {
|
|
border-top: 1px #888 solid;
|
|
margin-top: 1.5em !important;
|
|
padding-top: 1.5em !important;
|
|
}
|
|
|
|
main aside .ym-gbox-right {
|
|
border: 0 none;
|
|
}
|
|
|
|
.ym-searchform {
|
|
display: block;
|
|
float: none;
|
|
width: auto;
|
|
text-align: right;
|
|
}
|
|
|
|
.ym-searchform input[type="search"] {
|
|
width: 14%;
|
|
}
|
|
}
|
|
@media screen and (max-width: 480px) {
|
|
/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
|
|
.linearize-level-2, .linearize-level-2 > [class*="ym-c"], .linearize-level-2 > [class*="ym-g"] {
|
|
/* linearization for grids and columns module */
|
|
display: block;
|
|
float: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: auto !important;
|
|
}
|
|
.linearize-level-2 > [class*="ym-c"] > [class*="ym-cbox"], .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
|
|
/* reset defined gutter values */
|
|
margin: 0;
|
|
padding: 0;
|
|
/* optional for containing floats */
|
|
overflow: hidden;
|
|
}
|
|
|
|
header .ym-wbox {
|
|
padding: 0.75em 10px;
|
|
}
|
|
header h1 {
|
|
font-size: 1.5em;
|
|
line-height: 1em;
|
|
margin: 0;
|
|
}
|
|
|
|
footer .ym-wbox,
|
|
.ym-wbox,
|
|
.ym-searchform,
|
|
nav .ym-hlist ul {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.ym-searchform,
|
|
nav .ym-hlist ul,
|
|
nav .ym-hlist li {
|
|
display: block;
|
|
float: none;
|
|
width: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.ym-searchform input[type="search"] {
|
|
width: 75%;
|
|
}
|
|
}
|