Merged table of contents and upgrade to 9.2 (#43)

Co-authored-by: SoumayaMauthoorMOJ <soumaya.mauthoor@digital.justice.gov.uk>

docs/ADRs/README.md

@@ -1,8 +1,3 @@
----
-hide:
-  - navigation
----
-
 # Architecture Decision Records
 
 This section demos how to record and summarise Architecture Decision Records [(ADRs)](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) using the MkDocs Material [tags](https://squidfunk.github.io/mkdocs-material/setup/setting-up-tags/?h=tags) in-built plugin.

mkdocs.yml

@@ -10,11 +10,11 @@ theme:
   features:
     - navigation.tabs
     - navigation.tabs.sticky
-    - navigation.indexes
+    # - navigation.indexes 
     - content.code.copy
     - content.action.edit
     - content.action.view
-    # - toc.integrate # uncomment to merge TOC with navigation bar
+    - toc.integrate # uncomment to merge TOC with navigation bar
   font:
     text: Roboto
     code: Roboto Mono
@@ -60,6 +60,8 @@ markdown_extensions:
   - pymdownx.superfences
   - tables
   - attr_list
+  - toc:
+      toc_depth: 2
 extra:
   social:
     - icon: fontawesome/brands/slack
@@ -82,7 +84,6 @@ nav:
       - setup/README.md
       - Customise: setup/customise.md
       - Contribute: setup/CONTRIBUTE.md
-  - Plugins:
-      - plugins/README.md
-  - ADRs:
-      - ADRs/README.md
+  - Enhancements:
+      - Plugins: plugins/README.md
+      - Architecture Decision Records: ADRs/README.md

requirements-doc.txt

@@ -1,4 +1,4 @@
-mkdocs-material==9.1.0
+mkdocs-material==9.2.0b1
 mkdocs-git-revision-date-localized-plugin==1.1.0
 mkdocs-table-reader-plugin==1.2
 mknotebooks==0.7.1

setup.cfg

@@ -19,7 +19,7 @@ packages = find:
 include_package_data = True
 zip_safe = False
 install_requires =
-	mkdocs-material >= 9
+	mkdocs-material >= 9.2
 
 [options.entry_points]
 mkdocs.themes =

tech_docs_template/assets/stylesheets/extra.css

@@ -3,8 +3,8 @@
   --md-default-fg-color--light: #000000;
   --md-typeset-a-color: #1d70b8;
   --md-accent-fg-color: 	#003078;
-  --md-footer-bg-color:    #f3f2f1;
-  --md-footer-bg-color--dark:    #f3f2f1;
+  --md-footer-bg-color:    #f8f8f8;
+  --md-footer-bg-color--dark:    #f8f8f8;
   --md-footer-fg-color: #505a5f;
   --md-footer-fg-color--light: #505a5f;
   --md-footer-fg-color--lighter: #505a5f;
@@ -33,11 +33,6 @@
   text-underline-offset: 2px;
 }
 
-/* Configure the main panel */
-.md-main__inner {
-  margin-top:10px;
-}
-
 /* Configure the header */
 .md-header{
   box-shadow: none;
@@ -88,21 +83,53 @@
   text-underline-offset: 2px;
 }
 
-.md-nav__item--active .md-nav__item--active {
-  font-weight: 700; 
-  margin-left: 10px; 
-  padding-left: 3px;
-  border-left: 3px solid;
-  border-left-color:   #1d70b8;
+.md-nav__link--active {
+  font-weight: 700;
+}
+
+.md-nav__link:focus-within {
+  background-color:	#ffdd00 !important;
+}
+
+.md-nav--primary > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list > .md-nav__item--active {
+  padding-left: 10px;
+  border-left: 4px solid;
+  border-left-color: #1d70b8;
+}
+
+.md-nav--secondary .md-nav__item::before {
+  content: '—';
+  font-size: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  color: #505a5f;
+}
+
+.md-nav--secondary .md-nav__link {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  line-height: 2;
+}
+
+.md-nav--secondary .md-nav__list {
+  margin-top: 5px;
+}
+
+.md-nav__item .md-nav__link--passed {
+  color: var(--md-typeset-a-color);
+}
+
+.md-nav__item .md-nav__link--active {
+  color: var(--md-typeset-a-color);
+}
+
+[dir=ltr] .md-nav--secondary .md-nav__item {
+  padding-left: 0;
 }
 
-.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item--active,
-.md-nav--secondary .md-nav__link--active {
-  /* font-weight: 700;  */
-  margin-left:  0;
-  padding-left: 3px;
-  border-left: 3px solid;
-  border-left-color:   #1d70b8;
+[dir=ltr] .md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary {
+  border-left: none;
 }
 
 /* Configures the tabs below the header */
@@ -127,13 +154,23 @@
   text-decoration: underline;
   text-decoration-thickness: 3px;
   text-underline-offset: 3px;
+  color: #003078;
+  text-decoration-color: #003078;
 }
 
 .md-tabs__item--active {
   border-bottom: 4px solid;
   border-bottom-color:   #1d70b8;
 }
 
+.md-tabs__item--active:hover {
+  border-color: #f8f8f8
+}
+
+.md-tabs__link:focus-within {
+  background-color:	#ffdd00 !important;
+}
+
 /* Configure the adminitions */
 .md-typeset .admonition,
 .md-typeset details {
@@ -182,4 +219,4 @@
 
 .md-typeset .md-tag-icon::before {
   background-color: white;
-}
+}