update admonitions and homepage

README.md

@@ -1,5 +1,5 @@
-# README
+# Mkdocs Tech Docs Template
 
-A python-based alternative to the ruby-based [Tech Docs Template](https://github.com/alphagov/tech-docs-template).
+Build sophisticated technical documentation with a [GOV.UK style](https://design-system.service.gov.uk/).
 
 Visit the [documentation website](https://ministryofjustice.github.io/mkdocs-tech-docs-template/) for more details.

docs/README.md

@@ -4,19 +4,28 @@ hide:
   - toc
 ---
 
-# MkDocs Tech Docs Template
+<style>
+  .md-main__inner {
+    margin-top: 0px;
+  }
 
-!!! banner "Build technical documentation with a [GOV.UK style](https://design-system.service.gov.uk/)"
+  .md-content__button {
+    display: none;
+  }
+</style>
+
+!!! banner "Build sophisticated technical documentation with a [GOV.UK style](https://design-system.service.gov.uk/)"
 
     ![Services](homepage-illustration.svg){ align=right width=300px height=300px}
 
-    A python-based alternative to the ruby-based [Tech Docs Template](https://github.com/alphagov/tech-docs-template) with the following benefits:
+    **Mkdocs Tech Docs Template** is a python-based alternative to the ruby-based [Tech Docs Template](https://github.com/alphagov/tech-docs-template) with the following benefits:
 
     - simple to [setup](./setup/), [customise](./setup/customise.md) and [enhance](./setup/CONTRIBUTE.md)
     - exploits the [MkDocs Materials theme](https://squidfunk.github.io/mkdocs-material/) and all it's associated features
     - compatible with the vast ecosystem of MkDocs [plugins](plugins/)
     - unified tech stack for python-based teams and projects
 
+    [Get Started ＞](./setup/){ .md-button .md-button--primary}
 
 !!! warning inline end "Prototype"
 

docs/setup/customise.md

@@ -75,4 +75,10 @@ Please refer to [social links](https://squidfunk.github.io/mkdocs-material/setup
 
 ## Admonitions
 
-Admonitions, also known as call-outs, are an excellent choice for including side content without significantly interrupting the document flow. They can also be used to provide structure and coloured headings as in used on the [home](README.md) page. Please refer to [admonitions](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#admonition-icons) for more details.
+Admonitions, also known as call-outs, are an excellent choice for including side content without significantly interrupting the document flow. They can also be used to provide structure and coloured headings as in used on the [home](README.md) page. Please refer to [admonitions](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#admonition-icons) for more details.
+
+## Dark Mode
+
+Under construction!
+
+See [Changing the colors](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/) for more details.

mkdocs.yml

@@ -21,6 +21,17 @@ theme:
   icon:
     admonition:
       quote: octicons/quote-16
+  palette: 
+    # Palette toggle for light mode
+    - scheme: default
+      toggle:
+        icon: material/brightness-7 
+        name: Switch to dark mode
+    # Palette toggle for dark mode
+    - scheme: slate
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
 
 edit_uri: edit/main/docs/
 plugins:

tech_docs_template/__init__.py

@@ -1 +1 @@
-__version__ = "0.0.19"
+__version__ = "0.0.20"

tech_docs_template/assets/stylesheets/extra.css

@@ -10,6 +10,7 @@
   --md-footer-fg-color--lighter: #505a5f;
 }
 
+/* Configure the fonts */
 .md-typeset {
   font-size: 0.85rem;
 }
@@ -32,10 +33,21 @@
   text-underline-offset: 2px;
 }
 
+/* Configure the main panel */
+.md-main__inner {
+  margin-top:10px;
+}
+
+/* Configure the header */
 .md-header{
   box-shadow: none;
 }
 
+.md-header__inner {
+  border-bottom: 10px solid; 
+  border-bottom-color:  #1d70b8;
+}
+
 .md-header__title{
   font-size: 25px;
 }
@@ -44,13 +56,15 @@
   font-weight: 400;
 }
 
+/* Configure the footer */
 .md-footer{
   padding-top: 40px;
   padding-bottom: 25px;
   border-top: 1px solid;
   border-color: #b1b4b6;
 }
 
+/* Configure the copyright */
 .md-copyright{
   font-size: 15px;
   color:#000000;
@@ -96,8 +110,8 @@
 .md-tabs {
   color: #1d70b8;
   background-color: #f8f8f8;
-  border-top: 10px solid;
-  border-top-color:  #1d70b8;
+  /* border-top: 10px solid; */
+  /* border-top-color:  #1d70b8; */
   border-bottom: 1px solid;
   border-bottom-color:  #b1b4b6;
   line-height: 1;
@@ -125,16 +139,12 @@
 .md-typeset details {
   font-size: 0.85rem;
   border: 3px solid;
-  box-shadow: none; 
+  box-shadow: none;
+  border-radius: 0px;
   /* border-width: 0;  */
   /* border-left-width: 4px; */
 }
 
-/* Configure the main panel */
-.md-main__inner {
-  margin-top:10px;
-}
-
 /* Create a new banner admonition */
 .md-typeset .admonition.banner,
 .md-typeset details.banner {
@@ -146,8 +156,19 @@
   font-size: 30px;
   background-color: #1d70b8;
   color: white;
+  border-radius: 0px;
 }
 .md-typeset .banner > .admonition-title::before,
 .md-typeset .banner > summary::before {
   background-color: white;
 }
+
+/* Configure the primary button */
+.md-typeset .md-button--primary{
+  background-color:  var(--md-typeset-a-color);
+  border-color:  var(--md-typeset-a-color);
+  text-decoration: none;
+  font-size: 1rem;
+  border-radius: 0px;   
+  padding: 2px 10px;
+}