advanced code snippet search

Posted By

MarkusToe on 12/22/10


Tagged

css textmate


Versions (?)

screenCSS

 / 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.  
  16.  
  17. /* _BODY -----------------------------------------------------------------------------*/
  18.  
  19. body {
  20. color:#444;
  21. font: normal 100% Helvetica, Arial, sans-serif; *font-size:small;
  22. line-height:1.5em; /*24px*/
  23. margin:0 auto; }
  24.  
  25.  
  26. /* _HEADINGS -------------------------------------------------------------------------*/
  27.  
  28.  
  29. /* _TYPOGRAPHY -----------------------------------------------------------------------*/
  30.  
  31. p {
  32. margin-bottom:24px;
  33. line-height:24px;}
  34.  
  35.  
  36. /* _LINKS ----------------------------------------------------------------------------*/
  37.  
  38. a:hover, a:active { 
  39. outline: none; }
  40.  
  41. a, a:active, a:visited { 
  42. color: #607890; }
  43.  
  44. a:hover { 
  45. color: #036; }
  46.  
  47.  
  48. /* _IMAGES AND VIDEOS ----------------------------------------------------------------*/
  49.  
  50.  
  51. /* _TABLES ---------------------------------------------------------------------------*/
  52.  
  53.  
  54. /* _FORMS ----------------------------------------------------------------------------*/
  55.  
  56.  
  57. /* _LAYOUT ---------------------------------------------------------------------------*/
  58.  
  59. #wrap {
  60. position:relative;
  61. margin:0 auto;
  62. max-width:940px;
  63. /*width:80%;*/ }
  64.  
  65.  
  66. /* BANNER ---------------------------------------------------------------------------*/
  67.  
  68. /*_NAV*/
  69.  
  70.  
  71. /* INTRODUCTION ---------------------------------------------------------------------*/
  72.  
  73.  
  74. /* SITE FOOTER ----------------------------------------------------------------------*/
  75.  
  76.  
  77. /* ENTRIES AND ARTICLES -------------------------------------------------------------*/
  78.  
  79.  
  80. /* 
  81.  * Non-semantic helper classes - HTML5 ✰ Boilerplate 
  82.  */	
  83.  
  84. /* for image replacement */
  85. .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
  86.  
  87. /* Hide for both screenreaders and browsers
  88.    css-discuss.incutio.com/wiki/Screenreader_Visibility */
  89. .hidden { display: none; visibility: hidden; } 
  90.  
  91. /* Hide only visually, but have it available for screenreaders 
  92.    www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
  93. .visuallyhidden { position: absolute !important;    
  94.   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  95.   clip: rect(1px, 1px, 1px, 1px); }
  96.  
  97. /* Hide visually and from screenreaders, but maintain layout */
  98. .invisible { visibility: hidden; }
  99.  
  100. /* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */
  101. .clearfix:before, .clearfix:after {
  102.   content: "\0020"; display: block; height: 0; visibility: hidden;	
  103. } 
  104.  
  105. .clearfix:after { clear: both; }
  106. /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
  107. .clearfix { zoom: 1; }	
  108.  
  109.  
  110. /*
  111.  * Media queries for responsive design
  112.  * These follow after primary styles so they will successfully override. - HTML5 ✰ Boilerplate 
  113.  */
  114.  
  115. @media screen and (max-width:1200px) {
  116.  
  117. }
  118.  
  119. @media screen and (max-width:650px) {
  120.  
  121. }
  122.  
  123. @media screen and (max-width: 480px) {
  124.  
  125. }
  126.  
  127. @media all and (orientation:portrait) { 
  128.   /* Style adjustments for portrait mode goes here */
  129.  
  130. }
  131.  
  132. @media all and (orientation:landscape) { 
  133.   /* Style adjustments for landscape mode goes here */
  134.  
  135. }
  136.  
  137. /* 
  138.  * print styles
  139.  * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
  140.  */
  141. @media print {
  142.   * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  143.   a, a:visited { color: #444 !important; text-decoration: underline; }
  144.   a:after { content: " (" attr(href) ")"; } 
  145.   abbr:after { content: " (" attr(title) ")"; }
  146.   .ir a:after { content: ""; }  /* Don't show links for images */
  147.   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  148.   thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  149.   tr, img { page-break-inside: avoid; }
  150.   @page { margin: 0.5cm; }
  151.   p, h2, h3 { orphans: 3; widows: 3; }
  152.   h2, h3{ page-break-after: avoid; }
  153. }

Report this snippet  

You need to login to post a comment.