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