style.css

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