jrnl/docs_theme/assets/index.css

/* reset */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

body {
  background-color: var(--white);
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
}

.icon {
  background-image: url("/img/sprites.svg");
  width: 32px;
  height: 32px;
  display: inline-block;
  font-size: 40px;
  background-size: 200px 80px;
}

h3 {
  font-weight: 400;
}

.icon.secure {
  background-position: 0em 0em;
}

.icon.future {
  background-position: -1em 0em;
}

.icon.search {
  background-position: -2em 0em;
}

.icon.nli {
  background-position: -3em 0em;
}

.icon.share {
  background-position: 0em -1em;
}

.icon.sync {
  background-position: 0 -1em;
}

.icon.dayone {
  background-position: -1em -1em;
}

.icon.github {
  background-position: -2em -1em;
}

.icon.search {
  background-position: -2em 0;
}

.icon.folders {
  background-position: -3em -1em;
}

.icon.twitter {
  background-position: -4em -1em;
}

header {
  background-image: linear-gradient(211deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
  color: var(--white);
  border: 0px solid transparent;
  display: relative;
  padding-top: 150px;
  overflow: visible;
}

#terminal {
  background: var(--terminal);
  max-width: 520px;
  box-shadow: 0 -2px 16px 0 var(--black-shadow);
  border-radius: 6px;
  min-height: 120px;
  margin: 0px auto;
  position: relative;
  transform: translateY(75px);
  color: var(--off-white);
  font-family: "Monaco", "Courier New";
  font-size: 18px;
  padding: 45px 20px 0px 20px;
  line-height: 165%;
}

#terminal b {
  font-weight: normal;
  color: var(--off-white);
}

#terminal i {
  font-style: normal;
  color: var(--light-purple);
}

#terminal:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--grey);
  box-shadow: 25px 0 0 var(--grey), 50px 0 0 var(--grey);
}

#typed:before {
  content: "$ ";
  color: var(--mid-purple);
}

#twitter {
  display: block;
  position: absolute;
  text-decoration: none;
  top: 20px;
  right: 20px;
  border: 1px solid var(--white);
  padding: 5px 10px;
  color: var(--white);
  border-radius: 3px;
}

#twitter .icon {
  transform: scale(0.5);
  vertical-align: -18%;
  margin: 0;
  padding: 0;
}

#twitter:hover,
#twitter:active {
  text-decoration: none;
  box-shadow: 0 2px 25px 0 var(--blacker-shadow);
  transition: all .5s ease;
}

#title {
  max-width: 630px;
  margin: 0 auto;
  padding: 0px 20px;
}

#prompt {
  max-width: 700px;
  margin: 25px auto 100px auto;
  padding: 0px 20px;
}

header img {
  float: left;
  margin-right: 30px;
}

h1 {
  color: var(--white);
  font-weight: 300;
}

a,
a:visited {
  color: var(--dark-purple);
}

a:hover {
  color: var(--bright-purple);
}

nav {
  text-align: center;
}

nav a#twitter-nav {
  display: none;
}

nav a, nav a:visited {
  color: var(--dark-purple);
  font-size: 20px;
  line-height: 2.5em;
  margin: 0 40px;
  font-weight: 400;
  text-decoration: none;
}

nav a:hover,
nav a:visited:hover {
  color: var(--bright-purple);
  text-decoration: underline;
}


nav a.cta {
  display: inline-block;
  color: var(--white);
  background-image: linear-gradient(259deg, var(--mid-purple) 0%, var(--dark-purple) 100%);
  box-shadow: 0 2px 8px 0 var(--blacker-shadow);
  border-radius: 50px;
  padding: 0 2em;
  white-space: nowrap;
  transition: all 0.1s ease;
  text-decoration: none;
}

nav a.cta:hover {
  text-decoration: none;
  background-image: linear-gradient(259deg, var(--bright-purple) 0%, var(--dark-purple) 100%);
  box-shadow: 0 4px 16px 0 var(--black-shadow);
  color: var(--off-white);
}

main {
  padding: 60px 0 0 0;
}

.flex {
  display: flex;
  margin: 0 auto;
  max-width: 920px;
  flex-wrap: wrap;
  padding: 20px 20px;
  padding-top: 30px;
  justify-content: space-between;
}

.flex section {
  /*margin: 20px;*/
  margin-top: 40px;
  width: 32%;
}

.flex section:first-child {
  margin-left: 0px;
}
.flex section:last-child {
  margin-right: 0px;
}

.flex section i {
  float: left;
  left: 0;
  display: block;
  margin: 0px auto 10px auto;
}

.flex section h3 {
  margin-top: 0;
  font-size: 18px;
  color: var(--dark-purple);
  margin-bottom: 0.5em;
  font-weight: 300;
  margin-left: 40px;
}

.flex section p {
  padding-left: 40px;
  color: var(--grey);
  font-size: 16px;
  margin: 0;
}

footer {
  color: var(--grey);
  max-width: 700px;
  margin: 70px auto 20px;
  padding: 0 20px 20px 20px;
  font-size: 16px;
  text-align: center;
}

@media screen and (max-width: 680px) {
  .flex {
    display: block;
    padding: 0;
  }
  .flex section {
    width: 100%;
  }

  main {
    padding: 20px;
    margin: 0;
    width: calc(100% - 40px);
  }

  nav a,
  nav a#twitter-nav {
    display: inline-block;
    margin: 0px 10px;
  }

  nav a.cta {
    display: block;
    margin: 20px;
  }

  header #twitter {
    display: none;
  }

  header #logo {
    display: block;
    float: none;
    margin: 0px auto;
  }

  header #title br {
    display: none;
  }
}