typography.css 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. /* --------------------------------------------------------------
  2. typography.css
  3. * Sets up some sensible default typography.
  4. -------------------------------------------------------------- */
  5. /* Default font settings.
  6. The font-size percentage is of 16px. (0.75 * 16px = 12px) */
  7. html { font-size:100.01%; }
  8. body {
  9. font-size: 75%;
  10. color: #222;
  11. background: #fff;
  12. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  13. }
  14. /* Headings
  15. -------------------------------------------------------------- */
  16. h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }
  17. h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
  18. h2 { font-size: 2em; margin-bottom: 0.75em; }
  19. h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
  20. h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
  21. h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
  22. h6 { font-size: 1em; font-weight: bold; }
  23. h1 img, h2 img, h3 img,
  24. h4 img, h5 img, h6 img {
  25. margin: 0;
  26. }
  27. /* Text elements
  28. -------------------------------------------------------------- */
  29. p { margin: 0 0 1.5em; }
  30. /*
  31. These can be used to pull an image at the start of a paragraph, so
  32. that the text flows around it (usage: <p><img class="left">Text</p>)
  33. */
  34. .left { float: left !important; }
  35. p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; }
  36. .right { float: right !important; }
  37. p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; }
  38. a:focus,
  39. a:hover { color: #09f; }
  40. a { color: #06c; text-decoration: underline; }
  41. blockquote { margin: 1.5em; color: #666; font-style: italic; }
  42. strong,dfn { font-weight: bold; }
  43. em,dfn { font-style: italic; }
  44. sup, sub { line-height: 0; }
  45. abbr,
  46. acronym { border-bottom: 1px dotted #666; }
  47. address { margin: 0 0 1.5em; font-style: italic; }
  48. del { color:#666; }
  49. pre { margin: 1.5em 0; white-space: pre; }
  50. pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }
  51. /* Lists
  52. -------------------------------------------------------------- */
  53. li ul,
  54. li ol { margin: 0; }
  55. ul, ol { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }
  56. ul { list-style-type: disc; }
  57. ol { list-style-type: decimal; }
  58. dl { margin: 0 0 1.5em 0; }
  59. dl dt { font-weight: bold; }
  60. dd { margin-left: 1.5em;}
  61. /* Tables
  62. -------------------------------------------------------------- */
  63. /*
  64. Because of the need for padding on TH and TD, the vertical rhythm
  65. on table cells has to be 27px, instead of the standard 18px or 36px
  66. of other elements.
  67. */
  68. table { margin-bottom: 1.4em; width:100%; }
  69. th { font-weight: bold; }
  70. thead th { background: #c3d9ff; }
  71. th,td,caption { padding: 4px 10px 4px 5px; }
  72. /*
  73. You can zebra-stripe your tables in outdated browsers by adding
  74. the class "even" to every other table row.
  75. */
  76. tbody tr:nth-child(even) td,
  77. tbody tr.even td {
  78. background: #e5ecf9;
  79. }
  80. tfoot { font-style: italic; }
  81. caption { background: #eee; }
  82. /* Misc classes
  83. -------------------------------------------------------------- */
  84. .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
  85. .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
  86. .hide { display: none; }
  87. .quiet { color: #666; }
  88. .loud { color: #000; }
  89. .highlight { background:#ff0; }
  90. .added { background:#060; color: #fff; }
  91. .removed { background:#900; color: #fff; }
  92. .first { margin-left:0; padding-left:0; }
  93. .last { margin-right:0; padding-right:0; }
  94. .top { margin-top:0; padding-top:0; }
  95. .bottom { margin-bottom:0; padding-bottom:0; }