docs: updated doc-site to work a little better on pages with little c…

…ontent
vycke · Mar 12, 2024 · 62ef7e7 · 62ef7e7
1 parent d14e67f
commit 62ef7e7
Show file tree

Hide file tree

Showing 20 changed files with 28 additions and 51 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -35,7 +35,9 @@ function getNavigation(collection) {
 }
 
 function getSubitems(collection, key) {
-  return collection.filter((c) => c.data.key === key).sort(sort("title"));
+  return collection
+    .filter((c) => c.data.key === key && c.data.subkey)
+    .sort(sort("title"));
 }
 
 module.exports = (config) => {

diff --git a/public/demo.css b/public/demo.css
@@ -29,6 +29,9 @@ article {
   padding: var(--token-size-0);
   max-width: 68ch;
 }
+footer {
+  padding: var(--token-size-0);
+}
 
 /* Main navigation */
 nav {
@@ -52,24 +55,27 @@ nav a[data-selected="true"] {
   font-weight: bold;
   color: var(--token-neutral-5);
 }
+/* ensure text does not go on multiline in horizontal orientaiton */
+nav li {
+  white-space: nowrap;
+}
 
 /* small changes for responsiveness */
 @media (max-width: 785px) {
   nav {
     position: relative;
     height: fit-content;
   }
+  /* ensure main takes more space when there is very limited content */
+  main {
+    min-height: calc(100vh - 200px);
+  }
 
   nav ul ul {
     display: none;
   }
 }
 
-/* ensure text does not go on multiline in horizontal orientaiton */
-nav li {
-  white-space: nowrap;
-}
-
 /* Breadcrumbs */
 .breadcrumbs {
   color: var(--text-2);

diff --git a/public/feo.min.css b/public/feo.min.css
diff --git a/site/_includes/base.njk b/site/_includes/base.njk
@@ -30,9 +30,8 @@
     <link rel="icon" href="/favicon.ico" sizes="any" />
   </head>
 
-  <body>
-    <main class="sidebar --left --width-00 --gap-0 | flex-grow">
-      <!-- SIDEBAR -->
+  <body class="sidebar --left --width-00 --gap-0">
+    <!-- SIDEBAR -->
       <nav class="flex-col items-center --gap-1">
         <div class="flex-col --gap-none items-center">
           {% include "svg/logo.svg" %}
@@ -41,15 +40,14 @@
         </div>
         {% include "partials/navigation.njk" %}
       </nav>
-      <!-- This DIV is required to let layout patterns play nice with eachother -->
-      <div>
-        <article class="flex-col --gap-0 items-start">
-          {% include "partials/breadcrumb.njk" %}
-          <h1>{{title}}</h1>
-          {{ content | safe }}
-          {% include "partials/footer.njk" %}
-        </article> 
-      </div>
+    <!-- CONTENT -->
+    <main class="repel --column"> 
+      <article class="flex-col --gap-0 items-start">
+        {% include "partials/breadcrumb.njk" %}
+        <h1>{{title}}</h1>
+        {{ content | safe }}
+      </article> 
+      {% include "partials/footer.njk" %}
     </main>
   </body>
 </html>
diff --git a/site/_includes/partials/footer.njk b/site/_includes/partials/footer.njk
@@ -1,5 +1,5 @@
 <!-- FOOTER -->
-<footer class="cluster --gap-000 justify-start | size-00 italic | mt-1">
+<footer class="cluster --gap-000 justify-end | size-00 italic">
   <span>Powered by: <a href="https://11ty.dev" class="italic">11ty</a> & Feo.css</span>
   <span>|</span>
   <a href="https://github.com/vyckes/feo-css">Github</a>

diff --git a/site/blocks/accordion.md b/site/blocks/accordion.md
@@ -63,5 +63,3 @@ overwritten to control the looks of the table. You can change these properties o
     </tbody>
   </table>
 </div>
-
-[_Back to components overview_](/components)
diff --git a/site/blocks/forms.md b/site/blocks/forms.md
@@ -116,5 +116,3 @@ overwritten to control the looks of the table. You can change these properties o
     </tbody>
   </table>
 </div>
-
-[_Back to components overview_](/components)
diff --git a/site/blocks/table.md b/site/blocks/table.md
@@ -83,5 +83,3 @@ overwritten to control the looks of the table. You can change these properties o
     </tbody>
   </table>
 </div>
-
-[_Back to components overview_](/components)
diff --git a/site/blocks/toggle.md b/site/blocks/toggle.md
@@ -68,5 +68,3 @@ as you will put the label text after the toggle in most cases. You can change th
     </tbody>
   </table>
 </div>
-
-[_Back to components overview_](/components)
diff --git a/site/blocks/tooltip.md b/site/blocks/tooltip.md
@@ -57,5 +57,3 @@ There are several custom properties available that can be overwritten to control
     </tbody>
   </table>
 </div>
-
-[_Back to components overview_](/components)
diff --git a/site/layouts/center.md b/site/layouts/center.md
@@ -30,5 +30,3 @@ Places the targeted element in the horizontal center. It takes the entire availa
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/cluster.md b/site/layouts/cluster.md
@@ -30,5 +30,3 @@ determines how many items can be on a single row (e.g. tag cloud).
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/flexbox.md b/site/layouts/flexbox.md
@@ -65,5 +65,3 @@ Although not really a layout pattern, Feo.css adds a set of classes to control f
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/grid.md b/site/layouts/grid.md
@@ -28,5 +28,3 @@ A layout pattern to easily create a grid of equal columns.
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/pancake.md b/site/layouts/pancake.md
@@ -29,5 +29,3 @@ A common vertical pattern where the center content should stretch the available
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/repel.md b/site/layouts/repel.md
@@ -5,7 +5,7 @@ key: layouts
 subkey: repel
 ---
 
-A simple layout pattern that pushes elements away from eachother, given the available space. Effectively implementing the `.justify-between`, `.--gap-{z}` and `.flex-row` classes.
+A simple layout pattern that pushes elements away from eachother, given the available space. Effectively implementing the `.justify-between`, `.--gap-{z}` and `.flex-row` (as the default is horizontal orientation) classes.
 
 {% include "svg/repel.njk" %}
 
@@ -26,8 +26,7 @@ A simple layout pattern that pushes elements away from eachother, given the avai
     </thead>
     <tbody>
       <tr><td><code>--gap-{z}</code></td><td>Controls the gap between the child elements</td></tr>
+      <tr><td><code>--column</code></td><td>Sets the direction to vertical, default is horizontal</td></tr>
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/sidebar.md b/site/layouts/sidebar.md
@@ -37,5 +37,3 @@ A common responsive layout in which there is a "sidebar" of a _fixed_ width, and
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/stack.md b/site/layouts/stack.md
@@ -28,5 +28,3 @@ A simple layout pattern to place items on top eachother, in a depth sense. The l
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/switcher.md b/site/layouts/switcher.md
@@ -36,5 +36,3 @@ A _responsive_ layout pattern that helps switching the orientation from horizont
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)
diff --git a/site/layouts/tiles.md b/site/layouts/tiles.md
@@ -30,5 +30,3 @@ Also known as a RAM (repeat, auto, minmax) layout. It is a tile system in which
     </tbody>
   </table>
 </div>
-
-[_Back to layouts overview_](/layouts)