Posted By

MarkusToe on 02/28/11


Tagged

css textmate less


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

ericmuyser


screen.less


 / Published in: Other
 

  1. /*
  2.  
  3. Markus Török
  4. toeroek.eu
  5.  
  6. SCREEN.CSS
  7.  
  8. */
  9.  
  10. @import url(classes.less);
  11. @import url(reset.css);
  12.  
  13.  
  14. /* LESS Variable ---------------------------------------------------------------------*/
  15. @10: 10em;
  16. @11: 11em;
  17. @12: 12em;
  18. @13: 13em;
  19. @14: 14em;
  20. @body-font: 16em;
  21. @18: 18em;
  22. @21: 20em;
  23. @24: 24em;
  24. @36: 36em;
  25. @48: 48em;
  26. @60: 60em;
  27. @72: 72em;
  28.  
  29. @cols1: 68/@body-font;
  30. @cols2: 160/@body-font;
  31. @cols3: 252/@body-font;
  32. @cols4: 344/@body-font;
  33. @cols5: 436/@body-font;
  34. @cols6: 528/@body-font;
  35. @cols7: 620/@body-font;
  36. @cols8: 712/@body-font;
  37. @cols9: 804/@body-font;
  38. @cols10: 896/@body-font;
  39.  
  40.  
  41. /* _BODY -----------------------------------------------------------------------------*/
  42.  
  43. body {
  44. color:#444;
  45. font: 16px/24px Georgia, serif;
  46. margin:0 auto; }
  47.  
  48.  
  49. /* _HEADINGS -------------------------------------------------------------------------*/
  50.  
  51.  
  52. /* _TYPOGRAPHY -----------------------------------------------------------------------*/
  53.  
  54. p {
  55. margin-bottom:24/@body-font;
  56. line-height:24/@body-font;}
  57.  
  58.  
  59. /* _LINKS ----------------------------------------------------------------------------*/
  60.  
  61. a:hover, a:active {
  62. outline: none; }
  63.  
  64. a, a:active, a:visited {
  65. color: #607890; }
  66.  
  67. a:hover {
  68. color: #036; }
  69.  
  70.  
  71. /* _IMAGES AND VIDEOS ----------------------------------------------------------------*/
  72.  
  73.  
  74. /* _TABLES ---------------------------------------------------------------------------*/
  75.  
  76.  
  77. /* _FORMS ----------------------------------------------------------------------------*/
  78.  
  79.  
  80. /* _LAYOUT ---------------------------------------------------------------------------*/
  81.  
  82. /* Default Layout: 992px.
  83. Gutters: 24px.
  84. Outer margins: 48px.
  85. Leftover space for scrollbars @1024px: 32px.
  86. -------------------------------------------------------------------------------
  87. cols 1 2 3 4 5 6 7 8 9 10
  88. px 68 160 252 344 436 528 620 712 804 896 */
  89.  
  90. #wrap {
  91. position:relative;
  92. margin:0 auto;
  93. width: 896/@body-font;
  94. padding: 72/@body-font 48/@body-font 84/@body-font;
  95. background: rgb(232,232,232);
  96. color: rgb(60,60,60);
  97. -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
  98. }
  99.  
  100.  
  101. /* BANNER ---------------------------------------------------------------------------*/
  102.  
  103. /*_NAV*/
  104.  
  105.  
  106. /* INTRODUCTION ---------------------------------------------------------------------*/
  107.  
  108.  
  109. /* SITE FOOTER ----------------------------------------------------------------------*/
  110.  
  111.  
  112. /* ENTRIES AND ARTICLES -------------------------------------------------------------*/
  113.  
  114.  
  115. /*
  116. * Non-semantic helper classes - HTML5 ✰ Boilerplate
  117. */
  118.  
  119. /* for image replacement */
  120. .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
  121.  
  122. /* Hide for both screenreaders and browsers
  123. css-discuss.incutio.com/wiki/Screenreader_Visibility */
  124. .hidden { display: none; visibility: hidden; }
  125.  
  126. /* Hide only visually, but have it available for screenreaders
  127. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
  128. .visuallyhidden { position: absolute !important;
  129. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  130. clip: rect(1px, 1px, 1px, 1px); }
  131.  
  132. /* Hide visually and from screenreaders, but maintain layout */
  133. .invisible { visibility: hidden; }
  134.  
  135. /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
  136. .clearfix:before, .clearfix:after {
  137. content: "\0020"; display: block; height: 0; visibility: hidden;
  138. }
  139.  
  140. .clearfix:after { clear: both; }
  141. /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
  142. .clearfix { zoom: 1; }
  143.  
  144.  
  145. /* Less Framework 4
  146. http://lessframework.com
  147. by Joni Korpi
  148. License: http://creativecommons.org/licenses/MIT/ */
  149.  
  150. /* 13-column layout
  151. 60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars)
  152. ---------------------------------------------------------------------------------------
  153. 1 2 3 4 5 6 7 8 9 10 11 12 13
  154. 60px 144px 228px 312px 396px 480px 564px 648px 732px 816px 900px 984px 1068px */
  155.  
  156. @media only screen and (min-width: 1212px) {
  157. #wrap {
  158. padding: 96px 72px 0;
  159. width: 1068px;
  160. position: relative;
  161. }
  162. }
  163.  
  164.  
  165. /* Tablet Layout: 768px.
  166. Gutters: 24px.
  167. Outer margins: 28px.
  168. Inherits styles from: Default Layout.
  169. -----------------------------------------------------------------
  170. cols 1 2 3 4 5 6 7 8
  171. px 68 160 252 344 436 528 620 712 */
  172.  
  173. @media only screen and (min-width: 768px) and (max-width: 991px) {
  174. #wrap {
  175. width: 712/@body-font;
  176. padding: 48/@body-font 28/@body-font 60/@body-font;
  177. }
  178. }
  179.  
  180.  
  181. /* Mobile Layout: 320px.
  182. Gutters: 24px.
  183. Outer margins: 34px.
  184. Inherits styles from: Default Layout.
  185. ---------------------------------------------
  186. cols 1 2 3
  187. px 68 160 252 */
  188.  
  189. @media only screen and (max-width: 767px) {
  190. #wrap {
  191. width: 252/@body-font;
  192. padding: 48/@body-font 34/@body-font 60/@body-font;
  193. }
  194. }
  195.  
  196.  
  197. /* Wide Mobile Layout: 480px.
  198. Gutters: 24px.
  199. Outer margins: 22px.
  200. Inherits styles from: Default Layout, Mobile Layout.
  201. ------------------------------------------------------------
  202. cols 1 2 3 4 5
  203. px 68 160 252 344 436 */
  204.  
  205. @media only screen and (min-width: 480px) and (max-width: 767px) {
  206. #wrap {
  207. width: 436/@body-font;
  208. padding: 36/@body-font 22/@body-font 48/@body-font;
  209. }
  210. }
  211.  
  212. /*
  213. * print styles
  214. * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
  215. */
  216. @media print {
  217. * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  218. a, a:visited { color: #444 !important; text-decoration: underline; }
  219. a:after { content: " (" attr(href) ")"; }
  220. abbr:after { content: " (" attr(title) ")"; }
  221. .ir a:after { content: ""; } /* Don't show links for images */
  222. pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  223. thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  224. tr, img { page-break-inside: avoid; }
  225. @page { margin: 0.5cm; }
  226. p, h2, h3 { orphans: 3; widows: 3; }
  227. h2, h3{ page-break-after: avoid; }
  228. }

Report this snippet  

You need to login to post a comment.