Styling

crucialfelix · Jan 9, 2020 · 0a3f3df · 0a3f3df
1 parent 5095df6
commit 0a3f3df
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 6 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -24,8 +24,9 @@
       .markdown-section {
         padding: 2rem 0.25rem 2rem 0.5rem;
       }
-      p {
+      p, .markdown-section p {
         line-height: 1.2;
+        margin: 0 0 1em 0;
       }
       li {
         font-size: 0.9rem;
@@ -53,8 +54,46 @@
       margin: 0 0 6px 0;
       line-height: 1.2;
     }
+    div.module {
+      margin: 1rem 0;
+      padding: 1rem;
+      background: #e2e1e04d;
+      border-radius: 2px;
+      display: inline-block;
+      position: relative;
+    }
     .module-child {
-      margin: 2rem 0;
+      background: #fff;
+    }
+    .entity-box {
+      border-radius: 2px;
+      display: inline-block;
+      margin: 1rem;
+      padding: 1rem;
+      position: relative;
+      width: 95%;
+      max-width: 50rem;
+
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    }
+    p {
+      font-size: 0.9rem;
+      line-height: 1.2;
+    }
+    .short-text {
+      font-weight: 500;
+      max-width: 40em;
+      line-height: 1.2;
+    }
+    .class-member {
+      margin: 1em .5em;
+    }
+    .class-member h4 {
+      margin: 0;
+    }
+    .type {
+      font-style: italic;
     }
   </style>
 </head>

diff --git a/tasks/render-api.js b/tasks/render-api.js
@@ -303,12 +303,17 @@ const ExternalModule = node => {
   const name = stripQuotes(node.name);
 
   if (node.children) {
+    // if only one then display it without wrapping it in a module
+    if (node.children.length === 1) {
+      return join(...node.children.map(renderNode).map(html => div(html, "entity-box")));
+    }
+
     return div(
       join(
         `${span("module", "token keyword")} ${name}`,
         ...node.children
           .map(node.children.length > 100 ? nodeSummary : renderNode)
-          .map(html => div(html, "module-child")),
+          .map(html => div(html, "module-child entity-box")),
       ),
       "module",
     );
@@ -393,6 +398,9 @@ function renderNode(node) {
   return (fn(node) || "").trim();
 }
 
+/**
+ * Render content for a page.md from package and entity name
+ */
 function renderDocForName(package, name) {
   const api = loadApi(package);
   // findWithRedirects
@@ -417,7 +425,13 @@ function renderDocForName(package, name) {
       return renderNode(a);
     }
   }
-  return renderNode(node);
+
+  const body = renderNode(node);
+  // If this node is not an module, then wrap the individual item as though it were.
+  if (node.kindString !== "External module") {
+    return div(body, "entity-box");
+  }
+  return body;
 }
 
 function* indexBfs(node) {
@@ -452,8 +466,6 @@ const renderIndexJson = (kv, package, packages) => {
 
       for (const leaf of indexBfs(branch)) {
         if (leaf === name) {
-          console.log("found page", { branchName, branch, name, leaf });
-
           return `${branchName}?id=${name}`;
         }
       }