From 642b8da58e38a85bff6084f14722aa04832e5c17 Mon Sep 17 00:00:00 2001
From: Galen Wolfe-Pauly <mailroom@office-for.com>
Date: Wed, 16 Sep 2015 12:04:51 -0700
Subject: [PATCH] not sure how that got reverted

---
 lib/base.css | 619 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 529 insertions(+), 90 deletions(-)

diff --git a/lib/base.css b/lib/base.css
index bf2f4752e..6a5cd5955 100644
--- a/lib/base.css
+++ b/lib/base.css
@@ -70,113 +70,552 @@
   font-weight: 500;
   font-style: normal;
 }
-@font-face {
-  font-family: "scp";
-  src: url("//storage.googleapis.com/urbit-extra/scp-bold.woff");
-  font-weight: 600;
-  font-style: normal;
+body,
+html {
+  font-family: "bau", "Helvetica Neue", helvetica, arial, sans-serif;
 }
-@font-face {
-  font-family: "scp";
-  src: url("//storage.googleapis.com/urbit-extra/scp-black.woff");
-  font-weight: 700;
-  font-style: normal;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-html,
-input,
-button,
-body {
-  font-family: "bau";
-  font-size: 18px;
-}
-
-pre,
 code,
-.mono {
-  font-family:"scp";
+pre,
+li:before,
+.spin,
+#bred a,
+h3.time {
+  font-family: "scp", "Courier New", courier, monospace;
 }
-
-#c {
-  width: 32rem;
-  margin-left: -16rem;
-  position: absolute;
-  left: 50%;
+body,
+html {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.6rem;
+  -webkit-text-size-adjust: none;
+}
+a {
+  color: #000;
+  text-decoration: none;
+  border-bottom: 2px solid #000;
+  display: inline-block;
+  line-height: 0.8rem;
+}
+hr {
+  display: inline-block;
+  width: 6rem;
+  border: 0;
+  border-top: 2px solid #f4f4f4;
 }
-
 h1 {
-  font-size: 1.6rem;
-  font-weight: 500;
+  margin-top: 4rem;
 }
-
-h1:after {
-  content: "\2014";
-  margin-left: 1rem;
-}
-
-#c pre {
-  font-size: .6rem;
+h2,
+h3 {
+  margin: 0;
   margin-top: 2rem;
 }
-
-#pass {
-  width: 32rem;
-}
-
-button {
-  border: .3rem solid #000;
-  background-color: #fff;
-  font-size: 1rem;
-  padding: .3rem;
+h1,
+h2,
+h3,
+h4,
+strong {
   font-weight: 500;
 }
-
-.sig {
-  font-weight: 400;
-  font-size: 2rem;
-  display: inline;
-  vertical-align: middle;
+h4 {
+  margin-bottom: 0.3rem;
 }
-
-span#ship {
-  font-family: 'bau';
-  font-weight: 400;
-  font-size: 1.2rem;
-  text-transform: uppercase;
-  letter-spacing: .1rem;
+h5 {
+  font-style: italic;
+  font-weight: 200;
+  margin: 0;
+}
+h1 code,
+h2 code,
+h3 code {
+  font-size: inherit;
+  padding: 0.3rem;
+}
+pre,
+code {
+  font-size: 0.8rem;
+}
+pre {
+  background-color: #f5f5f5;
+  padding: 0.3rem;
+  margin-left: -0.3rem;
+}
+code {
+  line-height: 1.2rem;
+  background-color: #f4f4f4;
+  margin-top: -0.05rem;
+  padding: 0.2rem;
   display: inline-block;
-  min-width: 1rem;
 }
-
-input {
-  font-family: 'scp';
+ul {
+  list-style: none;
+  padding: 0;
+}
+li:before {
+  content: "+";
+  padding-right: 0.3rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+#nav,
+#cont {
+  left: 50%;
+}
+#cont {
+  width: 42rem;
+  margin-left: -21rem;
+  background-color: #fff;
+  z-index: 1;
+}
+#nav {
+  position: fixed;
+  top: 0rem;
+  width: 57rem;
+  padding-top: 1rem;
+  z-index: 0;
+  margin-left: -32rem;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+#nav.moving {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+#nav:hover {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+#cont {
+  position: absolute;
+  top: 0;
+  margin-bottom: 9rem;
+}
+.loading {
+  display: inline-block;
+}
+.spin {
+  color: #fff;
+  padding: 0.6rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.1rem;
+  z-index: 3;
+}
+.loading > .spin {
+  background-color: #555;
+}
+#body .loading > .spin {
+  background-color: #000;
+}
+.spin.state-0:before {
+  content: "\2599";
+}
+.spin.state-1:before {
+  content: "\259B";
+}
+.spin.state-2:before {
+  content: "\259C";
+}
+.spin.state-3:before {
+  content: "\259F";
+}
+#load.load {
+  display: inline-block;
+  font-weight: 500;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(10,10,10,0.4);
+  opacity: 1;
+  transition: opacity 1s ease-in-out;
+  z-index: 4;
+}
+img.logo {
+  height: 2rem;
+  width: 2rem;
+}
+h3.time {
+  margin-top: 0.3rem;
+  font-size: 0.7rem;
+  font-weight: 200;
+}
+#nav .links > div {
+  display: inline-block;
+  vertical-align: top;
+}
+#nav #sibs {
+  width: 8rem;
+  transition: margin-top 0.3s ease-in-out;
+  overflow: hidden;
+}
+#nav #sibs > div {
+  height: 20px;
+  margin-bottom: 4px;
+}
+.focus #sibs {
+  margin-top: 0 !important;
+  transition: margin-top 0.3s ease-in-out;
+}
+#nav a,
+.list > li > a {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: 200;
+  letter-spacing: 1px;
+  white-space: nowrap;
+}
+.list > li > a {
+  border-bottom: none;
+  margin-bottom: 0.3rem;
+}
+#nav a,
+.list > li > a h1 {
+  border-bottom: 1px solid #000;
+  margin-right: 0.3rem;
+}
+#nav .active a {
+  font-weight: 500;
+  text-decoration: none;
+}
+#up {
+  padding-right: 1rem;
+  margin-top: -0.3rem;
+}
+#sides {
+  float: right;
+}
+#sides a {
+  margin-right: 0.6rem;
+}
+#nav .arow-up,
+#nav .arow-next,
+#nav .arow-prev {
+  width: 0;
+  height: 0;
+  border: 0.4rem solid transparent;
+}
+#nav .arow-up {
+  border-bottom: 0.6rem solid #000;
+}
+#nav .arow-next {
+  border-left: 0.6rem solid #000;
+}
+#nav .arow-prev {
+  border-right: 0.6rem solid #000;
+}
+#bred {
+  width: 5rem;
+  padding-right: 1rem;
+  text-align: right;
+  font-size: 0.6rem;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#bred a {
+  text-transform: lowercase;
+  vertical-align: top;
+}
+#bred > div {
+  float: right;
+}
+#bred > div > div {
+  display: inline-block;
+  margin-top: -0.2rem;
+}
+#bred a,
+#kids a {
+  margin-right: 0.3rem;
+}
+#bred a {
+  margin-left: 0.3rem;
+}
+.short {
+  width: 32rem;
+}
+.list h1,
+.list li a > div p {
+  margin: 0;
+}
+.list li a > div,
+.list li a > div p {
   display: inline;
 }
