@t8/docsgen 0.1.62 → 0.1.64

package/dist/bin.js

@@ -765,31 +765,33 @@ ${getInjectedContent(ctx, "section", "body")}
 <div class="layout">
 <main>
 <section class="intro-title">
-  <div class="badges">
-    ${badges}
+  <div class="section-content">
+    <div class="badges">
+      ${badges}
+    </div>
+    <h1>${getTitle(ctx, { cover: true })}</h1>
+    <div class="description">
+      ${description || (escapedPackageDescription ? `<p><em>${escapedPackageDescription}</em><p>` : "")}
+    </div>
+    <p class="actions">
+      <a href="${root}start" class="primary button">Docs</a>
+      <span class="sep"> \u2022 </span>
+      ${getRepoLink(ctx, "button")}
+    </p>
+    ${backstory ? `<p class="ref"><a href="${backstory}">Backstory</a></p>` : ""}
+    <p class="installation"><code>${installation}</code></p>
   </div>
-  <h1>${getTitle(ctx, { cover: true })}</h1>
-  <div class="description">
-    ${description || (escapedPackageDescription ? `<p><em>${escapedPackageDescription}</em><p>` : "")}
-  </div>
-  <p class="actions">
-    <a href="${root}start" class="primary button">Docs</a>
-    <span class="sep"> \u2022 </span>
-    ${getRepoLink(ctx, "button")}
-  </p>
-  ${backstory ? `<p class="ref"><a href="${backstory}">Backstory</a></p>` : ""}
-  <p class="installation"><code>${installation}</code></p>
   <script>document.querySelectorAll(".badges img").forEach(img=>{let c=img.closest(".badge");if(c){if(img.complete)c.classList.add("loaded");else{img.onload=()=>{c.classList.add("loaded");};img.onerror=()=>{c.classList.add("failed");};}}});</script>
 </section>
 ${intro || features ? `
 <section class="intro">
 ${intro ? `
-  <div class="intro-content">
+  <div class="section-content">
     ${intro}
   </div>
 ` : ""}
 ${features ? `
-  <div class="features">
+  <div class="features section-content">
     <h2>Features</h2>
     ${features}
   </div>

package/dist/css/base.css

@@ -88,6 +88,7 @@ a.button {
 
   display: inline-block;
   text-decoration: none;
+  text-align: center;
   color: var(--b0);
   background: color(from var(--c0) srgb r g b / 0.65);
   border: 0.075em solid var(--c0);

package/dist/css/index.css

@@ -38,7 +38,7 @@ body {
 }
 
 main {
-  --max-content-width: 32em;
+  --max-content-width: 36em;
   --line-color: color(from var(--c0) srgb r g b / 0.1);
 
   display: flex;
@@ -46,7 +46,7 @@ main {
   align-items: flex-start;
   justify-content: center;
   padding: 0;
-  margin: 6vh 0;
+  margin: 0;
   box-sizing: border-box;
 }
 @media (max-width: 840px) {
@@ -128,29 +128,45 @@ header {
 }
 
 section {
+  width: 50%;
+  align-self: stretch;
+  padding: 0;
+  box-sizing: border-box;
+}
+section .section-content {
   max-width: var(--max-content-width);
-  padding: 0 2.5em;
+  padding: 1em 3.5vw;
   box-sizing: border-box;
 }
-section + section {
+section.intro-title {
   display: flex;
   flex-direction: column;
-  align-self: stretch;
-  justify-content: center;
-  border-left: 0.1em solid var(--line-color);
-}
-section.intro-title {
+  align-items: center;
   text-align: center;
+}
+section.intro-title .section-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 95vh;
   padding-top: 4em;
   padding-bottom: 4em;
 }
+section.intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+section.intro .section-content {
+  width: 100%;
+}
 @media (max-width: 840px) {
   section {
     width: auto;
     max-width: 100%;
     padding: var(--content-padding-y) var(--content-padding-x);
   }
-  section + section {
+  section.intro {
     align-items: center;
     border-left: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t8/docsgen",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "description": "",
   "main": "dist/bin.js",
   "bin": {

package/src/bin/setContent.ts

@@ -185,20 +185,22 @@ ${getInjectedContent(ctx, "section", "body")}
 <div class="layout">
 <main>
 <section class="intro-title">
-  <div class="badges">
-    ${badges}
+  <div class="section-content">
+    <div class="badges">
+      ${badges}
+    </div>
+    <h1>${getTitle(ctx, { cover: true })}</h1>
+    <div class="description">
+      ${description || (escapedPackageDescription ? `<p><em>${escapedPackageDescription}</em><p>` : "")}
+    </div>
+    <p class="actions">
+      <a href="${root}start" class="primary button">Docs</a>
+      <span class="sep"> • </span>
+      ${getRepoLink(ctx, "button")}
+    </p>
+    ${backstory ? `<p class="ref"><a href="${backstory}">Backstory</a></p>` : ""}
+    <p class="installation"><code>${installation}</code></p>
   </div>
-  <h1>${getTitle(ctx, { cover: true })}</h1>
-  <div class="description">
-    ${description || (escapedPackageDescription ? `<p><em>${escapedPackageDescription}</em><p>` : "")}
-  </div>
-  <p class="actions">
-    <a href="${root}start" class="primary button">Docs</a>
-    <span class="sep"> • </span>
-    ${getRepoLink(ctx, "button")}
-  </p>
-  ${backstory ? `<p class="ref"><a href="${backstory}">Backstory</a></p>` : ""}
-  <p class="installation"><code>${installation}</code></p>
   <script>document.querySelectorAll(".badges img").forEach(img=>{let c=img.closest(".badge");if(c){if(img.complete)c.classList.add("loaded");else{img.onload=()=>{c.classList.add("loaded");};img.onerror=()=>{c.classList.add("failed");};}}});</script>
 </section>
 ${
@@ -208,7 +210,7 @@ ${
 ${
   intro
     ? `
-  <div class="intro-content">
+  <div class="section-content">
     ${intro}
   </div>
 `
@@ -217,7 +219,7 @@ ${
 ${
   features
     ? `
-  <div class="features">
+  <div class="features section-content">
     <h2>Features</h2>
     ${features}
   </div>

package/src/css/base.css

@@ -88,6 +88,7 @@ a.button {
 
   display: inline-block;
   text-decoration: none;
+  text-align: center;
   color: var(--b0);
   background: color(from var(--c0) srgb r g b / 0.65);
   border: 0.075em solid var(--c0);

package/src/css/index.css

@@ -38,7 +38,7 @@ body {
 }
 
 main {
-  --max-content-width: 32em;
+  --max-content-width: 36em;
   --line-color: color(from var(--c0) srgb r g b / 0.1);
 
   display: flex;
@@ -46,7 +46,7 @@ main {
   align-items: flex-start;
   justify-content: center;
   padding: 0;
-  margin: 6vh 0;
+  margin: 0;
   box-sizing: border-box;
 }
 @media (max-width: 840px) {
@@ -128,29 +128,45 @@ header {
 }
 
 section {
+  width: 50%;
+  align-self: stretch;
+  padding: 0;
+  box-sizing: border-box;
+}
+section .section-content {
   max-width: var(--max-content-width);
-  padding: 0 2.5em;
+  padding: 1em 3.5vw;
   box-sizing: border-box;
 }
-section + section {
+section.intro-title {
   display: flex;
   flex-direction: column;
-  align-self: stretch;
-  justify-content: center;
-  border-left: 0.1em solid var(--line-color);
-}
-section.intro-title {
+  align-items: center;
   text-align: center;
+}
+section.intro-title .section-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 95vh;
   padding-top: 4em;
   padding-bottom: 4em;
 }
+section.intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+section.intro .section-content {
+  width: 100%;
+}
 @media (max-width: 840px) {
   section {
     width: auto;
     max-width: 100%;
     padding: var(--content-padding-y) var(--content-padding-x);
   }
-  section + section {
+  section.intro {
     align-items: center;
     border-left: none;
   }