Initial commit 🎉

fbshipit-source-id: b6fc29740c6875d2e78953b8a7123890a67930f2
Co-authored-by: Sebastian McKenzie <sebmck@fb.com>
Co-authored-by: John Knox <jknox@fb.com>
Co-authored-by: Emil Sjölander <emilsj@fb.com>
Co-authored-by: Pritesh Nandgaonkar <prit91@fb.com>

website/static/css/custom.css

@@ -0,0 +1,324 @@
+/* your custom css */
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'San Francisco', -apple-system, BlinkMacSystemFont,
+    '.SFNSText-Regular', 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 17px;
+  font-weight: 400;
+}
+
+.fixedHeaderContainer header h2 {
+  font-family: 'San Francisco', -apple-system, BlinkMacSystemFont,
+    '.SFNSText-Regular', 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 17px;
+  font-weight: 400;
+}
+
+.splash {
+  min-height: 700px;
+  background: linear-gradient(#121020, #21233e);
+  text-align: center;
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.splash h1 {
+  color: white;
+  font-size: 44px;
+  line-height: 100%;
+  margin-top: 15px;
+  margin-bottom: 25px;
+  font-weight: 200;
+  letter-spacing: 1px;
+}
+
+.splash h2 {
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 300;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50px;
+  font-size: 20px;
+  line-height: 140%;
+  max-width: 750px;
+  letter-spacing: 1px;
+}
+
+.splash .btn {
+  color: white;
+  display: inline-block;
+  padding: 7px 20px;
+  border-radius: 6px;
+  margin: 0 10px;
+  border: 1px solid white;
+}
+
+.splash .btn.primary {
+  background-color: #008cf2;
+  border-color: #008cf2;
+}
+
+.splash .shadow {
+  position: absolute;
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 15px;
+  z-index: 2;
+}
+
+.center {
+  text-align: center;
+}
+
+@keyframes slideIn {
+  0% {
+    transform: translate(-50%, -320px);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -360px);
+    opacity: 1;
+  }
+}
+
+.splashScreen {
+  width: 100%;
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  animation: 0.6s ease-out 0.2s 1 slideIn forwards;
+  width: 1116px;
+  max-width: 100%;
+}
+
+.content {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 50px 15px;
+}
+
+.content.row {
+  display: flex;
+  flex-direction: row;
+  margin: 80px auto;
+}
+
+.content .col {
+  flex-basis: 0;
+  flex-grow: 1;
+  padding: 10px 20px;
+  align-self: center;
+}
+
+.col h3 {
+  font-size: 28px;
+  font-weight: 300;
+  margin-bottom: 20px;
+}
+
+.col h4 {
+  font-weight: 500;
+  font-size: 0.8em;
+  opacity: 0.7;
+  text-transform: uppercase;
+}
+
+.col p {
+  opacity: 0.7;
+}
+
+footer.nav-footer {
+  box-shadow: none;
+  background: #121020;
+  font-size: 15px;
+}
+
+nav.toc .toggleNav,
+nav.toc .toggleNav .navGroup.navGroupActive {
+  background: transparent;
+}
+
+nav.toc .toggleNav .navGroup.navGroupActive ul {
+  padding: 0;
+  margin-bottom: 20px;
+}
+
+nav.toc .toggleNav ul li a {
+  margin: 0;
+  font-size: 1em;
+  opacity: 0.7;
+}
+
+nav.toc .toggleNav .navGroup.navGroupActive h3 {
+  background: none;
+  color: inherit;
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+}
+
+.button {
+  border-radius: 6px;
+  text-transform: none;
+}
+
+.sitemap {
+  width: 100%;
+}
+
+.docsNavContainer {
+  margin-top: 65px;
+}
+
+a.learnmore {
+  display: inline-block;
+  margin-top: 10px;
+  color: $actionColor;
+}
+
+a.learnmore:hover {
+  opacity: 0.7;
+}
+
+nav.toc .toggleNav ul li a.navItemActive {
+  color: $actionColor;
+  opacity: 1;
+}
+
+code,
+pre code {
+  font-size: 0.85em;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+pre code {
+  background: none;
+  box-shadow: none;
+  border-left-color: #585760;
+  border-left-width: 3px;
+  margin-left: 0;
+  line-height: 1.4;
+  border-radius: 0;
+}
+
+.mainContainer {
+  font-size: 1em;
+  line-height: 100%;
+}
+
+.mainContainer .wrapper .post h1,
+.mainContainer .wrapper .post h2,
+.mainContainer .wrapper .post h3 {
+  font-weight: 400;
+}
+
+.mainContainer .wrapper .post h2 {
+  font-weight: 300;
+  font-size: 28px;
+}
+
+.mainContainer .wrapper .post h1 {
+  font-weight: 300;
+}
+
+.mainContainer .wrapper .post *:not(h2) + h2,
+.mainContainer .wrapper .post *:not(h2) + h3 {
+  margin-top: 40px;
+}
+
+.mainContainer .wrapper p,
+.blockElement p,
+.mainContainer .wrapper ul li,
+.mainContainer .wrapper ol li {
+  line-height: 1.4;
+}
+
+.mainContainer article a {
+  color: $actionColor;
+}
+
+.mainContainer article a:hover {
+  opacity: 0.8;
+}
+
+footer .sitemap .nav-home,
+footer .fbOpenSource {
+  opacity: 1;
+}
+
+footer iframe {
+  margin-top: 8px;
+}
+
+@media screen and (max-width: 736px) {
+  .docsNavContainer,
+  .docsSliderActive nav.toc .navBreadcrumb {
+    margin-top: 0;
+    background-color: #f5f7f9;
+    border-bottom: 1px solid #d9dde1;
+  }
+
+  nav.toc section .navGroups {
+    padding: 50px 20px 60px;
+  }
+
+  .content.row {
+    flex-direction: column;
+  }
+
+  .splash .splashScreen {
+    margin-top: 20px;
+  }
+
+  .content.row {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  footer .sitemap {
+    margin: 0;
+  }
+
+  footer .sitemap > div {
+    padding: 20px;
+  }
+
+  .splash h1 {
+    font-size: 36px;
+    margin-top: 0;
+  }
+
+  .fixedHeaderContainer a {
+    margin-left: auto;
+    margin-right: auto;
+    padding-right: 15px;
+  }
+}
+
+@media screen and (max-width: 680px) {
+  .splash .splashScreen {
+    margin-top: 20px;
+    top: 120%;
+  }
+}
+
+@media only screen and (min-width: 736px) {
+  .navigationSlider .slidingNav ul li a {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  .navigationSlider .slidingNav ul li:last-child a {
+    padding-right: 0;
+  }
+}