-
-span#ship,
-input {
-  border: none;
-  padding: .3rem;
-  outline: none;
-  border-bottom: 3px solid #555;
+.list li a > div p {
+  margin-left: 0.3rem;
+}
+.list li a > div p:first-child {
+  margin-left: 0;
+}
+.list li a > div p code {
+  font-size: 0.7rem;
+  font-weight: 400;
+  text-transform: none;
+}
+.list li a h1 code {
+  text-transform: lowercase;
+  border-bottom: 1px solid #000;
+}
+.list li a code {
+  padding: 0.2rem;
+}
+.list h1,
+.list li a > div div {
+  display: inline;
+}
+.list li a > div div {
+  margin-left: 0.6rem;
+  overflow: hidden;
+}
+.list h1 {
+  font-size: 0.7rem;
+}
+.list.posts .post {
+  margin-bottom: 2rem;
+}
+.list.posts .post h1 {
+  text-transform: none;
+  font-size: 1.6rem;
+  line-height: 1.8rem;
+  margin-bottom: 1rem;
+  display: block;
+}
+.list.posts .post h2 {
+  font-size: 0.7rem;
+  font-weight: 400;
+  line-height: 1rem;
+  margin-top: 0;
+}
+.list.posts li.post:before {
+  content: "";
+}
+div.root h1 {
+  margin-bottom: 2rem;
+}
+div.root .list .sub {
+  margin-left: 0;
+  margin-right: 0.6rem;
+}
+div.root > p {
+  width: 27rem;
+  margin-top: 2rem;
+}
+h2.sub {
+  font-size: 0.7rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 1px;
+  margin-top: 0;
+  text-transform: uppercase;
+}
+div.post h1 {
+  font-size: 2.8rem;
+  line-height: 4rem;
+  display: block;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+div.post h2 {
+  line-height: 1rem;
+  letter-spacing: 1px;
+}
+div.post h2 {
+  margin-top: 4rem;
+}
+div.post h2 {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+div.post p {
+  font-size: 1.2rem;
+  line-height: 2.2rem;
+}
+div.post li p {
+  display: inline;
+}
+div.toc {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+div.toc h1,
+div.toc h2,
+div.toc h3,
+div.toc h4 {
+  font-weight: 400;
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: 1.2rem;
+  margin-top: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+div.toc h2 {
+  margin-left: 1rem;
+}
+div.toc h3 {
+  margin-left: 2rem;
+}
+div.toc h4 {
+  margin-left: 3rem;
+}
+div.toc h1.t {
+  font-weight: 500;
+  font-size: 2rem;
+  text-decoration: none;
+  margin-bottom: 2rem;
+}
+#body .CodeMirror {
+  font-size: 0.8rem;
+  line-height: 1rem;
+}
+#body .CodeMirror .cm-header {
+  font-weight: 200;
+}
+#body .CodeMirror-gutters {
+  background-color: #fff;
+  padding-right: 1rem;
+  margin-left: -1rem;
+}
+.error {
+  color: #f91733;
+}
+.warning {
+  background-color: #ff3537;
+  padding: 1rem;
+  width: 18rem;
+  margin: 2rem 0;
+  color: #fff;
+}
+.warning a {
+  color: inherit;
+  border-color: #fff;
+}
+.warning h1 {
+  font-size: 1rem;
+}
+.warning h1,
+.warning p {
+  margin: 0 0.3rem;
+}
+.warning.w {
+  width: auto;
+}
+@media only screen and (max-width: 1170px) {
+  #nav,
+  #nav > div,
+  #nav.up,
+  #nav.top,
+  #nav > .focus {
+    transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  #nav {
+    position: fixed;
+    top: 0;
+    opacity: 1;
+    width: 42rem;
+    margin-left: -21rem;
+    background-color: #fff;
+    z-index: 2;
+  }
+  #nav.m-down,
+  #nav.m-up {
+    position: absolute;
+  }
+  #nav.m-down.m-fixed {
+    position: fixed;
+    top: 0;
+  }
+  #nav > div {
+    max-height: 1rem;
+    overflow: hidden;
+    transition: max-height 0.3s ease-in-out;
+  }
+  #nav > .focus {
+    max-height: 40rem;
+    transition: max-height 0.3s ease-in-out;
+  }
+  #cont {
+    top: 3rem;
+  }
+}
+@media only screen and (min-width: 320px) and (max-width: 1024px) {
+  body,
+  html {
+    font-size: 21px;
+  }
+  #nav,
+  #cont {
+    width: 94%;
+    padding-left: 3%;
+    margin-left: 0;
+  }
+  #nav {
+    position: fixed;
+    padding-top: 0;
+    opacity: 1;
+    left: 0;
+    background-color: #fff;
+    z-index: 2;
+  }
+  #nav > div {
+    max-height: 1.4rem;
+  }
+  #nav > div {
+    padding-top: 0.6rem;
+  }
+  #nav #sibs {
+    width: 18rem;
+  }
+  #nav #sibs > div {
+    height: 20px;
+    line-height: 20px;
+  }
+  #nav a {
+    display: inline-block;
+    font-size: 0.7rem;
+  }
+  #nav #sides {
+    float: right;
+  }
+  #nav .arow-up,
+  #nav .arow-next,
+  #nav .arow-prev {
+    margin-right: 0;
+    border: 0.4rem solid transparent;
+  }
+  #nav .arow-up {
+    border-bottom: 0.6rem solid #000;
+  }
+  #nav .arow-next {
+    border-left: 0.6rem solid #000;
+  }
+  #nav .arow-prev {
+    margin-right: 1rem;
+    border-right: 0.6rem solid #000;
+  }
+  #cont {
+    top: 3rem;
+    left: 0;
+    padding-bottom: 9rem;
+  }
+  #cont h1:first-child {
+    margin-top: 0;
+  }
+  .short {
+    width: 100%;
+  }
 }
-
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
-  #c {
-    width: 16rem;
-    margin-left: -8rem;
+  #nav > div {
+    max-height: 1.6rem;
   }
-  #pass {
-    width: 16rem;
+  #nav a {
+    font-size: 0.7rem;
   }
-  input {
-    -webkit-appearance: none;
-    border-radius: 0;
+  #nav #sibs > div {
+    height: 20px;
+    line-height: 20px;
   }
-}
+}
\ No newline at end of file