update logic and styling for index pages (#34)

* downgrade packages to align with server requirements

* update home page styling

* update terminal styling

* apply general styling improvements

* allow root-level pages to show up in the dropdown menus

* clean up header styling on smaller screens as home button shows in drawer

* clean up left nav

* add script to style navigation on root-level pages

* move some styling out of the index page css file

* run prettier on css files

* minor fix

* allow root subdirectory pages to show the entire navigation

* update initial index page css

* update logic and styling for index pages

* hide toc on index pages

material-overrides/assets/stylesheets/index-page.css

@@ -1,15 +1,31 @@
-.main-page .subsection-wrapper {
-  margin-top: -1em;
+.subsection-wrapper {
+  display: flex;
+  gap: 1em;
+  flex-wrap: wrap;
 }
 
-.subsection-wrapper a {
+.subsection-wrapper .card {
+  border: 1px solid var(--mystic);
+  border-radius: 16px;
   text-decoration: none;
+  align-content: start;
+  flex: 1 0 48%;
+  max-width: 48%;
+}
+
+.md-typeset .subsection-wrapper .card a {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.md-typeset .subsection-wrapper .card a:hover .title {
+  color: var(--pink);
 }
 
 .subsection-wrapper .title {
   margin: 0;
-  font-size: 1.2em;
-  padding: 1.5em 1.5em 0 1.2em;
+  font-size: 1.15em;
+  padding: 1.5em 1.5em 0.5em 1.2em;
 }
 
 .subsection-wrapper .description {
@@ -19,17 +35,14 @@
   padding: 0 1.5em 1.8em 1.5em;
 }
 
-.subsection-wrapper .card {
-  border: 1px solid var(--mystic);
-  border-radius: var(--md-border-radius);
-  margin: 1em 0;
-  text-decoration: none;
+@media screen and (max-width: 36em) {
+  .subsection-wrapper .card {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
 }
 
-.md-typeset .subsection-wrapper a:hover {
-  text-decoration: none;
-}
-
-.subsection-wrapper .card:last-child {
-  margin-bottom: 4em;
-}
+/* Hide TOC on index pages */
+.md-nav.md-nav--secondary {
+  display: none;
+}

material-overrides/subsection-index-page.html → material-overrides/index-page.html

@@ -16,7 +16,6 @@
       {% else %}
         <!-- render subsection content -->
         {% if nav_item.is_page %}
-          <h1 class="subsection-title">{{ nav_item.parent.title }}</h1>
           <div class="subsection-wrapper">
           {% set description = "" %}
           {% for nav_item in element[1:] %}
@@ -98,13 +97,25 @@ <h2 class="title">{{ nav_item.title }}</h2>
     {% endif %}
 {% endmacro %}
 
-<div class="subsection-page">
-  {% if nav|length>1 %}
-    {% for nav_item in nav %}
-      {% if nav_item.is_section and nav_item.active %}
-        {{ find_active_page(nav_item.children, nav_item) }}
+{% set insert_marker = ':::INSERT_IN_THIS_SECTION:::' %}
+{% if insert_marker in page.content %}
+  {% set parts = page.content.split(insert_marker) %}
+  {% set dynamic_html %}
+    <div class="subsection-page">
+      {% if nav|length > 1 %}
+        {% for nav_item in nav %}
+          {% if nav_item.is_section and nav_item.active %}
+            {{ find_active_page(nav_item.children, nav_item) }}
+          {% endif %}
+        {% endfor %}
       {% endif %}
-    {% endfor %}
-  {% endif %}
-</div>
-{% endblock %}
+    </div>
+  {% endset %}
+  {% set modified_content = parts[0] | safe + (dynamic_html | safe) + parts[1] | safe %}
+  {{ modified_content | safe }}
+{% else %}
+  {{ page.content | safe }}
+{% endif %}
+
+
+{% endblock %}