resolves #43 add styles for home page (PR #44)

Author: mojavelinux

gulp.d/tasks/build.js

@@ -101,7 +101,7 @@ module.exports = (src, dest, preview) => () => {
     // NOTE use this statement to bundle a JavaScript library that cannot be browserified, like jQuery
     //vfs.src(require.resolve('<package-name-or-require-path>'), opts).pipe(concat('js/vendor/<library-name>.js')),
     vfs
-      .src(['css/site.css', 'css/vendor/*.css'], { ...opts, sourcemaps })
+      .src(['css/site.css', 'css/home.css', 'css/vendor/*.css'], { ...opts, sourcemaps })
       .pipe(postcss((file) => ({ plugins: postcssPlugins, options: { file } }))),
     vfs.src('font/*.{ttf,woff*(2)}', opts),
     vfs.src('img/**/*.{gif,ico,jpg,png,svg}', opts).pipe(

preview-src/home.adoc

@@ -0,0 +1,56 @@
+= Home Page Title
+:navtitle: Home
+:page-role: home
+
+Welcome to the home page!
+
+[.panel]
+--
+[discrete]
+== xref:home.adoc[First hero panel]
+
+Content for hero panel.
+--
+
+[.panel]
+--
+[discrete]
+== xref:home.adoc[Another hero panel]
+
+Content for hero panel.
+--
+
+[discrete]
+=== Things
+
+Introduction of things.
+
+[.grid]
+Thing A::
+Description of thing A.
+
+Thing B::
+Description of thing B.
+
+Thing C::
+Description of thing C.
+
+[discrete]
+=== Explore topics
+
+[.grid]
+Topic A::
+Description of topic A.
+
+* xref:#[Quicklink 1]
+* xref:#[Quicklink 2]
+* xref:#[Quicklink 3]
+
+Topic B::
+Description of topic B.
+
+Topic C::
+Description of topic C.
+
+Topic D::
+Description of topic D.

src/css/home.css

@@ -0,0 +1,68 @@
+@import "vars.css";
+
+.doc .panel {
+  margin-top: 1rem;
+  background-color: var(--color-smoke-50);
+  border-radius: 0.5em;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.8888rem;
+}
+
+.doc .panel h2 {
+  font-size: 1rem;
+  font-weight: var(--body-font-weight-bold);
+  padding-bottom: 0.25rem;
+}
+
+.doc .panel h2,
+.doc .panel h2 + * {
+  margin-top: 0;
+}
+
+.doc h3 {
+  margin-top: 2rem;
+}
+
+.doc .grid {
+  margin-top: 1rem;
+  font-size: 0.8888rem;
+}
+
+@media screen and (min-width: 769px) {
+  .doc .grid dl {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: row;
+    grid-gap: 0.25rem 1rem;
+  }
+
+  .doc .grid dt {
+    grid-row: 1;
+    font-style: normal;
+    padding-right: 0;
+  }
+
+  .doc .grid dd {
+    margin: 0;
+  }
+}
+
+.doc .grid .ulist {
+  margin-top: 0;
+  line-height: 1.3;
+}
+
+.doc .grid ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+.doc .grid ul li {
+  margin-top: 0.15em;
+  margin-bottom: 0;
+  hyphens: none;
+}
+
+.doc .grid ul a {
+  font-weight: var(--body-font-weight-bold);
+}

src/partials/head-styles.hbs

@@ -1 +1,4 @@
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    {{#if (eq page.attributes.role 'home')}}
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/home.css">
+    {{/if}}

src/partials/toc.hbs

@@ -1,5 +1,7 @@
+{{#unless (eq page.attributes.role 'home')}}
 {{#if (matches page.contents ' class="sect[01]"')}}
 <aside class="toc sidebar" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
 </aside>
 {{/if}}
+{{/unless}}