mit-license/themes/hipster-gray.css

@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300);

* {
  margin: 0;
  padding: 0;
  transition: all 0.2s ease-out;
}

body {
  background: #aaa;
  font-family: Merriweather, "Palatino Linotype", Georgia, serif;
  font-size: 21pt;
  line-height: 170%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-y: auto;
  padding: 20pt;
}

a:link, a:visited {
  color: #000;
  text-decoration: none;
  border-bottom: 1pt solid #aaa;
}

a:hover, a:focus, a:active {
  background: #aaa;
  text-decoration: none;
}

h1 {
  font-size: 64pt;
  font-weight: 400;
  line-height: 100%;
}

article, footer {
  padding: 50pt 50pt 20pt 20%;
  background: #ccc;
}

article p {
  margin-top: 40pt;
}

article p:first-of-type {
  margin-top: 20pt;
  font-size: 14pt;
  line-height: 150%;
}

article :nth-child(4),
article :nth-child(4):before {
  font-size: 18pt;
  font-weight: 300;
}

article :nth-child(4):before {
  content: "*";
  margin-left: -20pt;
  float: left;
}

article p:last-child {
  border: 20pt solid #c4c4c4;
  font-size: 17pt;
  line-height: 180%;
  margin: 40pt;
  color: #888;
  padding: 20pt;
}

footer {
  padding-top: 0;
  font-size: 14pt;
  line-height: 100%;
  margin-top: -1pt;
}

footer p {
  background: url("hipster-gray-octocat.png") 0 0 no-repeat;
  margin-left: -20pt;
  padding-left: 20pt;
}

footer a:link, footer a:visited {
  border-bottom-color: #bbb;
  color: #888;
}

footer a:hover, footer a:focus, footer a:active {
  color: #000;
}

@media only screen and (max-width: 1360px) {
  article, footer {
    padding-left: 50pt;
  }
}

@media only screen and (max-width: 1140px) {
  body {
    font-size: 17pt;
    padding: 15pt;
  }

  h1 {
    font-size: 40pt;
  }

  article, footer {
    padding: 30pt;
  }

  article p {
    margin-top: 17pt;
  }

  article p:first-of-type {
    font-size: 12pt;
    line-height: 120%;
    margin-top: 10pt;
  }

  article :nth-child(4), article :nth-child(4):before {
    font-size: 15pt;
  }

  article :nth-child(4):before {
    margin-left: -15pt;
  }

  article p:last-child {
    border-width: 15pt;
    font-size: 13pt;
    margin: 15pt 0 0 0;
    padding: 15pt;
  }

  footer {
    padding-top: 0;
    font-size: 11pt;
    line-height: 120%;
  }

  footer p {
    margin-left: -15pt;
    padding-left: 15pt;
  }
}

@media only screen and (max-width: 720px) {
  body {
    font-size: 12pt;
    padding: 10pt;
  }

  h1 {
    font-size: 24pt;
  }

  article, footer {
    padding: 20pt;
  }

  article p {
    margin-top: 15pt;
  }

  article p:first-of-type {
    font-size: 9pt;
    line-height: 120%;
    margin-top: 10pt;
  }

  article :nth-child(4), article :nth-child(4):before {
    font-size: 10pt;
  }

  article :nth-child(4):before {
    margin-left: -10pt;
  }

  article p:last-child {
    border-width: 10pt;
    font-size: 10pt;
    margin: 15pt 0 0 0;
    padding: 10pt;
  }

  footer {
    padding-top: 0;
    font-size: 9pt;
    line-height: 120%;
  }

  footer p {
    background-position: 0 1px;
    background-size: 11px;
    margin-left: -10pt;
    padding-left: 10pt;
  }
}

@media print {
  @page {
    margin: .5cm;
  }

  * {
    color: black;
  }

  a[href^="http"]:after {
    content: " ["attr(href) "]"
  }

  a:link, a[href]:after {
    border: none;
  }

  body {
    background: none;
    font-size: 12pt;
    padding: 0;
  }

  h1 {
    font-size: 28pt;
  }

  article, footer {
    background: none;
    padding: 30pt;
  }

  article p {
    margin-top: 16pt;
  }

  article p:first-of-type {
    font-size: 10pt;
    line-height: 120%;
    margin-top: 10pt;
  }

  article :nth-child(4), article :nth-child(4):before {
    font-size: 12pt;
  }

  article :nth-child(4):before {
    margin-left: -12pt;
  }

  article p:last-child {
    border-width: 11pt;
    font-size: 11pt;
    margin: 18pt 0 0 0;
    padding: 11pt;
  }

  footer {
    padding-top: 0;
    font-size: 10pt;
    line-height: 120%;
  }

  footer p {
    background-position: 0 1px;
    background-size: 11px;
    margin-left: -12pt;
    padding-left: 12pt;
  }
}

#gravatar {
  position: relative;
  float: left;
  border: 20px solid #c4c4c4;
  margin-left: -12em;
  margin-top: -1em;
  width: 5em;
}