advanced code snippet search

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
 
Expand | Embed | Plain Text 
  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.