white_clean.css

* {
    -webkit-box-sizing:  border-box;
    -moz-box-sizing:  border-box;
    box-sizing:  border-box;
}
html, body {
    margin:  0;
    padding:  0;
}
html {
    font-size:  62.5%;
}
body {
    padding:  20px;
    font-family:  'Libre Baskerville', serif;
    font-size:  14px;
    line-height:  1.5;
    color:  #666;
    background-color:  #fff;
}
.subtitle {
    font-size: 22px;
}
p {
    margin:  0 0 20px;
}
h1 {
    font-size:  28px;
}
h2, h3 {
    font-size:  20px;
}
h1, h2, h3 {
    position:  relative;
    margin:  30px 0 20px;
    font-weight:  bold;
    line-height:  1.1;
    color:  #111;
    text-rendering:  optimizeLegibility;
}
h1:before, h2:before, h3:before {
    position:  absolute;
    top:  auto;
    color:  #ccc;
    display:  none;
}
h1:before {
    content:  "";
    left:  -1.25em;
}
h2:before {
    content:  "*";
    left:  -2em;
}
h3:before {
    content:  "**";
    left:  -2.5em;
}
i, em, b, strong {
    padding-left:  .1em;
    padding-right:  .1em;
}
b, strong {
    font-weight:  bold;
    color:  #333;
}
b:before, b: after, strong:before, strong: after {
    content:  "*";
}
i:before, i: after, em:before, em: after {
    content:  "/";
}
hr {
    margin:  0;
    border:  0;
}
hr: after {
    display:  block;
    margin:  20px 0;
    content:  "----------------------------------------------------------------";
    color:  #ccc;
}
ul, ol {
    padding:  0;
    margin:  0 0 20px;
}
code, pre {
    font-family:  'Fira Mono', monospace;
}
code {
    color:  #d14;
}
code:before, code: after {
    content:  "=";
    color:  #ccc;
}
pre {
    display:  block;
    margin:  0 0 14px;
    padding:  15px;
    border-radius:  3px 3px 3px 3px;
    font-size:  18px;
    line-height:  28px;
    background-color:  #f5f5f5;
    white-space:  pre;
    white-space:  pre-wrap;
    word-break:  break-all;
    word-wrap:  break-word;
}
blockquote {
    padding:  0 0 0 20px;
    margin:  0 30px 20px -22.5px;
    color:  #999;
    border-left:  8px solid #e5e5e5;
}
blockquote p: last-child {
    margin-bottom:  0;
}
img {
    display:  block;
    margin:  0;
    border-radius:  5px;
}
a {
    font-weight:  inherit;
    line-height:  inherit;
    color:  maroon;
    text-decoration:  none;
}
sup a:before {
    content:  "[";
}
sup a: after {
    content:  "]";
}
a: hover {
    text-decoration:  underline;
}
table {
    line-height:  2.5;
    margin-bottom:  15px;
    max-width:  100%;
    width:  100%;
}
table td, table th {
    padding:  0 15px;
}
table th.left, table td.left {
    text-align:  left;
}
table th.right, table td.right {
    text-align:  right;
}
/******************************************************/
/* body */
body {
    margin:  0 auto;
    max-width:  1024px;
}
/* head */
.masthead {
    color:  #888;
}
.masthead: after {
    display:  block;
    content:  '----------------------------------------------------------------';
    margin:  10px 0;
    color:  #ccc;
}
.masthead a {
    color:  #333;
}
.masthead ul {
    list-style:  none;
}
.masthead li {
    display:  inline-block;
}
.masthead li + li:before {
    display:  inline-block;
    content:  "\00B7 \00a0";
    color:  #ccc;
}
/* searchform*/
#searchform {
    position:  absolute;
    top:  54px;
    right:  30.4%;
}
#searchform #s {
    background:  url("/media/img/search.png") no-repeat 5px 6px;
    box-shadow:  inset 0 1px 1px rgba(0,0,0,0.1);
    border:  1px solid #ddd;
    border-radius:  2px;
    -moz-border-radius:  2px;
    width:  90px;
    height:  30px;
    line-height:  12px;
    padding:  4px 10px 4px 28px;

    -webkit-transition-duration:  400ms;
    -webkit-transition-property:  width, background;
    -webkit-transition-timing-function:  ease;
    -moz-transition-duration:  400ms;
    -moz-transition-property:  width, background;
    -moz-transition-timing-function:  ease;
    -o-transition-duration:  400ms;
    -o-transition-property:  width, background;
    -o-transition-timing-function:  ease;
}
#searchform #s: focus {
    background-color:  #f9f9f9;
    width:  160px;
}
.masthead img.avatar {
    position:  relative;
    float:  right;
    margin-top:  -100px;
    margin-bottom:  -100%;
    margin-right:  10%;
    width:  200px;
    background-color:  #fff;
}
/* post */
.post {
    position:  relative;
}
.post: after {
    display:  block;
    content:  "----------------------------------------------------------------";
    color:  #ccc;
}
.post img {
    max-width:  100%;
}
.post li {
    list-style:  none outside none;
}
.post ul > li:before {
    content:  "- ";
    margin-left:  -1.25em;
    color:  #ccc;
}
.post ol {
    counter-reset:  o-list;
}
.post ol > li:before {
    content:  counter(o-list) ") ";
    counter-increment:  o-list;
    margin-left:  -1.85em;
    color:  #ccc;
}

