screen-FULLPAGE-layout.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /**
  2. * "Yet Another Multicolumn Layout" - YAML CSS Framework
  3. *
  4. * default screen stylesheet - FULLPAGE-layout type layout
  5. *
  6. * @copyright Copyright 2005-2012, Dirk Jesse
  7. * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
  8. * YAML-CDL (http://www.yaml.de/license.html)
  9. * @link http://www.yaml.de
  10. * @package yaml
  11. * @version v4.0.1
  12. * @revision $Revision: 733 $
  13. * @lastmodified $Date: 2012-03-04 19:15:48 +0100 (So, 04 Mrz 2012) $
  14. */
  15. @media screen {
  16. /* force vertical scrollbar */
  17. body {
  18. overflow-y: scroll;
  19. }
  20. /* Layout Module Configuration */
  21. .ym-wrapper {
  22. max-width: 80em;
  23. margin: 0 auto;
  24. }
  25. .ym-wbox {
  26. padding: 1.5em;
  27. }
  28. /* fallback for missing media queries support*/
  29. body > header,
  30. body > nav,
  31. body > #main,
  32. body > footer {
  33. min-width: 760px;
  34. }
  35. /* Basic Element Styling */
  36. header {
  37. background: #444;
  38. color: #ccc;
  39. }
  40. header h1 {
  41. background: transparent;
  42. color: #fff;
  43. }
  44. nav {
  45. background: #222222;
  46. }
  47. #main .info {
  48. margin-bottom: 1.5em;
  49. }
  50. footer {
  51. background: #eee;
  52. color: #444;
  53. }
  54. footer p {
  55. margin: 0;
  56. }
  57. header .ym-wbox,
  58. footer .ym-wbox {
  59. padding: 1.5em;
  60. }
  61. .ym-gbox { padding: 0 1.5em; }
  62. .ym-gbox-left { padding: 0 1.5em 0 0; }
  63. .ym-gbox-right { padding: 0 0 0 1.5em; }
  64. section.box { padding: 0 1.5em 1.5em 1.5em; }
  65. #main aside .ym-gbox-right {
  66. border-left: 1px #ddd solid;
  67. }
  68. /* skip links styling */
  69. .ym-skiplinks a.ym-skip:focus,
  70. .ym-skiplinks a.ym-skip:active {
  71. color:#fff;
  72. background:#333;
  73. border-bottom:1px #000 solid;
  74. padding:10px 0;
  75. text-align: center;
  76. text-decoration:none;
  77. }
  78. }
  79. /* reset fallback values in modern browsers */
  80. @media screen and ( min-width: 0px ) {
  81. body > header,
  82. body > nav,
  83. body > #main,
  84. body > footer {
  85. min-width: 0;
  86. }
  87. }
  88. @media screen and ( max-width: 760px ) {
  89. .secondary {
  90. border-top: 1px #888 solid;
  91. margin-top: 1.5em !important;
  92. }
  93. #main aside .ym-gbox-right {
  94. border: 0 none;
  95. }
  96. /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
  97. .linearize-level-1,
  98. .linearize-level-1 > [class*="ym-g"],
  99. .linearize-level-1 > [class*="ym-col"] {
  100. display: block;
  101. float: none;
  102. padding: 0;
  103. margin: 0;
  104. width: 100% !important;
  105. }
  106. .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
  107. .linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
  108. overflow: hidden; /* optional for containing floats */
  109. padding: 0;
  110. margin: 0;
  111. }
  112. .ym-searchform {
  113. display:block;
  114. float: none;
  115. width: auto;
  116. text-align: right;
  117. }
  118. .ym-searchform input[type="search"] {
  119. width: 14%;
  120. }
  121. }
  122. @media screen and ( max-width: 480px) {
  123. header .ym-wbox {
  124. padding: 0.75em 10px;
  125. }
  126. footer .ym-wbox,
  127. .ym-wbox,
  128. .ym-searchform,
  129. nav .ym-hlist ul {
  130. padding-left: 10px;
  131. padding-right: 10px;
  132. }
  133. header h1 {
  134. font-size: 1.5em;
  135. line-height: 1em;
  136. margin: 0;
  137. }
  138. /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
  139. .linearize-level-2,
  140. .linearize-level-2 > [class*="ym-g"],
  141. .linearize-level-2 > [class*="ym-col"] {
  142. display: block;
  143. float: none;
  144. padding: 0;
  145. margin: 0;
  146. width: 100% !important;
  147. }
  148. .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
  149. .linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
  150. overflow: hidden; /* optional for containing floats */
  151. padding: 0;
  152. margin: 0;
  153. }
  154. .ym-searchform,
  155. nav .ym-hlist ul,
  156. nav .ym-hlist li {
  157. display:block;
  158. float: none;
  159. width: auto;
  160. text-align: left;
  161. }
  162. .ym-searchform input[type="search"] {
  163. width: 75%;
  164. }
  165. }