style.css

/* Colors */

hr {
  background-color: #e7e7e5;
}

.zoom-overlay, html, body {
  background: {{background_color}};
  color: {{text_color}};
}

.archives a,
.entry .body a {
  color: darkblue
}

.entry .body a:visited,
.archives a:visited {color: purple;}


.navigation a {
  color: rgba(0, 0, 0, .1)
}

.index a .text:hover,
.dim .navigation,
.edge a {
  color: rgba(0, 0, 0, 0.4);
}

.entry .body {
  color: rgba(0, 0, 0, 0.75)
}

/* Proportions */

body{
  font-size: {{font_size}}rem;
  line-height: {{line_height}};
}

.index a {
  padding: {{spacing}}rem;
}

.yield {
  padding: 0 calc({{spacing}}rem/2);
}

.shift-margin {
  padding-left:{{spacing}}rem;
}

/* Styles */

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

body {
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Sans Serif', Icons;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  font-style: normal;
  display: flex;
  flex-direction: column;
  min-height: 100%
}

.yield {
  flex-grow: 1;
}

.index {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.index a {
  box-sizing: border-box;
  width: 50%;
  text-decoration: none;
}



@media screen and (max-width: 700px) {
  .index a {
    width: 100%;
    padding-left: 0;
    padding-right: 0
  }
}

.index a:nth-child(2n) {
  text-align: left;
}

.index a:nth-child(2n+1) .text {
  float: right;
}


.index a:last-child:nth-child(2n+1) .text {
  float: none;
  margin: 0 auto
}

.index a:nth-child(2n+1) {
  text-align: right;
}


.index a img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.index a .text {
  border: 2px solid rgba(0, 0, 0, 0.1);
  display: block;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:40vw;
  height: 25vw;
}

.index a .title {
    margin: 1rem 2rem;
    line-height: 1.2;
}

.index a .thumbnail {
  display:block;height:0;overflow:hidden}

.index a .date {
  font-size: 14px;
  text-decoration: none;
}

.index a:focus {
  opacity: 0.8
}

.archives a {
  text-decoration: none;
  font-size: 28px
}

.archives a .thumbnail {
  display:inline-block;
  text-align: center;
  width:1.3em;
  height:1.3em
}

.archives a img {
  max-height:100%;
  max-width:100%;
  height:auto;
  width:auto;
  vertical-align:middle
}

.archives a:hover {opacity: 0.5}

.navigation {
  margin: 1.5rem;
  font-size: 25px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}

.navigation .next {position:relative;padding-right: 1.3em}

.navigation .next:after {
  content: "→";
  position: absolute;
  right: 0;
}

.navigation .previous {position:relative;padding-left: 1.3em}

.navigation .previous:after {
  content: "←";
  position: absolute;
  left: 0;
}

.tabular-numerals {
font-feature-settings: 'tnum';
-webkit-font-feature-settings: 'tnum';
-moz-font-feature-settings: 'tnum';
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.navigation>* {
  width: 25%;
  box-sizing: border-box;
}

@media screen and (max-width: 500px) {
  .navigation>* {
    width: 100%;
  }

  .navigation> :nth-child(3) {margin-top: 1.3rem}
  .navigation:first-of-type > :nth-child(n+3) {display: none;}

  .shift-margin {padding-left: 0}
  .align-right, .align-center {text-align: left;}
}


.dim .navigation,
.edge a {
  text-decoration: none;
}


.navigation a[href] {
  color: inherit;
  text-decoration: none;
}

.navigation a[href="/search"],
.navigation a[href="/search"]+span {
  display: none;
}

.navigation a[href]:hover,
.edge a:hover {
  text-decoration: underline
}

.entry {
  display: flex;
  align-items: center;
}

.edge {
  padding: 1.5rem 0;
  display: flex;
  max-height: 100vh;
  flex-direction: column;
  font-size: 14px
}

.edge.left {
  padding-right: 1.5rem;
  text-align: right;
}

.edge.right {
  text-align: right;
  padding-left: 1.5rem;
}

.edge .arrow {
  flex-grow: 1;
  display: flex;
  padding: 1.5rem;
  align-items: center;
}

.entry.page {
  padding-top: 3rem;
  margin-top: 0;
  margin-left: 25%;
}

.entry .body {
  flex-grow: 1;
  text-align: center;
  font-size: 23px;
  -webkit-font-smoothing: auto;
}

.body ul, .body ol {
  padding-left: 2.8em
}

.body ul li {
    list-style-type: none;
    position: relative;
  }


.body ul li:before {
  content: "–";
  position: absolute;
  left: -1.4em;
}


.body p {
  margin: 1.4em 0
}

.body h2 {margin: 2.8em 0 1.4em; font-size: inherit;font-weight: 600}

.entry.page .body {
  text-align: left;
}




.entry.page .body>* {
  max-width: 35em;
}

.body.post p,
.body.post .wide {
  max-width: 35em;
  margin: 1.4em auto;
  text-align: left;
}

.body.post .margin {
  position: relative;
  left: auto;
  right: auto;
}

hr {
  border: none;
  height: 2px;
  margin: 3em 0;
}

.entry .title {
  width: 25%;
  flex-shrink: 0;
  align-self: start;
}

.entry .title h1 {
  font-size: 23px;
  font-weight: normal;
}

.entry p img {
  margin: 0 auto;
  display: block;
}

.entry img {
  max-height: calc(100vh - 3rem);
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
}


.pre-loaded {
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3s, visibility 0.3s;
}

.loaded {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;
}

/* Typeset.css */

/* Small caps */
/* Double quote (") marks */
.pull-double{margin-left:-.47em}
.push-double{margin-right:.47em}

/* Single quote (') marks */
.pull-single{margin-left:-.28em}
.push-single{margin-right:.28em}

/*

L A Y O U T . C S S
^^^^^^^^^^^^^^^^^^^

All this depends on having a relatively positioned
container, e.g. body {postion: relative;} otherwise
the absolutely positioned stuff is off the viewport.

*/

.wide,
.margin,
.column {
  -webkit-margin-collapse: collapse;
  /* collapse internal margins */
  /* be sane about sizing */
}

.margin,
.inside {
  width: 33%;
  font-size: 15px;
  box-sizing: border-box;
}

.margin.left,
.inside.left {
  float: left;
  padding-right: 3rem;
}

.margin.right,
.inside.right {
  float: right;
  padding-left: 3rem;
}

.margin:first-child> :first-child {
  margin-top: 2.4em
}

.margin> :first-child {
  margin-top: 0.5em
}

.column {
  float: left;
}

.column.two {
  width: 48.5%;
  /* (100 - 3 * 1)/2 */
  margin-right: 3%
}

.column.three {
  width: 31.333%;
  /* (100 - 3 * 2)/3 */
  margin-right: 3%
}

.column.four {
  width: 22.75%;
  /* (100 - 3 * 3)/4 */
  margin-right: 3%
}

.column.two:nth-child(2n),
.column.three:nth-child(3n),
.column.four:nth-child(4n) {
  margin-right: 0
}


@media screen and (min-width: 900px) {


  /* For larger screens, we allow wide things to break out */

  .wide {
    width: 150%;
  }

  .wide.left,
  .wide.right {
    width: 125%;
  }

  .wide.left {
    margin-left: -25%
  }

  .wide.right {
    margin-right: -25%
  }


  /* For larger screens, we allow this to enter the margins */

  .margin {
    position: absolute;
  }

  .left.margin {
    left: -33%;
  }

  .right.margin {
    right: -33%;
  }
}






img[data-action="zoom"] {
  cursor: zoom-in;
}

.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  transition: all 200ms;
}

img.zoom-img {
  cursor: zoom-out;
  height: auto;
}

.zoom-overlay {
  cursor: zoom-out;
  z-index: 420;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: "alpha(opacity=0)";
  opacity: 0;
  transition: opacity 300ms;
}

.zoom-overlay-open .zoom-overlay {
  filter: "alpha(opacity=100)";
  opacity: 1;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL2Nzcy96b29tLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGdCQUFnQjtDQUNqQjtBQUNEOztFQUVFLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2Isc0JBQXNCO0NBQ3ZCO0FBQ0Q7RUFDRSxpQkFBaUI7Q0FDbEI7QUFDRDtFQUNFLGlCQUFpQjtFQUNqQixhQUFhO0VBQ2IsaUJBQWlCO0VBQ2pCLGdCQUFnQjtFQUNoQixPQUFPO0VBQ1AsUUFBUTtFQUNSLFNBQVM7RUFDVCxVQUFVO0VBQ1YsMkJBQTJCO0VBQzNCLFdBQVc7RUFDWCwrQkFBK0I7Q0FDaEM7QUFDRDtFQUNFLDZCQUE2QjtFQUM3QixXQUFXO0NBQ1oiLCJmaWxlIjoiem9vbS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbWdbZGF0YS1hY3Rpb249XCJ6b29tXCJdIHtcbiAgY3Vyc29yOiB6b29tLWluO1xufVxuLnpvb20taW1nLFxuLnpvb20taW1nLXdyYXAge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDY2NjtcbiAgdHJhbnNpdGlvbjogYWxsIDMwMG1zO1xufVxuaW1nLnpvb20taW1nIHtcbiAgY3Vyc29yOiB6b29tLW91dDtcbn1cbi56b29tLW92ZXJsYXkge1xuICBjdXJzb3I6IHpvb20tb3V0O1xuICB6LWluZGV4OiA0MjA7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBmaWx0ZXI6IFwiYWxwaGEob3BhY2l0eT0wKVwiO1xuICBvcGFjaXR5OiAwO1xuICB0cmFuc2l0aW9uOiAgICAgIG9wYWNpdHkgMzAwbXM7XG59XG4uem9vbS1vdmVybGF5LW9wZW4gLnpvb20tb3ZlcmxheSB7XG4gIGZpbHRlcjogXCJhbHBoYShvcGFjaXR5PTEwMClcIjtcbiAgb3BhY2l0eTogMTtcbn1cbiJdfQ== */