guidebook/public/guidebook.css

Use your leanpub sources to write an interactive guidebook

@import "fonts/fonts.css";

html, body {
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
}

h1 {
  margin: 0;
}

div.menu {
  padding: 10px 20px;
}

div.menu a {
  color: white;
  padding-right: 10px;
}

ul.toc {
  background: white;
  overflow: hidden;
  margin: 0 0 25px 0;
  padding: 0;
  transition: all 0.5s ease-in-out;
  display: none;
}

ul.toc.active {
  display: inherit;
}

ul.toc li {
  margin-bottom: 5px;
}

ul.toc li a {
  color: navy;
  text-decoration: none;
}

div.guidebook {
  background: #333;
  overflow: hidden;
  min-height: 100vh;
}

div.content {
  background: white;
  border-radius: 0 10px 10px 0;
  width:46vw;
  padding: 2vw;
  margin-bottom: 2vw;
}

div.content blockquote {
  border: 1px solid #eee;
  border-radius: 4px;
  background: #ddd;
  margin: 10px 0;
  padding: 0px 15px;
}

div.play {
  background: #efefef;
  position: fixed;
  height: 100vh;
  width: 43vw;
  left: 52vw;
  top: 0vw;
  padding: 20px;
}

div.play.active {
}

div.play pre.bundleError {
  font-family: 'Source Code Pro';
  color: #B35553;
  margin: 0;
}

div.highlight {
  background: #efefef;
  border: 1px solid silver;
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
}

div.highlight ~ button {
  margin-top: 10px;
}

div.highlight pre {
  margin: 0;
}

/* leanpub section styles */
/* playing around with this scheme: http://colorschemedesigner.com/#4W31D66..rrmp */

div.content section {
  background: #f8f8f8;
  border: 4px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  margin-top: 10px;
  text-align: justify;
  padding: 10px 20px;
}

section.aside {
}

div.content section.information {
  background: #FEFFD7;
}

div.content section.tip {
  background: #E2F1C3;
}

div.content section.warning {
  background: #F7D7DC;
}

/* layout customizations */

.guidebook[data-layout="1"] .content {
  width: 93.5vw;
}

.guidebook[data-layout="1"] .play {
  left: 100vw;
}

.guidebook[data-layout="2"] .content {
  display: none;
}

.guidebook[data-layout="2"] .play {
  left: 0vw;
  top: 6vh;
  height: 94vh;
  width: 100vw;
}

/* font selection */

body {
  font-family: 'Roboto Slab';
  font-weight: 300;
}

code, pre {
  font-family: 'Source Code Pro';
}

pre {
  font-size: 0.90em;
}

button {
}

button.building {
  background: #333;
}

/* code highlighting styles */

.CodeMirror {
  font-family: 'Source Code Pro';
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

/* spinner */

div.loader {
  margin: 41vh auto 0;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 2vh solid rgba(255, 255, 255, 0.2);
  border-right: 2vh solid rgba(255, 255, 255, 0.2);
  border-bottom: 2vh solid rgba(255, 255, 255, 0.2);
  border-left: 2vh solid rgba(0, 255, 0, 0.1);
  -webkit-animation: load8 1.2s infinite linear;
  animation: load8 1.2s infinite linear;

  display: none;
}
div.loader, div.loader:after {
  border-radius: 50%;
  width: 10vh;
  height: 10vh;
}

div.play.loading > iframe {
  display: none;
}

div.play.loading > div.loader {
  display: inherit;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}