style.css

   1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   2   margin: 0;
   3   padding: 0;
   4   border: 0;
   5   font-size: 100%;
   6   font: inherit;
   7   vertical-align: baseline; }
   8
   9 /* HTML5 display-role reset for older browsers */
  10 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  11   display: block; }
  12
  13 body {
  14   line-height: 1; }
  15
  16 ol, ul {
  17   list-style: none; }
  18
  19 blockquote, q {
  20   quotes: none; }
  21
  22 blockquote:before, blockquote:after, q:before, q:after {
  23   content: '';
  24   content: none; }
  25
  26 table {
  27   border-collapse: collapse;
  28   border-spacing: 0; }
  29
  30 .highlight {
  31   background-color: #222222;
  32   padding: 5px 10px;
  33   margin: 20px 0; }
  34
  35 .highlight pre {
  36   word-break: break-all;
  37   word-wrap: break-word; }
  38
  39 code {
  40   font-family: 'Courier', monospace;
  41   font-size: 14px; }
  42
  43 .highlight .c, .highlight .c1 {
  44   color: #586e75; }
  45
  46 /* Comment */
  47 .highlight .err {
  48   color: #93a1a1; }
  49
  50 /* Error */
  51 .highlight .g {
  52   color: #93a1a1; }
  53
  54 /* Generic */
  55 .highlight .k {
  56   color: #859900; }
  57
  58 /* Keyword */
  59 .highlight .l {
  60   color: #93a1a1; }
  61
  62 /* Literal */
  63 .highlight .n {
  64   color: #93a1a1; }
  65
  66 /* Name */
  67 .highlight .o {
  68   color: #859900; }
  69
  70 /* Operator */
  71 .highlight .x {
  72   color: #cb4b16; }
  73
  74 /* Other */
  75 .highlight .p {
  76   color: #93a1a1; }
  77
  78 /* Punctuation */
  79 .highlight .cm {
  80   color: #586e75; }
  81
  82 /* Comment.Multiline */
  83 .highlight .cp {
  84   color: #859900; }
  85
  86 /* Comment.Preproc */
  87 .highlight .c1 {
  88   color: #586e75; }
  89
  90 /* Comment.Single */
  91 .highlight .cs {
  92   color: #859900; }
  93
  94 /* Comment.Special */
  95 .highlight .gd {
  96   color: #2aa198; }
  97
  98 /* Generic.Deleted */
  99 .highlight .ge {
 100   color: #93a1a1;
 101   font-style: italic; }
 102
 103 /* Generic.Emph */
 104 .highlight .gr {
 105   color: #dc322f; }
 106
 107 /* Generic.Error */
 108 .highlight .gh {
 109   color: #cb4b16; }
 110
 111 /* Generic.Heading */
 112 .highlight .gi {
 113   color: #859900; }
 114
 115 /* Generic.Inserted */
 116 .highlight .go {
 117   color: #93a1a1; }
 118
 119 /* Generic.Output */
 120 .highlight .gp {
 121   color: #93a1a1; }
 122
 123 /* Generic.Prompt */
 124 .highlight .gs {
 125   color: #93a1a1;
 126   font-weight: bold; }
 127
 128 /* Generic.Strong */
 129 .highlight .gu {
 130   color: #cb4b16; }
 131
 132 /* Generic.Subheading */
 133 .highlight .gt {
 134   color: #93a1a1; }
 135
 136 /* Generic.Traceback */
 137 .highlight .kc {
 138   color: #cb4b16; }
 139
 140 /* Keyword.Constant */
 141 .highlight .kd {
 142   color: #268bd2; }
 143
 144 /* Keyword.Declaration */
 145 .highlight .kn {
 146   color: #859900; }
 147
 148 /* Keyword.Namespace */
 149 .highlight .kp {
 150   color: #859900; }
 151
 152 /* Keyword.Pseudo */
 153 .highlight .kr {
 154   color: #268bd2; }
 155
 156 /* Keyword.Reserved */
 157 .highlight .kt {
 158   color: #dc322f; }
 159
 160 /* Keyword.Type */
 161 .highlight .ld {
 162   color: #93a1a1; }
 163
 164 /* Literal.Date */
 165 .highlight .m {
 166   color: #2aa198; }
 167
 168 /* Literal.Number */
 169 .highlight .s {
 170   color: #2aa198; }
 171
 172 /* Literal.String */
 173 .highlight .na {
 174   color: #93a1a1; }
 175
 176 /* Name.Attribute */
 177 .highlight .nb {
 178   color: #b58900; }
 179
 180 /* Name.Builtin */
 181 .highlight .nc {
 182   color: #268bd2; }
 183
 184 /* Name.Class */
 185 .highlight .no {
 186   color: #cb4b16; }
 187
 188 /* Name.Constant */
 189 .highlight .nd {
 190   color: #268bd2; }
 191
 192 /* Name.Decorator */
 193 .highlight .ni {
 194   color: #cb4b16; }
 195
 196 /* Name.Entity */
 197 .highlight .ne {
 198   color: #cb4b16; }
 199
 200 /* Name.Exception */
 201 .highlight .nf {
 202   color: #268bd2; }
 203
 204 /* Name.Function */
 205 .highlight .nl {
 206   color: #93a1a1; }
 207
 208 /* Name.Label */
 209 .highlight .nn {
 210   color: #93a1a1; }
 211
 212 /* Name.Namespace */
 213 .highlight .nx {
 214   color: #555555; }
 215
 216 /* Name.Other */
 217 .highlight .py {
 218   color: #93a1a1; }
 219
 220 /* Name.Property */
 221 .highlight .nt {
 222   color: #268bd2; }
 223
 224 /* Name.Tag */
 225 .highlight .nv {
 226   color: #268bd2; }
 227
 228 /* Name.Variable */
 229 .highlight .ow {
 230   color: #859900; }
 231
 232 /* Operator.Word */
 233 .highlight .w {
 234   color: #93a1a1; }
 235
 236 /* Text.Whitespace */
 237 .highlight .mf {
 238   color: #2aa198; }
 239
 240 /* Literal.Number.Float */
 241 .highlight .mh {
 242   color: #2aa198; }
 243
 244 /* Literal.Number.Hex */
 245 .highlight .mi {
 246   color: #2aa198; }
 247
 248 /* Literal.Number.Integer */
 249 .highlight .mo {
 250   color: #2aa198; }
 251
 252 /* Literal.Number.Oct */
 253 .highlight .sb {
 254   color: #586e75; }
 255
 256 /* Literal.String.Backtick */
 257 .highlight .sc {
 258   color: #2aa198; }
 259
 260 /* Literal.String.Char */
 261 .highlight .sd {
 262   color: #93a1a1; }
 263
 264 /* Literal.String.Doc */
 265 .highlight .s2 {
 266   color: #2aa198; }
 267
 268 /* Literal.String.Double */
 269 .highlight .se {
 270   color: #cb4b16; }
 271
 272 /* Literal.String.Escape */
 273 .highlight .sh {
 274   color: #93a1a1; }
 275
 276 /* Literal.String.Heredoc */
 277 .highlight .si {
 278   color: #2aa198; }
 279
 280 /* Literal.String.Interpol */
 281 .highlight .sx {
 282   color: #2aa198; }
 283
 284 /* Literal.String.Other */
 285 .highlight .sr {
 286   color: #dc322f; }
 287
 288 /* Literal.String.Regex */
 289 .highlight .s1 {
 290   color: #2aa198; }
 291
 292 /* Literal.String.Single */
 293 .highlight .ss {
 294   color: #2aa198; }
 295
 296 /* Literal.String.Symbol */
 297 .highlight .bp {
 298   color: #268bd2; }
 299
 300 /* Name.Builtin.Pseudo */
 301 .highlight .vc {
 302   color: #268bd2; }
 303
 304 /* Name.Variable.Class */
 305 .highlight .vg {
 306   color: #268bd2; }
 307
 308 /* Name.Variable.Global */
 309 .highlight .vi {
 310   color: #268bd2; }
 311
 312 /* Name.Variable.Instance */
 313 .highlight .il {
 314   color: #2aa198; }
 315
 316 /* Literal.Number.Integer.Long */
 317 html {
 318   font-size: 100%; }
 319
 320 body {
 321   background: white;
 322   font: 18px/1.4 Helvetica, Arial, sans-serif;
 323   color: #333333; }
 324
 325 .container {
 326   margin: 0 auto;
 327   max-width: 740px;
 328   width: 100%; }
 329
 330 h1, h2, h3, h4, h5, h6 {
 331   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 332   color: #222222;
 333   font-weight: 500;
 334   line-height: 1.7;
 335   margin: 1em 0 15px;
 336   padding: 0; }
 337
 338 h1 {
 339   font-weight: 400;
 340   font-size: 32px; }
 341   h1 a {
 342     color: inherit; }
 343
 344 h2 {
 345   font-size: 26px; }
 346
 347 h3 {
 348   font-size: 22px; }
 349
 350 h4 {
 351   font-size: 18px;
 352   font-weight: 600; }
 353
 354 h5 {
 355   font-size: 18px;
 356   color: #666666;
 357   font-weight: 600; }
 358
 359 p {
 360   margin: 15px 0; }
 361
 362 a {
 363   text-decoration: none;
 364   cursor: pointer;
 365   color: #4183c4; }
 366   a:hover, a:active {
 367     text-decoration: underline; }
 368
 369 ul, ol {
 370   margin: 15px 0;
 371   padding-left: 30px; }
 372
 373 ul {
 374   list-style-type: disc; }
 375
 376 ol {
 377   list-style-type: decimal; }
 378
 379 ol ul, ul ol, ul ul, ol ol {
 380   margin: 0; }
 381
 382 ul ul, ol ul {
 383   list-style-type: circle; }
 384
 385 em {
 386   font-style: italic; }
 387
 388 strong {
 389   font-weight: 600; }
 390
 391 img {
 392   max-width: 100%; }
 393
 394 .date {
 395   font-style: italic;
 396   color: #666666; }
 397
 398 ::-moz-selection {
 399   color: black;
 400   background: #eeeeee; }
 401
 402 ::selection {
 403   color: black;
 404   background: #eeeeee; }
 405
 406 .wrapper-masthead {
 407   background-color: #e8e8f2;
 408   margin-bottom: 50px; }
 409
 410 .masthead {
 411   padding: 25px 0; }
 412   @media screen and (max-width: 520px) {
 413     .masthead {
 414       text-align: center; } }
 415   .masthead br {
 416     visibility: none; }
 417
 418 .avatar {
 419   float: left;
 420   width: 70px;
 421   margin-right: 15px; }
 422   @media screen and (max-width: 520px) {
 423     .avatar {
 424       float: none;
 425       display: block;
 426       margin: 0 auto; } }
 427   .avatar img {
 428     border-radius: 5px; }
 429
 430 .site-name {
 431   float: left;
 432   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 433   font-weight: 300;
 434   font-size: 28px;
 435   letter-spacing: 1px;
 436   text-decoration: none;
 437   cursor: pointer;
 438   color: #333333; }
 439   @media screen and (max-width: 520px) {
 440     .site-name {
 441       float: none;
 442       display: block; } }
 443   .site-name:hover, .site-name:active {
 444     text-decoration: none; }
 445
 446 .site-description {
 447   float: left;
 448   font-size: 16px;
 449   margin: 0;
 450   margin-top: -5px;
 451   color: #333333; }
 452   @media screen and (max-width: 520px) {
 453     .site-description {
 454       float: none;
 455       display: block;
 456       margin: 3px 0; } }
 457
 458 nav {
 459   float: right;
 460   margin-top: -25px;
 461   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 462   font-size: 18px; }
 463   @media screen and (max-width: 520px) {
 464     nav {
 465       float: none;
 466       display: block;
 467       margin-top: 15px;
 468       font-size: 16px; } }
 469   nav a {
 470     margin-left: 25px;
 471     text-align: right;
 472     font-weight: 300;
 473     letter-spacing: 1px;
 474     color: #333333; }
 475     nav a:hover, nav a:active {
 476       text-decoration: none;
 477       cursor: pointer;
 478       color: #333333; }
 479     @media screen and (max-width: 520px) {
 480       nav a {
 481         margin: 0 10px; } }
 482
 483 @media screen and (max-width: 520px) {
 484   .logo, nav {
 485     float: none;
 486     width: 100%;
 487     text-align: center; } }
 488
 489
 490 .posts > .post {
 491   padding-bottom: 2em;
 492   border-bottom: 1px solid #eeeeee; }
 493
 494 .post blockquote {
 495   border-left: 2px solid #666666;
 496   font-size: 22px;
 497   font-style: italic;
 498   margin: 1.8em 0.8em;
 499   padding: 0.1em 1em;
 500   color: #666666; }
 501
 502 .wrapper-footer {
 503   margin-top: 50px;
 504   background-color: #eeeeee;
 505   border-top: 1px solid #dddddd; }
 506
 507 footer {
 508   padding: 20px 0;
 509   text-align: center; }