Split website up

2026-01-12 12:09:26 +00:00 · 2017-08-08 17:41:40 -04:00
parent ac434cd458
commit 68acb1f473
43 changed files with 7406 additions and 1814 deletions
--- a/source/css/_docs.css
+++ b/source/css/_docs.css
@@ -0,0 +1,178 @@
+body {
+  border-top: solid .3rem var(--color-aqua);
+}
+
+#head {
+  margin: var(--component-spacing-big) 0;
+}
+
+#head img {
+  width: 24rem;
+  vertical-align: middle;
+}
+
+#wrap {
+  max-width: 60rem;
+  padding: 0 2rem;
+  margin: 2rem auto;
+  display: grid;
+  grid-template-columns: 12rem calc(100% - 12rem);
+}
+
+#nav {
+  text-align: right;
+  border-right: solid var(--component-border-width) var(--component-border-color);
+  padding-right: 1rem;
+  margin-right: 2rem;
+}
+
+#nav a {
+  border-radius: var(--component-border-radius);
+  margin: .5rem 0;
+  display: block;
+}
+
+#nav a.current {
+  color: var(--text-muted);
+  cursor: default;
+}
+
+#nav a.current:hover {
+
+}
+
+#foot {
+  text-align: center;
+  margin: var(--component-spacing-big) 0;
+}
+
+#foot img {
+  width: 14rem;
+  display: inline-block;
+  margin: .5rem 0;
+}
+
+#homepage #wrap {
+  max-width: 48rem;
+  display: block;
+}
+
+@media (max-width: 60rem) {
+  #wrap {
+    padding: 0 1rem;
+    display: block;
+  }
+
+  #nav {
+    font-size: .9rem;
+    border: none;
+    text-align: center;
+    margin: 0 0 2rem 0;
+  }
+
+  #nav a {
+    margin: .3rem;
+    display: inline-block;
+  }
+}
+
+h1[id]:not(:first-child),
+h2[id]:not(:first-child),
+h3[id]:not(:first-child),
+h4[id]:not(:first-child) {
+  margin-top: 3rem;
+}
+
+h3[id],
+h4[id] {
+  color: var(--color-gray);
+}
+
+pre {
+  margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
+}
+
+pre code {
+  white-space: pre;
+  padding: 0;
+  display: block;
+}
+
+@media (max-width: 45rem) {
+  a.bookmark {
+    width: auto;
+    margin-left: 0;
+  }
+}
+
+/* Column helpers */
+.two-column {
+  column-count: 2;
+  column-gap: 1rem;
+}
+
+@media (max-width: 50rem) {
+  .two-column {
+    column-count: 1;
+    column-gap: 0;
+  }
+}
+
+/* Sizing examples */
+.width-sizing-example {
+  border: solid 1px var(--component-border-color);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.width-sizing-example div {
+  background: var(--color-primary);
+  color: white;
+  text-align: center;
+  padding: .25rem;
+  margin-bottom: 1rem;
+}
+
+.width-sizing-example div:last-child {
+  margin-bottom: 0;
+}
+
+.height-sizing-example {
+  border: solid 1px var(--component-border-color);
+  height: 15rem;
+  padding: 1rem .5rem;
+  margin-bottom: 1rem;
+}
+
+.height-sizing-example div {
+  width: calc(25% - 1rem);
+  float: left;
+  background: var(--color-primary);
+  color: white;
+  text-align: center;
+  padding: .25rem;
+  margin: 0 .5rem;
+}
+
+/* Loader example */
+.loader-example div {
+  float: left;
+  width: 6rem;
+  height: 6rem;
+  border: dashed 1px var(--component-border-color);
+  margin-right: .5rem;
+}
+
+/* Tabs example */
+.tabs-vertical-example {
+  display: grid;
+  grid-template-columns: 30% 70%;
+}
+
+.tabs-vertical-example .tabs-nav {
+  padding-right: 2rem;
+}
+
+.tabs-vertical-example .tabs-nav a {
+  display: block;
+}