fixing website

docs/theme/gotenberg/css/index.css

@@ -0,0 +1,342 @@
+:root {
+  --ease: cubic-bezier(.82, 0, .12, 1);
+  --width: 800px;
+  --header-height: 400px;
+
+  --tracking: 0.05rem;
+  --tracking-medium: 0.5rem;
+  --tracking-large: 0.8rem;
+
+  --dark: #000;
+  --blue: #33A9FF;
+  --light-gray: #fafafa;
+
+  --bg: #fff;
+  --fg: #868E96;
+  --fg-dark: #212529;
+
+  --selection-bg: var(--blue);
+  --selection-fg: white;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  font-family: -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  font-weight: 300;
+  background: var(--bg);
+  color: var(--fg-dark);
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+}
+
+::selection {
+  background: var(--selection-bg);
+  color: var(--selection-fg);
+}
+
+h1, h2, h3, h4 {
+  margin-top: 75px;
+  margin-bottom: 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: var(--fg-dark);
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 1.5rem;
+}
+
+h1 + p {
+  font-size: 1.5rem;
+  line-height: 1.6;
+}
+
+h3 {
+  font-size: 1.0rem;
+  font-style: italic;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+p {
+  margin: 25px 0;
+  line-height: 1.6;
+  color: var(--fg-color-light);
+}
+
+li strong,
+p strong {
+  color: var(--fg-dark);
+  font-weight: 500;
+}
+
+li a,
+p a {
+  color: var(--fg-dark);
+  font-weight: 400;
+  padding-bottom: 3px;
+  border-bottom: 1px dotted #ddd;
+}
+
+li a:hover,
+p a:hover {
+  color: var(--blue);
+  border-bottom: none;
+}
+
+p a:hover {
+  border-bottom-color: var(--color);
+}
+
+ul {
+  margin: 50px 0 50px 30px;
+  padding: 0;
+}
+
+ul ul {
+  margin: 10px 0 10px 30px;
+}
+
+ul li {
+  margin: 5px 0;
+  color: var(--fg-color-light);
+  line-height: 1.5em;
+}
+
+ul li strong {
+  color: var(--fg-color);
+  font-weight: 500;
+}
+
+pre {
+  background: var(--light-gray);
+  color: var(--dark);
+  padding: 30px;
+  border-radius: 2px;
+  overflow: auto;
+  font: "Source Code Pro", Menlo, monospace;
+  font-size: .8em;
+  line-height: 1.5em;
+}
+
+blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: var(--fg-dark);
+  border-left: 0.25em solid var(--dark);
+}
+
+li > code,
+p > code {
+  border: 1px solid #DEE2E6;
+  font-size: 0.75rem;
+  padding: 3px 10px;
+  border-radius: 3px;
+  white-space: nowrap;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+details > summary {
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+details > p {
+  border-left: 3px solid var(--dark);
+  padding-left: 15px;
+}
+
+.Wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.Container {
+  width: var(--width);
+  display: flex;
+  flex-direction: column;
+}
+
+.Content-wrapper {
+  display: flex;
+}
+
+.Header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--header-height);
+}
+
+.Sidebar {
+  flex: 1 1 auto;
+}
+
+.Content {
+  width: 75%;
+}
+
+.Content img {
+  max-width: 100%;
+}
+
+.Menu {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 50px;
+  color: var(--fg-dark);
+}
+
+.Menu > .item {
+  padding-bottom: 15px;
+}
+
+.Menu > .item > a {
+  position: relative;
+  user-select: none;
+  font-weight: 400;
+  transition: color 200ms;
+  color: var(--fg);
+}
+
+.Menu > .item > a.active {
+  color: var(--fg-dark);
+}
+
+.Menu > .item > a:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: -5px;
+  left: 0;
+  background-color: var(--fg-dark);
+  visibility: hidden;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: all 250ms var(--ease);
+}
+
+.Menu > .item > a:hover {
+  color: var(--fg-dark);
+}
+
+.Menu > .item > a:hover:before {
+  visibility: visible;
+  transform: scaleX(1);
+}
+
+.Page {
+  margin-top: 100px;
+  padding-top: 50px;
+}
+
+.Page:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.Title {
+  margin: 5px 0;
+  line-height: 2.2em;
+}
+
+.Title.center {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  max-width: 500px;
+}
+
+.Title.margin {
+  margin-bottom: 80px;
+}
+
+.Title > span {
+  display: block;
+}
+
+.Title .subtext {
+  color: var(--fg-color-light);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  display: none;
+}
+
+.Title .text {
+  letter-spacing: var(--tracking);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.Title.small .text {
+  font-size: 14px;
+  text-transform: none;
+  letter-spacing: normal;
+  line-height: 2rem;
+}
+
+.Anchor {
+  position: relative;
+  margin-left: -14px;
+  opacity: 0.15;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+}
+
+.Anchor svg {
+  position: absolute;
+  right: 5px;
+  top: 0;
+}
+
+.Anchor svg path {
+  pointer-events: all
+}
+
+.Anchor:hover {
+  opacity: 1;
+}
+
+.Footer {
+  height: 100px;
+}
+
+@media screen and (max-width: 850px) {
+  html, body {
+    --header-height: 300px;
+    --width: 80%;
+    font-size: 14px;
+  }
+
+  .Content-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .Sidebar {
+    margin-bottom: 30px;
+  }
+
+  .Content {
+    width: 100%;
+  }
+}

docs/theme/gotenberg/js/index.js

@@ -0,0 +1,46 @@
+/**
+ * Setup.
+ */
+
+const items = document.querySelectorAll('.Page')
+const links = document.querySelectorAll('.Menu a')
+
+/**
+ * Check if `el` is out out of view.
+ */
+
+function isBelowScroll(el) {
+  return el.getBoundingClientRect().bottom > 0
+}
+
+/**
+ * Activate item `i`.
+ */
+
+function activateItem(i) {
+  links.forEach(e => e.classList.remove('active'))
+  links[i].classList.add('active')
+}
+
+/**
+ * Activate the correct menu item for the
+ * contents in the viewport.
+ */
+
+function activate() {
+  let i = 0
+
+  for (; i < items.length; i++) {
+    if (isBelowScroll(items[i])) {
+      break
+    }
+  }
+
+  activateItem(i)
+}
+
+/**
+ * Activate scroll spy thingy.
+ */
+
+window.addEventListener('scroll', e => activate())

docs/theme/gotenberg/views/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{.Title}} &#183; {{.Subtitle}}</title>
+    <link rel="icon" type="image/png" href="theme/gotenberg/img/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="theme/gotenberg/img/favicon-16x16.png" sizes="16x16" />
+    <link rel="stylesheet" href="theme/gotenberg/css/index.css">
+  </head>
+  <body>
+    <div class="Wrapper">
+      <div class="Container">
+        <div class="Header">
+          <div class="Title center">
+            <img src="https://user-images.githubusercontent.com/8983173/49701110-4c8b9280-fbe8-11e8-895c-a4b9c7d2515b.png" alt="Gotenberg logo" width="250" height="250" />
+            <span class="text">{{.Title}}</span>
+            <span class="subtext">{{.Subtitle}}</span>
+          </div>
+        </div>
+
+        <div class="Content-wrapper">
+          <div class="Sidebar">
+            <div class="Menu">
+              {{range .Pages}}
+                <div class="item">
+                  <a href="#{{.Slug}}">{{.Title}}</a>
+                </div>
+              {{end}}
+            </div>
+          </div>
+
+          <div class="Content">
+            {{range .Pages}}
+              <div class="Page" id="{{.Slug}}">
+                <h1>{{.Title}}</h1>
+                {{.Content}}
+              </div>
+            {{end}}
+            <div class="Footer"></div>
+            <script src="theme/gotenberg/js/index.js"></script>
+          </div>
+        </div>
+    </div>
+  </body>
+</html>