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 .post .comments {
 225   margin-top: 10px; }
 226
 227 .wrapper-footer {
 228   margin-top: 50px;
 229   border-top: 1px solid #dddddd;
 230   border-bottom: 1px solid #dddddd;
 231   background-color: #eeeeee; }
 232
 233 footer {
 234   padding: 20px 0;
 235   text-align: center; }
 236
 237 /***********************/
 238 /* SYNTAX HIGHLIGHTING */
 239 /***********************/
 240 .highlight {
 241   background-color: #222222;
 242   padding: 5px 10px;
 243   margin: 20px 0; }
 244
 245 .highlight pre {
 246   word-break: break-all;
 247   word-wrap: break-word; }
 248
 249 code {
 250   font-family: 'Courier', monospace;
 251   font-size: 14px;
 252   color: #999999; }
 253
 254 .highlight .c, .highlight .c1 {
 255   color: #586e75; }
 256
 257 /* Comment */
 258 .highlight .err {
 259   color: #93a1a1; }
 260
 261 /* Error */
 262 .highlight .g {
 263   color: #93a1a1; }
 264
 265 /* Generic */
 266 .highlight .k {
 267   color: #859900; }
 268
 269 /* Keyword */
 270 .highlight .l {
 271   color: #93a1a1; }
 272
 273 /* Literal */
 274 .highlight .n {
 275   color: #93a1a1; }
 276
 277 /* Name */
 278 .highlight .o {
 279   color: #859900; }
 280
 281 /* Operator */
 282 .highlight .x {
 283   color: #cb4b16; }
 284
 285 /* Other */
 286 .highlight .p {
 287   color: #93a1a1; }
 288
 289 /* Punctuation */
 290 .highlight .cm {
 291   color: #586e75; }
 292
 293 /* Comment.Multiline */
 294 .highlight .cp {
 295   color: #859900; }
 296
 297 /* Comment.Preproc */
 298 .highlight .c1 {
 299   color: #586e75; }
 300
 301 /* Comment.Single */
 302 .highlight .cs {
 303   color: #859900; }
 304
 305 /* Comment.Special */
 306 .highlight .gd {
 307   color: #2aa198; }
 308
 309 /* Generic.Deleted */
 310 .highlight .ge {
 311   color: #93a1a1;
 312   font-style: italic; }
 313
 314 /* Generic.Emph */
 315 .highlight .gr {
 316   color: #dc322f; }
 317
 318 /* Generic.Error */
 319 .highlight .gh {
 320   color: #cb4b16; }
 321
 322 /* Generic.Heading */
 323 .highlight .gi {
 324   color: #859900; }
 325
 326 /* Generic.Inserted */
 327 .highlight .go {
 328   color: #93a1a1; }
 329
 330 /* Generic.Output */
 331 .highlight .gp {
 332   color: #93a1a1; }
 333
 334 /* Generic.Prompt */
 335 .highlight .gs {
 336   color: #93a1a1;
 337   font-weight: bold; }
 338
 339 /* Generic.Strong */
 340 .highlight .gu {
 341   color: #cb4b16; }
 342
 343 /* Generic.Subheading */
 344 .highlight .gt {
 345   color: #93a1a1; }
 346
 347 /* Generic.Traceback */
 348 .highlight .kc {
 349   color: #cb4b16; }
 350
 351 /* Keyword.Constant */
 352 .highlight .kd {
 353   color: #268bd2; }
 354
 355 /* Keyword.Declaration */
 356 .highlight .kn {
 357   color: #859900; }
 358
 359 /* Keyword.Namespace */
 360 .highlight .kp {
 361   color: #859900; }
 362
 363 /* Keyword.Pseudo */
 364 .highlight .kr {
 365   color: #268bd2; }
 366
 367 /* Keyword.Reserved */
 368 .highlight .kt {
 369   color: #dc322f; }
 370
 371 /* Keyword.Type */
 372 .highlight .ld {
 373   color: #93a1a1; }
 374
 375 /* Literal.Date */
 376 .highlight .m {
 377   color: #2aa198; }
 378
 379 /* Literal.Number */
 380 .highlight .s {
 381   color: #2aa198; }
 382
 383 /* Literal.String */
 384 .highlight .na {
 385   color: #93a1a1; }
 386
 387 /* Name.Attribute */
 388 .highlight .nb {
 389   color: #b58900; }
 390
 391 /* Name.Builtin */
 392 .highlight .nc {
 393   color: #268bd2; }
 394
 395 /* Name.Class */
 396 .highlight .no {
 397   color: #cb4b16; }
 398
 399 /* Name.Constant */
 400 .highlight .nd {
 401   color: #268bd2; }
 402
 403 /* Name.Decorator */
 404 .highlight .ni {
 405   color: #cb4b16; }
 406
 407 /* Name.Entity */
 408 .highlight .ne {
 409   color: #cb4b16; }
 410
 411 /* Name.Exception */
 412 .highlight .nf {
 413   color: #268bd2; }
 414
 415 /* Name.Function */
 416 .highlight .nl {
 417   color: #93a1a1; }
 418
 419 /* Name.Label */
 420 .highlight .nn {
 421   color: #93a1a1; }
 422
 423 /* Name.Namespace */
 424 .highlight .nx {
 425   color: #555555; }
 426
 427 /* Name.Other */
 428 .highlight .py {
 429   color: #93a1a1; }
 430
 431 /* Name.Property */
 432 .highlight .nt {
 433   color: #268bd2; }
 434
 435 /* Name.Tag */
 436 .highlight .nv {
 437   color: #268bd2; }
 438
 439 /* Name.Variable */
 440 .highlight .ow {
 441   color: #859900; }
 442
 443 /* Operator.Word */
 444 .highlight .w {
 445   color: #93a1a1; }
 446
 447 /* Text.Whitespace */
 448 .highlight .mf {
 449   color: #2aa198; }
 450
 451 /* Literal.Number.Float */
 452 .highlight .mh {
 453   color: #2aa198; }
 454
 455 /* Literal.Number.Hex */
 456 .highlight .mi {
 457   color: #2aa198; }
 458
 459 /* Literal.Number.Integer */
 460 .highlight .mo {
 461   color: #2aa198; }
 462
 463 /* Literal.Number.Oct */
 464 .highlight .sb {
 465   color: #586e75; }
 466
 467 /* Literal.String.Backtick */
 468 .highlight .sc {
 469   color: #2aa198; }
 470
 471 /* Literal.String.Char */
 472 .highlight .sd {
 473   color: #93a1a1; }
 474
 475 /* Literal.String.Doc */
 476 .highlight .s2 {
 477   color: #2aa198; }
 478
 479 /* Literal.String.Double */
 480 .highlight .se {
 481   color: #cb4b16; }
 482
 483 /* Literal.String.Escape */
 484 .highlight .sh {
 485   color: #93a1a1; }
 486
 487 /* Literal.String.Heredoc */
 488 .highlight .si {
 489   color: #2aa198; }
 490
 491 /* Literal.String.Interpol */
 492 .highlight .sx {
 493   color: #2aa198; }
 494
 495 /* Literal.String.Other */
 496 .highlight .sr {
 497   color: #dc322f; }
 498
 499 /* Literal.String.Regex */
 500 .highlight .s1 {
 501   color: #2aa198; }
 502
 503 /* Literal.String.Single */
 504 .highlight .ss {
 505   color: #2aa198; }
 506
 507 /* Literal.String.Symbol */
 508 .highlight .bp {
 509   color: #268bd2; }
 510
 511 /* Name.Builtin.Pseudo */
 512 .highlight .vc {
 513   color: #268bd2; }
 514
 515 /* Name.Variable.Class */
 516 .highlight .vg {
 517   color: #268bd2; }
 518
 519 /* Name.Variable.Global */
 520 .highlight .vi {
 521   color: #268bd2; }
 522
 523 /* Name.Variable.Instance */
 524 .highlight .il {
 525   color: #2aa198; }
 526
 527 /* Literal.Number.Integer.Long */