modest.css

   1 @media print {
   2   *,
   3   *:before,
   4   *:after {
   5     background: transparent !important;
   6     color: #000 !important;
   7     box-shadow: none !important;
   8     text-shadow: none !important;
   9   }
  10
  11   a,
  12   a:visited {
  13     text-decoration: underline;
  14   }
  15
  16   a[href]:after {
  17     content: " (" attr(href) ")";
  18   }
  19
  20   abbr[title]:after {
  21     content: " (" attr(title) ")";
  22   }
  23
  24   a[href^="#"]:after,
  25   a[href^="javascript:"]:after {
  26     content: "";
  27   }
  28
  29   pre,
  30   blockquote {
  31     border: 1px solid #999;
  32     page-break-inside: avoid;
  33   }
  34
  35   thead {
  36     display: table-header-group;
  37   }
  38
  39   tr,
  40   img {
  41     page-break-inside: avoid;
  42   }
  43
  44   img {
  45     max-width: 100% !important;
  46   }
  47
  48   p,
  49   h2,
  50   h3 {
  51     orphans: 3;
  52     widows: 3;
  53   }
  54
  55   h2,
  56   h3 {
  57     page-break-after: avoid;
  58   }
  59 }
  60
  61 pre,
  62 code {
  63   font-family: Menlo, Monaco, "Courier New", monospace;
  64 }
  65
  66 pre {
  67   padding: .5rem;
  68   line-height: 1.25;
  69   overflow-x: scroll;
  70 }
  71
  72 a,
  73 a:visited {
  74   color: #3498db;
  75 }
  76
  77 a:hover,
  78 a:focus,
  79 a:active {
  80   color: #2980b9;
  81 }
  82
  83 .modest-no-decoration {
  84   text-decoration: none;
  85 }
  86
  87 html {
  88   font-size: 12px;
  89 }
  90
  91 @media screen and (min-width: 32rem) and (max-width: 48rem) {
  92   html {
  93     font-size: 15px;
  94   }
  95 }
  96
  97 @media screen and (min-width: 48rem) {
  98   html {
  99     font-size: 16px;
 100   }
 101 }
 102
 103 body {
 104   line-height: 1.85;
 105 }
 106
 107 p,
 108 .modest-p {
 109   font-size: 1rem;
 110   margin-bottom: 1.3rem;
 111 }
 112
 113 h1,
 114 .modest-h1,
 115 h2,
 116 .modest-h2,
 117 h3,
 118 .modest-h3,
 119 h4,
 120 .modest-h4 {
 121   margin: 1.414rem 0 .5rem;
 122   font-weight: inherit;
 123   line-height: 1.42;
 124 }
 125
 126 h1,
 127 .modest-h1 {
 128   margin-top: 0;
 129   font-size: 3.998rem;
 130 }
 131
 132 h2,
 133 .modest-h2 {
 134   font-size: 2.827rem;
 135 }
 136
 137 h3,
 138 .modest-h3 {
 139   font-size: 1.999rem;
 140 }
 141
 142 h4,
 143 .modest-h4 {
 144   font-size: 1.414rem;
 145 }
 146
 147 h5,
 148 .modest-h5 {
 149   font-size: 1.121rem;
 150 }
 151
 152 h6,
 153 .modest-h6 {
 154   font-size: .88rem;
 155 }
 156
 157 small,
 158 .modest-small {
 159   font-size: .707em;
 160 }
 161
 162 /* https://github.com/mrmrs/fluidity */
 163
 164 img,
 165 canvas,
 166 iframe,
 167 video,
 168 svg,
 169 select,
 170 textarea {
 171   max-width: 100%;
 172 }
 173
 174 @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
 175
 176 @import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic);
 177
 178 html {
 179   font-size: 18px;
 180   max-width: 100%;
 181 }
 182
 183 body {
 184   color: #444;
 185   font-family: 'Open Sans Condensed', sans-serif;
 186   font-weight: 300;
 187   margin: 0 auto;
 188   max-width: 48rem;
 189   line-height: 1.45;
 190   padding: .25rem;
 191 }
 192
 193 h1,
 194 h2,
 195 h3,
 196 h4,
 197 h5,
 198 h6 {
 199   font-family: Arimo, Helvetica, sans-serif;
 200 }
 201
 202 h1,
 203 h2,
 204 h3 {
 205   border-bottom: 2px solid #fafafa;
 206   margin-bottom: 1.15rem;
 207   padding-bottom: .5rem;
 208   text-align: center;
 209 }
 210
 211 blockquote {
 212   border-left: 8px solid #fafafa;
 213   padding: 1rem;
 214 }
 215
 216 pre,
 217 code {
 218   background-color: #fafafa;
 219 }