style.css

/*
Theme Name: zh2
Theme URI: http://zenhabits.net/theme/
Author: Leo Babauta
Author URI: http://leobabauta.com
Description: A minimalist, content-focused theme.
Version: 2
License: Uncopyrighted
License URI: http://zenhabits.net/open-source-blogging-feel-free-to-steal-my-content/

This theme is uncopyrighted.
Do whatever you'd like with it.
*/
:root {
  --main-background: #fff;
  --main-color: #000;
  --text-color: #333;
  --alternate-color: #666;
  --smooth-big-text: #d3d3d3;
  --tagline-color: #56a49f;
  --comment-background: #efefef;
  --comment-number-color: #aeaeae;
  --input-background: #fff;
  --submit-color: #eee;
  --submit-background: #777;
}

/* css reset */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100.1%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end css reset */
@media all {
  body {
    font: normal 100% "Open Sans", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--main-color);
    background-color: var(--main-background);
    padding: 0.6em;
  }
  .top {
    /* fades out blog title */
    -webkit-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: 0.3;
    -webkit-transition: opacity 3s linear;
    -moz-transition: opacity 3s linear;
    -ms-transition: opacity 3s linear;
    transition: opacity 3s linear;
  }
  .top:hover {
    /* fades blog title back in on hover */
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
  }
  .container {
    overflow: hidden;
    padding: 0 1em;
    max-width: 42.5em;
    margin: auto;
  }
  /* blog title */
  h1 {
    font-size: 150%;
    font-weight: normal;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--smooth-big-text);
    margin: 0 0.05em 0 0;
  }
  h1 a:link {
    text-decoration: none;
    color: var(--smooth-big-text);
    border-width: 0 0 1px 0;
    border-style: none none solid none;
    border-color: #c0c0c0;
  }
  h1 a:visited {
    text-decoration: none;
    color: var(--smooth-big-text);
    border-width: 0 0 1px 0;
    border-style: none none solid none;
    border-color: #c0c0c0;
  }
  h1 a#tagline {
    color: var(--tagline-color);
  }
  /* post title */
  h2 {
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 3em;
    font-weight: normal;
    text-align: center;
    color: var(--text-color);
    margin-top: 1em;
  }
  /* subtitles */
  h3 {
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1em;
    text-align: center;
    color: var(--alternate-color);
    margin-top: 1.5em;
  }
  h3 .subtitle {
    margin-top: 0.5em;
  }
  h4 {
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2em;
    color: var(--alternate-color);
  }
  h5 {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.2em;
    text-transform: uppercase;
    color: var(--alternate-color);
  }
  /* author credits */
  h6 {
    -webkit-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: 0.3;
    -webkit-transition: opacity 3s linear;
    -moz-transition: opacity 3s linear;
    -ms-transition: opacity 3s linear;
    transition: opacity 3s linear;
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.2em;
    letter-spacing: 0.1em;
    line-height: 1.3em;
    text-align: center;
    color: var(--alternate-color);
    margin: 1em 0 1em 0;
  }
  h6:hover {
    /* fades author credit back in on hover */
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
  }
  h6 strong {
    font-weight: bold;
    color: var(--tagline-color);
  }
  h6 em {
    font-style: italic;
  }
  img {
    border: 0;
    padding: 3px;
    max-width: 100%;
    height: auto;
  }
  img a {
    border: 0;
  }
  p {
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.3em;
    line-height: 1.635em;
    color: var(--text-color);
    margin: 0.7em 0 1em 0;
  }
  a:link, a:visited, a:hover {
    text-decoration: none;
    border: 0;
    border-width: 0;
    border-style: none;
  }
  a:link, a:visited {
    color: var(--text-color);
  }
  a:hover {
    color: #999;
  }
  /* post styles */
  .post strong {
    font-weight: bold;
  }
  .post em {
    font-style: italic;
  }
  .post a:link, .post a:visited, .post a:hover {
    border-width: 0 0 1px 0;
    border-style: none none solid none;
    border-color: #c0c0c0;
  }
  .post h2 a,
  .post h2 a:link,
  .post h2 a:visited,
  .post h2 a:hover {
    border: none;
  }
  .post ul,
  .post ol {
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 1.3em;
    margin-top: 0.5em;
    margin-bottom: 1em;
  }
  .post ul {
    list-style-type: disc;
    padding: 0.1em 0 0 1.1em;
  }
  .post ol {
    list-style-type: decimal;
    padding: 0.1em 0 0 1.2em;
  }
  .post li {
    line-height: 1.5em;
    color: var(--text-color);
    padding: 0.2em 0 0 0;
  }
  .post blockquote {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 1.3em;
    color: var(--alternate-color);
    border-left: 2px solid #ababab;
    margin: 1.8em 0.8em;
    padding: 0 1em 0 1em;
  }
  /* line at bottom of post */
  .dc-post .post,
  .dc-page .post {
    border-bottom: 1px solid #efefef;
    margin-bottom: 1em;
  }
  /* previous & next posts at bottom */
  .navigation {
    margin-bottom: 3em;
  }
  .navigation p {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--alternate-color);
    margin-top: 0;
    margin-bottom: 1em;
  }
  /* subscription */
  .subscribe p {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--alternate-color);
    margin-top: 2em;
    margin-bottom: 2em;
  }
  /* "see all posts" at bottom of home page */
  .all_posts {
    font-size: 2.4em;
    font-weight: bold;
    line-height: 1.25em;
    margin-bottom: 1em;
  }
  .all_posts a {
    color: var(--smooth-big-text);
  }
  .all_posts a:hover {
    color: var(--alternate-color);
  }
  /* footer text */
  .footer p {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.2em;
    text-transform: lowercase;
    color: var(--text-color);
    margin: 0;
    padding: 0;
  }
  .footer a {
    color: var(--alternate-color);
  }
  /* for archives page */
  #arc {
    overflow: hidden;
    margin: 0 1em 2em 0.4em;
  }
  /* for comments */
  .commentlist {
    margin: 10px 5px;
    padding: 10px;
  }
  .commentlist li {
    list-style: none;
  }
  .commentlist img.avatar,
  .commentlist img.gravatar {
    background: #dedede;
    border: solid thin #cecece;
    display: block;
    float: left;
    margin: 7px 10px 0 0;
    width: 32px;
    height: 32px;
    padding: 5px;
  }
  .commentlist .comment-author {
    line-height: 25px;
  }
  .commentlist .comment-body {
    background: var(--comment-background);
    border: solid thin #dedede;
    margin: 10px 0;
    padding: 10px;
    position: relative;
  }
  .commentlist .comment-body p {
    margin: 5px;
  }
  .commentlist .comment-body strong {
    font-weight: bold;
  }
  .commentlist .comment-body em {
    font-style: italic;
  }
  .commentlist .comment-body a.comment-reply-link {
    color: var(--comment-number-color);
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .commentlist .comment-body cite.fn {
    font-size: 14px;
    font-style: normal;
  }
  /* Prelude viewable only for screen reader */
  #prelude {
    overflow: hidden;
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
  }
  .dc-404 .post p {
    text-align: center;
  }
  .dc-search dd {
    margin-left: 2em;
  }
  /* forms */
  #search-form {
    margin-top: 2em;
  }
  .field {
    margin-bottom: 1em;
  }
  .field label {
    font-size: 0.875em;
    text-indent: 6px;
    color: var(--alternate-color);
    display: block;
  }
  .field input,
  .field textarea {
    font-size: 0.875em;
    background-color: var(--input-background);
    border: 1px solid #ccc;
    border-radius: 3px;
    display: block;
    padding: 4px;
  }
  .field input:focus,
  .field textarea:focus {
    border-color: var(--tagline-color);
  }
  .field textarea {
    padding: 0.5em 1em;
  }
  #comment-form input[type=submit],
  #search-form input[type=submit] {
    font-size: 0.875em;
    text-transform: capitalize;
    text-align: center;
    color: var(--submit-color);
    background: var(--submit-background);
    border: solid 1px #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 0.33em 0.66em;
    display: inline-block;
  }
  #comment-form input[type=submit]:hover, #comment-form input[type=submit]:focus,
  #search-form input[type=submit]:hover,
  #search-form input[type=submit]:focus {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
    text-decoration: none;
    background: var(--tagline-color);
    border: solid 1px var(--tagline-color);
  }
  .jstElements button {
    background-color: var(--submit-background) !important;
  }
  #search-form input[type=submit] {
    font-size: 0.66em;
  }
  #c_content {
    font-family: arsenalregular, "ff-meta-serif-web-pro", Georgia, Cambria, "Times New Roman", Times, serif;
    border: solid 1px #ccc;
    width: 95%;
    padding: 4px;
  }
  #c_content:focus {
    border-color: var(--tagline-color);
  }
  .form-help {
    font-size: 0.875em;
    font-style: italic;
    margin-top: 0;
  }
}
/* for iPad-sized devices */
@media only screen and (max-device-width: 50em) {
  /* makes blog title not fade on touch screen */
  .top {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    margin: auto;
  }
  h6 {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  .navigation p {
    font-size: 1em;
  }
  .subscribe ul {
    font-size: 1.8em;
    margin-top: 4em;
  }
  .footer p {
    font-size: 1.2em;
  }
  h2 {
    font-size: 2.5em;
  }
  h3 {
    font-size: 2em;
  }
  h6 {
    font-size: 1.5em;
  }
  p {
    font-size: 1.5em;
    line-height: 1.5em;
  }
  .post ul,
  .post ol {
    font-size: 1.5em;
    line-height: 1em;
    padding: 0.1;
  }
  #arc {
    font-size: 1.2em;
  }
}
/* for narrower browsers */
@media screen and (max-width: 50em) {
  /* makes blog title not fade on touch screen */
  .top {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    margin: auto;
  }
  h6 {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  .navigation p {
    font-size: 0.8em;
  }
  subscribe ul {
    font-size: 1.8em;
    margin-top: 4em;
  }
  .footer p {
    font-size: 1.2em;
  }
  h2 {
    font-size: 2.5em;
  }
  h3 {
    font-size: 2em;
  }
  h6 {
    font-size: 1.5em;
  }
  p {
    font-size: 1.5em;
    line-height: 1.5em;
  }
  .post ul,
  .post ol {
    font-size: 1.5em;
    line-height: 1em;
    padding: 0.1;
  }
}
/* for iPhone-sized devices */
@media only screen and (max-device-width: 30em) {
  .container {
    width: auto;
  }
  body {
    padding: 0;
  }
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 2.5em;
  }
  h3 {
    font-size: 1.8em;
  }
  h6 {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    font-size: 1.3em;
  }
  p {
    font-size: 1.2em;
    line-height: 1.4em;
  }
  .post ul {
    list-style-type: disc;
  }
  .post ul,
  .post ol {
    list-style-position: inside;
    font-size: 1.2em;
    line-height: 1em;
    padding: 0.5em;
    margin: 0;
  }
  .post li {
    margin: 0;
  }
  /* makes blog title not fade on touch screen */
  .top {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  .navigation p {
    font-size: 1em;
  }
  .subscribe p {
    font-size: 1em;
    margin-top: 1em;
  }
  .footer p {
    font-size: 1em;
  }
}
@media print {
  body {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    background: white;
    color: black;
    margin: 10;
    width: auto;
  }
  .container {
    display: block;
  }
  #prelude,
  .navigation,
  .subscribe,
  .footer {
    display: none;
  }
}