/* special for li in pre */
.post pre li {
    list-style-type:  decimal;
}

.post pre li:before {
    display:  none;
}

/* meta info */
.post-info {
    display:  inline-block;
    margin:  -10px 0 -10px;
    color:  #999;
}
.post-info + .post-info:before {
    content:  "\2223 \00a0";
}
.post-meta: after {
    content:  "----------------------------------------------------------------";
    display:  block;
    margin-top:  -1px;
    color:  #ccc;
}

/* table of content */
#table-of-contents {
    position:  fixed;
    right:  0em;
    top:  0em;
    border: 1px solid #e1e1e8;
    -webkit-box-shadow:  0 0 1em #777777;
    -moz-box-shadow:  0 0 1em #777777;
    -webkit-border-bottom-left-radius:  5px;
    -moz-border-radius-bottomleft:  5px;
    text-align:  center;
    /* ensure doesn't flow off the screen when expanded */
    max-height:  80%;
    overflow:  auto;
    z-index:  200;
}

#table-of-contents h2 {
    max-width:  20em;
    font-weight:  normal;
    padding-left:  0.5em;
    padding-top:  0.05em;
    padding-bottom:  0.05em;
}

#table-of-contents ul {
    margin-left:  14pt;
    margin-bottom:  10pt;
    padding:  0
}

#table-of-contents li {
    padding:  0;
    margin:  1px;
    list-style:  none;
}

#table-of-contents ul>: first-child {
    color:  blue;
}

#table-of-contents #text-table-of-contents {
    display:  none;
    text-align:  left;
}

#table-of-contents: hover #text-table-of-contents {
    display:  block;
    padding:  0.5em;
    margin-top:  -1.5em;
}

/* footer */
.footer {
    margin:  80px 0 0;
    text-align:  center;
    font-size:  15px;
    color:  #999;
}
.footer > p {
    margin:  0;
    line-height:  1.5;
}
.footpara {
    display:  inline;
}

/* Responsive
   -------------------------------------------------- */

@media (min-width:  768px) {
    /* Increase body padding and font-sizes */
    body {
        padding:  30px;
        font-size:  18px;
        line-height:  1.75;
    }
    h1:before, h2:before, h3:before {
        display:  inline;
    }
}

@media (min-width:  1024px) {
    body {
        padding:  30px;
    }
}
@media (max-width: 768px) {
    #table-of-contents {
        display: none;
    }
    iframe {
        display: none;
    }
}