From ad48af9bcf3d56433ba83c00f7403a861391c2e8 Mon Sep 17 00:00:00 2001
From: Oliver Lipkau <oliver@lipkau.net>
Date: Sun, 31 May 2026 23:21:28 +0200
Subject: [PATCH 1/2] Redesign website experience

---
 404.html                                 |    2 +-
 _data/modules.yml                        |    1 +
 _data/navigation.yml                     |    3 +
 _includes/footer.html                    |   11 +-
 _includes/sections/posts.html            |    5 +-
 _includes/sidenav.html                   |  183 ++-
 _layouts/default.html                    |    3 -
 _layouts/documentation.html              |   54 +-
 _layouts/landingpage.html                |  110 +-
 _layouts/page.html                       |    4 +-
 _posts/2017-06-24-A-Community-is-Born.md |    8 +-
 _sass/_breadcrumb.scss                   |  148 +-
 _sass/_landingpage.scss                  |  462 +++++--
 _sass/_sidebar.scss                      |   28 +-
 _sass/_site.scss                         |  991 ++++++++++++++
 assets/css/animate.css                   | 1579 ----------------------
 assets/css/morphext.css                  |    3 -
 assets/css/style.scss                    |    1 +
 assets/javascript/github.js              |   36 -
 assets/javascript/morphext.min.js        |    1 -
 assets/javascript/theme.js               |   26 +-
 docs/Contributing/index.md               |   34 +-
 docs/index.md                            |   67 +-
 docs/quick-start.md                      |   72 +
 modules/AtlassianPS.Configuration        |    2 +-
 modules/ConfluencePS                     |    2 +-
 modules/JiraAgilePS                      |    2 +-
 modules/JiraPS                           |    2 +-
 pages/archive.html                       |    4 +-
 pages/module.md                          |   48 +-
 30 files changed, 1871 insertions(+), 2021 deletions(-)
 create mode 100644 _sass/_site.scss
 delete mode 100644 assets/css/animate.css
 delete mode 100644 assets/css/morphext.css
 delete mode 100644 assets/javascript/github.js
 delete mode 100644 assets/javascript/morphext.min.js
 create mode 100644 docs/quick-start.md
diff --git a/404.html b/404.html
index 70a6883..dbf7acc 100644
--- a/404.html
+++ b/404.html
@@ -11,7 +11,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Page Not Found</title>
-    <style> html, body { width: 100%; height: 100%; } body { background-image: url(/assets/img/404_backdrop.jpg); background-size: cover; background-repeat: no-repeat; min-height: 100vh; min-width: 100vw; font-family: "Roboto Mono", "Liberation Mono", Consolas, monospace; color: rgba(255, 255, 255, .87); } .mx-auto { margin-left: auto; margin-right: auto; } .container, .container>.row, .container>.row>div { height: 100%; } #countUp { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } #countUp>.number { font-size: 4rem; font-weight: 500; } #countUp>.text:first-of-type { margin: 0 0 1rem; } #countUp>.text { font-weight: 300; text-align: center; } </style>
+    <style> html, body { width: 100%; height: 100%; margin: 0; } body { background-image: url(/assets/img/404_backdrop.jpg); background-size: cover; background-repeat: no-repeat; min-height: 100vh; font-family: "Roboto Mono", "Liberation Mono", Consolas, monospace; color: rgba(255, 255, 255, .87); } .mx-auto { margin-left: auto; margin-right: auto; } .container { box-sizing: border-box; min-height: 100%; padding: 0 1rem; width: 100%; } .container, .container>.row, .container>.row>div { height: 100%; } #countUp { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } #countUp>.number { font-size: 4rem; font-weight: 500; } #countUp>.text:first-of-type { margin: 0 0 1rem; } #countUp>.text { font-weight: 300; text-align: center; } </style>
 </head>
 
 <body class="gray-bg">
diff --git a/_data/modules.yml b/_data/modules.yml
index 753ad0e..da574f0 100644
--- a/_data/modules.yml
+++ b/_data/modules.yml
@@ -26,6 +26,7 @@
   docs: /docs/AtlassianPS.Configuration
   gallery: https://www.powershellgallery.com/packages/AtlassianPS.Configuration
   status: active
+  dependency: true
 - name: AtlassianPS
   description: Repository for cross-cutting AtlassianPS issues and coordination.
   github: https://github.com/AtlassianPS/AtlassianPS
diff --git a/_data/navigation.yml b/_data/navigation.yml
index d61fcd3..95f0a2b 100644
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@@ -12,6 +12,8 @@
 - name: Documentation
   path: docs
   childs:
+    - name: Quick Start
+      path: docs/quick-start
     - name: Contributing
       path: docs/Contributing
       listChilds: true
@@ -28,6 +30,7 @@
     - name: ConfluencePS
       path: docs/ConfluencePS
       groups:
+        - About
         - Commands
         - Classes
     - name: JiraAgilePS
diff --git a/_includes/footer.html b/_includes/footer.html
index 8d962ad..d75c19d 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -2,7 +2,7 @@
     <div class="site-info">
         <div class="container">
             <div class="btt d-print-none">
-                <a class="inpage-navigation" href="#page-top" title="Back To Top"><i class="fa fas-angle-double-up" style="visibility: visible; animation-duration: 2s; animation-name: flash;"></i></a>
+                <a class="inpage-navigation" href="#page-top" title="Back To Top" aria-label="Back To Top"><i class="fas fa-angle-double-up" aria-hidden="true"></i></a>
             </div>
             <div class="row">
                 <div class="col-12">
@@ -10,13 +10,16 @@
                 </div>
             </div>
             <div class="row d-print-none">
-                <div class="col-6">
+                <div class="col-12 col-md-8">
                     <ul>
+                        <li><a href="/module/">Modules</a></li>
+                        <li><a href="/docs/">Documentation</a></li>
+                        <li><a href="/contact/">Community</a></li>
                         <li><a href="/data-protection-information">Data Protection Information</a></li>
                     </ul>
                 </div>
-                <div class="col-6">
-                    <a href="https://github.com/AtlassianPS/AtlassianPS.github.io"><i class="fas fa-code"></i><i class="fab fa-github"></i></a>
+                <div class="col-12 col-md-4">
+                    <a href="https://github.com/AtlassianPS/AtlassianPS.github.io"><i class="fas fa-code"></i><i class="fab fa-github"></i> Improve this site</a>
                 </div>
             </div>
         </div>
diff --git a/_includes/sections/posts.html b/_includes/sections/posts.html
index 72fb14c..3dc078c 100644
--- a/_includes/sections/posts.html
+++ b/_includes/sections/posts.html
@@ -10,9 +10,9 @@
     <article id="{{post.title}}" class="container post item col-10 ml-auto mr-auto">
         <div class="row">
             <div class="col-3 ml-auto article-thumb text-center">
-                <a href="#"> <!-- href="{{ categoryIcon.name | prepend: site.baseurl }}" -->
+                <span class="post-category-icon">
                     <i class="fa {{categoryIcon.icon}} fa-5x {{categoryIcon.class}}"></i>
-                </a>
+                </span>
             </div>
             <div class="col-7 mr-auto">
                 <div class="article-meta row">
@@ -37,4 +37,3 @@ <h3 class="item-title article-title">{{ post.title }}</h3>
         <a class="btn btn-square btn-outline" href="/archive/" role="button">All Articles</a>
     </div>
 </div>
-
diff --git a/_includes/sidenav.html b/_includes/sidenav.html
index dbdb7d7..81443e3 100644
--- a/_includes/sidenav.html
+++ b/_includes/sidenav.html
@@ -1,101 +1,190 @@
 {% assign documentation = site.data.navigation | where: "name", "Documentation" %}
-<nav class="bd-links d-none d-md-block d-overflow" id="bd-docs-search">
+{% assign current_doc_name = "All docs" %}
+{% for module in documentation[0].childs %}
+    {% capture moduleUrl %}/{{ module.path }}{% endcapture %}
+    {% capture moduleUrlSlash %}{{ moduleUrl }}/{% endcapture %}
+    {% assign moduleActive = false %}
+    {% if page.url == moduleUrl or page.url == moduleUrlSlash or page.url contains moduleUrlSlash %}
+        {% assign moduleActive = true %}
+    {% endif %}
+    {% if moduleActive %}
+        {% assign current_doc_name = module.name %}
+    {% endif %}
+{% endfor %}
+<nav class="bd-links docs-desktop-nav d-overflow" id="bd-docs-search">
     <ul class="nav bd-sidenav bd-search">
         <li class="menu-item search">
             <input type="search" class="form-control searchbox" id="search-input" placeholder="Search..." aria-label="Search documentation" autocomplete="off">
         </li>
     </ul>
 </nav>
-<nav class="bd-links d-none d-md-block" id="bd-docs-nav">
+<nav class="bd-links docs-desktop-nav" id="bd-docs-nav">
+    <div class="docs-sidebar-section">
+        <span>Documentation</span>
 {% for module in documentation[0].childs %}
-    <a class="bd-toc-link" href="/{{ module.path }}"><h4 class="bd-toc-item">{{ module.name }}</h4></a>
+        {% capture moduleUrl %}/{{ module.path }}{% endcapture %}
+        {% capture moduleUrlSlash %}{{ moduleUrl }}/{% endcapture %}
+        {% assign moduleActive = false %}
+        {% if page.url == moduleUrl or page.url == moduleUrlSlash or page.url contains moduleUrlSlash %}
+            {% assign moduleActive = true %}
+        {% endif %}
+        <a class="bd-toc-link{% if moduleActive %} active{% endif %}" href="/{{ module.path }}">{{ module.name }}</a>
+{% endfor %}
+    </div>
 
-    {% if page.url contains module.path %}
+{% for module in documentation[0].childs %}
+    {% capture moduleUrl %}/{{ module.path }}{% endcapture %}
+    {% capture moduleUrlSlash %}{{ moduleUrl }}/{% endcapture %}
+    {% assign moduleActive = false %}
+    {% if page.url == moduleUrl or page.url == moduleUrlSlash or page.url contains moduleUrlSlash %}
+        {% assign moduleActive = true %}
+    {% endif %}
+    {% if moduleActive %}
+    <div class="docs-sidebar-section docs-sidebar-current">
+        <span>{{ module.name }}</span>
         {% if module.groups %}
             {% for group in module.groups %}
                 {% capture groupPath %}/{{ module.path }}/{{ group | downcase }}{% endcapture%}
                 {% if group == "About" %}
                     {% capture groupLink %}/{{ module.path }}{% endcapture %}
+                    {% capture aboutPath %}/{{ module.path }}/about{% endcapture %}
+                    {% capture groupLinkSlash %}{{ groupLink }}/{% endcapture %}
+                    {% assign groupActive = false %}
+                    {% capture aboutPathSlash %}{{ aboutPath }}/{% endcapture %}
+                    {% if page.url == groupLink or page.url == groupLinkSlash or page.url == aboutPath or page.url contains aboutPathSlash %}
+                        {% assign groupActive = true %}
+                    {% endif %}
                 {% else %}
                     {% capture groupLink %}{{ groupPath }}{% endcapture %}
+                    {% assign groupActive = false %}
+                    {% capture groupPathSlash %}{{ groupPath }}/{% endcapture %}
+                    {% if page.url == groupPath or page.url contains groupPathSlash %}
+                        {% assign groupActive = true %}
+                    {% endif %}
                 {% endif %}
-    <div class="bd-toc-item{% if page.url contains groupName %} active{% endif %}">
-        <a class="bd-toc-link" href="{{ groupLink }}">{{group}}</a>
-
+        <a class="bd-toc-link{% if groupActive %} active{% endif %}" href="{{ groupLink }}">{{ group }}</a>
+                {% if group == "About" %}
         <ul class="nav bd-sidenav">
-
-                {% for p in site.html_pages %}
-                    {% if p.url contains groupPath %}
-                        {% if p.hide != true %}
-            <li class="{% if page.url contains p.url %}active{% endif %}">
+                    {% for p in site.html_pages %}
+                        {% capture pUrlSlash %}{{ p.url | remove: '.html' }}/{% endcapture %}
+                        {% if p.url == aboutPath or p.url contains aboutPathSlash %}
+                            {% if p.hide != true %}
+            <li class="{% if page.url == p.url or page.url == pUrlSlash %}active{% endif %}">
                 <a href="{{ p.url }}">{{ p.title }}</a>
             </li>
+                            {% endif %}
                         {% endif %}
-                    {% endif %}
-                {% endfor %}
+                    {% endfor %}
         </ul>
-    </div>
+                {% endif %}
             {% endfor %}
         {% elsif module.listChilds %}
-    <ul class="nav bd-sidenav">
             {% for p in site.html_pages %}
-                {% if p.url contains module.path %}
+                {% if p.url == moduleUrl or p.url contains moduleUrlSlash %}
                     {% if p.hide != true %}
-    <li class="{% if page.url contains p.url %}active{% endif %}">
-        <a class="bd-toc-link" href="{{ p.url }}">{{ p.title }}</a>
-    </li>
+                        {% capture pUrlSlash %}{{ p.url | remove: '.html' }}/{% endcapture %}
+        <a class="bd-toc-link{% if page.url == p.url or page.url == pUrlSlash %} active{% endif %}" href="{{ p.url }}">{{ p.title }}</a>
                     {% endif %}
                 {% endif %}
             {% endfor %}
-    </ul>
         {% endif %}
+    </div>
     {% endif %}
 {% endfor %}
 </nav>
-<nav class="bd-links d-block d-md-none text-center" id="small-nav">
-    <ul class="nav bd-sidenav bd-search">
-        <li class="menu-item search">
-            <input type="search" class="form-control searchbox" id="search-input-small" placeholder="Search..." aria-label="Search documentation" autocomplete="off">
-        </li>
-    </ul>
+<nav class="docs-mobile-nav" id="small-nav" aria-label="Documentation navigation">
+    <div class="docs-mobile-search">
+        <input type="search" class="form-control searchbox" id="search-input-small" placeholder="Search documentation" aria-label="Search documentation" autocomplete="off">
+    </div>
+
+    <details class="docs-mobile-menu">
+        <summary>
+            <span>Browse documentation</span>
+            <strong>{{ current_doc_name }}</strong>
+        </summary>
+        <div class="docs-mobile-menu-body">
+            <div class="docs-mobile-menu-section">
+                <span>Sections</span>
+{% for module in documentation[0].childs %}
+                {% capture moduleUrl %}/{{ module.path }}{% endcapture %}
+                {% capture moduleUrlSlash %}{{ moduleUrl }}/{% endcapture %}
+                {% assign moduleActive = false %}
+                {% if page.url == moduleUrl or page.url == moduleUrlSlash or page.url contains moduleUrlSlash %}
+                    {% assign moduleActive = true %}
+                {% endif %}
+                <a href="/{{ module.path }}" class="{% if moduleActive %}active{% endif %}">{{ module.name }}</a>
+{% endfor %}
+            </div>
 
-    <h4 class="d-inline">Topics</h4>
-    <select id="small-nav-dropdown">
 {% for module in documentation[0].childs %}
-    {% if page.url contains module.path %}
-        <option class="font-weight-bold" value="/{{ module.path }}">{{ module.name }}</option>
+    {% capture moduleUrl %}/{{ module.path }}{% endcapture %}
+    {% capture moduleUrlSlash %}{{ moduleUrl }}/{% endcapture %}
+    {% assign moduleActive = false %}
+    {% if page.url == moduleUrl or page.url == moduleUrlSlash or page.url contains moduleUrlSlash %}
+        {% assign moduleActive = true %}
+    {% endif %}
+    {% if moduleActive %}
+            <div class="docs-mobile-menu-section">
+                <span>{{ module.name }}</span>
         {% if module.groups %}
             {% for group in module.groups %}
                 {% capture groupPath %}/{{ module.path }}/{{ group | downcase }}{% endcapture%}
-        <optgroup label="{{ group }}">
-                {% for p in site.html_pages %}
-                    {% if p.url contains groupPath %}
-                        {% if p.hide != true %}
-            <option value="{{ p.url }}"{% if page.url contains p.url %}selected{% endif %}>{{ p.title }}</option>
-                        {% endif %}
+                {% if group == "About" %}
+                    {% capture groupLink %}/{{ module.path }}{% endcapture %}
+                    {% capture aboutPath %}/{{ module.path }}/about{% endcapture %}
+                    {% capture groupLinkSlash %}{{ groupLink }}/{% endcapture %}
+                    {% assign groupActive = false %}
+                    {% capture aboutPathSlash %}{{ aboutPath }}/{% endcapture %}
+                    {% if page.url == groupLink or page.url == groupLinkSlash or page.url == aboutPath or page.url contains aboutPathSlash %}
+                        {% assign groupActive = true %}
+                    {% endif %}
+                {% else %}
+                    {% capture groupLink %}{{ groupPath }}{% endcapture %}
+                    {% assign groupActive = false %}
+                    {% capture groupPathSlash %}{{ groupPath }}/{% endcapture %}
+                    {% if page.url == groupPath or page.url contains groupPathSlash %}
+                        {% assign groupActive = true %}
                     {% endif %}
-                {% endfor %}
-            </optgroup>
+                {% endif %}
+                <a href="{{ groupLink }}" class="{% if groupActive %}active{% endif %}">{{ group }}</a>
+                {% if group == "About" %}
+                    {% for p in site.html_pages %}
+                        {% capture pUrlSlash %}{{ p.url | remove: '.html' }}/{% endcapture %}
+                        {% if p.url == aboutPath or p.url contains aboutPathSlash %}
+                            {% if p.hide != true %}
+                <a href="{{ p.url }}" class="docs-mobile-subitem{% if page.url == p.url or page.url == pUrlSlash %} active{% endif %}">{{ p.title }}</a>
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+                {% endif %}
             {% endfor %}
         {% elsif module.listChilds %}
             {% for p in site.html_pages %}
-                {% if p.url contains module.path %}
+                {% if p.url == moduleUrl or p.url contains moduleUrlSlash %}
                     {% if p.hide != true %}
-        <option value="{{ p.url }}" {% if page.url contains p.url %}selected{% endif %}>{{ p.title }}</option>
+                        {% capture pUrlSlash %}{{ p.url | remove: '.html' }}/{% endcapture %}
+                <a href="{{ p.url }}" class="{% if page.url == p.url or page.url == pUrlSlash %}active{% endif %}">{{ p.title }}</a>
                     {% endif %}
                 {% endif %}
             {% endfor %}
         {% endif %}
+            </div>
     {% endif %}
 {% endfor %}
-    </select>
+        </div>
+    </details>
 </nav>
 
 <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-<script type="text/javascript"> docsearch({
-    apiKey: '50f1199d6c47bdb6fe668f3b569453f0',
-    indexName: 'atlassianps',
-    inputSelector: '.searchbox',
-    debug: false
+<script type="text/javascript">
+['#search-input', '#search-input-small'].forEach(function (selector) {
+    if (document.querySelector(selector)) {
+        docsearch({
+            apiKey: '50f1199d6c47bdb6fe668f3b569453f0',
+            indexName: 'atlassianps',
+            inputSelector: selector,
+            debug: false
+        });
+    }
 });
 </script>
diff --git a/_layouts/default.html b/_layouts/default.html
index 459d7b2..c2d119e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -22,8 +22,6 @@
 
     <!-- CSS -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
-    <link rel="stylesheet" href="/assets/css/morphext.css">
-    <link rel="stylesheet" href="/assets/css/animate.css">
     <link rel="stylesheet" href="/assets/css/style.css">
 
     <!-- Scripts -->
@@ -32,7 +30,6 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
     <script src="/assets/javascript/jquery.toc.min.js"></script>
-    <script src="/assets/javascript/morphext.min.js"></script>
     <script src="/assets/javascript/theme.js"></script>
 </head>
 
diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index 980c1b6..c14f3b8 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -1,11 +1,14 @@
 {% for module in site.data.navigation %}
     {% if module.name == "Documentation" %}
         {% for child in module.childs %}
-            {% if page.url contains child.path %}
+            {% capture childUrl %}/{{ child.path }}{% endcapture %}
+            {% capture childUrlSlash %}{{ childUrl }}/{% endcapture %}
+            {% if page.url == childUrl or page.url == childUrlSlash or page.url contains childUrlSlash %}
                 {% capture bc_moduleName %}{{ child.name }}{% endcapture %}
                 {% for group in child.groups %}
-                    {% capture tempGroupName %}{{ child.path }}/{{ group | downcase }}{% endcapture %}
-                    {% if page.url contains tempGroupName %}
+                    {% capture tempGroupName %}/{{ child.path }}/{{ group | downcase }}{% endcapture %}
+                    {% capture tempGroupNameSlash %}{{ tempGroupName }}/{% endcapture %}
+                    {% if page.url == tempGroupName or page.url contains tempGroupNameSlash %}
                         {% capture cl_groupName %}{{ group | downcase }}{% endcapture %}
                         {% capture bc_groupName %}{{ group }}{% endcapture %}
                     {% endif %}
@@ -14,6 +17,10 @@
         {% endfor %}
     {% endif %}
 {% endfor %}
+{% assign doc_title = page.title %}
+{% if doc_title == nil or doc_title == empty %}
+    {% assign doc_title = page.name | remove: '.html' | remove: '.md' | replace: '_', ' ' | replace: '-', ' ' %}
+{% endif %}
 
 <!DOCTYPE html>
 <html {{ site.lang | default: "en-US" }}>
@@ -26,7 +33,7 @@
     <meta content="{{ site.description }}" name="description">
     <meta name="keywords" content="{{ site.keywords }}">
     <meta name="author" content="{{ site.author.name }}">
-    <title>{{ page.title }} - Docs | {{ site.title }}</title>
+    <title>{{ doc_title }} - Docs | {{ site.title }}</title>
 
     <!-- favicon -->
     <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon.png">
@@ -59,7 +66,7 @@
 
     <div class="documentation container-fluid page">
 
-        <div class="row flex-xl-nowrap">
+        <div class="row flex-docs-nowrap">
 
             <nav class="col-12 col-md-10 col-lg-8 ml-auto mr-auto breadcrumb">
                 <div class="btn-group btn-breadcrumb">
@@ -67,8 +74,6 @@
                     <a href="/docs" class="btn btn-default">Documentation</a>
                 {% if bc_moduleName %}
                     <a href="/docs/{{ bc_moduleName }}" class="btn btn-default" data-algolia="lvl0">{{ bc_moduleName }}</a>
-                {% else %}
-                    <a href="#" class="btn btn-default hide" data-algolia="lvl0">All Modules</a>
                 {% endif %}
                 {% if bc_groupName %}
                     {% if bc_groupName == "About" %}
@@ -76,36 +81,47 @@
                     {% else %}
                         <a href="/docs/{{ bc_moduleName }}/{{ cl_groupName }}" class="btn btn-default" data-algolia="lvl1">{{ bc_groupName }}</a>
                     {% endif %}
-                {% else %}
-                    <a href="#" class="btn btn-default hide" data-algolia="lvl1">Common</a>
                 {% endif %}
-                {% if bc_groupName != page.title and bc_moduleName != page.title and "Documentation" != page.title %}
-                    <span class="btn btn-default d-none d-lg-block">{{ page.title }}</span>
+                {% capture pageTitleDowncase %}{{ doc_title | slugify }}{% endcapture %}
+                {% assign pageTitleInUrl = false %}
+                {% capture pageTitleDowncaseSlash %}{{ pageTitleDowncase }}/{% endcapture %}
+                {% if page.url contains pageTitleDowncaseSlash or page.url contains pageTitleDowncase %}
+                    {% assign pageTitleInUrl = true %}
+                {% endif %}
+                {% assign pageIsGroupIndex = false %}
+                {% if bc_moduleName and cl_groupName %}
+                    {% capture groupIndexUrl %}/docs/{{ bc_moduleName }}/{{ cl_groupName }}/{% endcapture %}
+                    {% if page.url == groupIndexUrl %}
+                        {% assign pageIsGroupIndex = true %}
+                    {% endif %}
+                {% endif %}
+                {% if bc_groupName != doc_title and bc_moduleName != doc_title and "Documentation" != doc_title and pageTitleInUrl != true and pageIsGroupIndex != true %}
+                    <span class="btn btn-default d-none d-lg-block">{{ doc_title }}</span>
                 {% endif %}
                 </div>
             </nav>
 
         </div>
 
-        <div class="row flex-xl-nowrap">
+        <div class="row flex-docs-nowrap">
 
-            <div class="col-12 col-md-3 col-xl-2 ml-auto d-print-none bd-sidebar">
+            <div class="col-12 docs-sidebar-col d-print-none bd-sidebar">
 
                 {% include sidenav.html %}
 
             </div>
 
-            <div class="col-12 col-md-3 col-xl-2 mr-auto d-none d-lg-block d-print-none bd-toc">
+            <section class="col-12 docs-content-col content">
 
-                {% include toc.html %}
+                {{ content }}
 
-            </div>
+            </section>
 
-            <section class="col-12 col-md-9 col-lg-6 content">
+            <div class="col-12 docs-toc-col d-print-none bd-toc">
 
-                {{ content }}
+                {% include toc.html %}
 
-            </section>
+            </div>
 
         </div>
 
diff --git a/_layouts/landingpage.html b/_layouts/landingpage.html
index 1655eb8..6445aaa 100644
--- a/_layouts/landingpage.html
+++ b/_layouts/landingpage.html
@@ -2,27 +2,103 @@
 layout: default
 ---
 
-<script src="{{ '/assets/javascript/github.js' | relative_url }}" async defer></script>
-<div class="landing-page">
+{% assign activeModules = site.data.modules | where: "status", "active" %}
 
-    {% include carousel.html %}
+<main class="landing-page site-home">
+    <section class="hero-section">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-12 col-lg-6 hero-copy">
+                    <p class="eyebrow">AtlassianPS</p>
+                    <h1>PowerShell modules for Atlassian automation</h1>
+                    <p class="lead">Automate Jira, Confluence, and Atlassian workflows with practical PowerShell commands maintained by the community.</p>
+                    <div class="hero-actions">
+                        <a href="/docs" class="btn primary-action" role="button">Get Started</a>
+                        <a href="/module" class="btn secondary-action" role="button">Browse Modules</a>
+                    </div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="terminal-card" aria-label="PowerShell quick start example">
+                        <div class="terminal-bar">
+                            <span></span><span></span><span></span>
+                            <strong>PowerShell</strong>
+                        </div>
+                        <pre><code>Install-Module JiraPS
+Import-Module JiraPS
+Set-JiraConfigServer -Server 'https://jira.example.com'
+Get-JiraIssue -Query 'project = OPS'</code></pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="modules-section" id="modules">
+        <div class="container">
+            <div class="section-heading">
+                <p class="eyebrow">Modules</p>
+                <h2>Pick the module for the job</h2>
+                <p>Each module keeps a focused surface area while sharing the same PowerShell-first conventions.</p>
+            </div>
+            <div class="row">
+                {% for module in activeModules %}
+                <div class="col-12 col-md-6 col-xl-3">
+                    <article class="module-card">
+                        <div class="module-card-header">
+                            <img src="/assets/img/{{ module.name }}.png" alt="{{ module.name }}" />
+                            <h3>{{ module.name }}</h3>
+                        </div>
+                        <p>{{ module.description }}</p>
+                        <div class="module-stats" aria-label="{{ module.name }} project statistics">
+                            <img src="https://img.shields.io/github/stars/AtlassianPS/{{ module.name }}?style=flat-square&label=Stars" alt="{{ module.name }} GitHub stars" />
+                            <img src="https://img.shields.io/powershellgallery/dt/{{ module.name }}?style=flat-square&label=Downloads" alt="{{ module.name }} PowerShell Gallery downloads" />
+                        </div>
+                        {% if module.dependency %}
+                        <code>Installed as a dependency</code>
+                        {% else %}
+                        <code>Install-Module {{ module.name }}</code>
+                        {% endif %}
+                        <div class="module-links">
+                            {% if module.docs %}<a href="{{ module.docs }}">Docs</a>{% endif %}
+                            <a href="{{ module.github }}">Source</a>
+                            {% if module.gallery %}<a href="{{ module.gallery }}">Gallery</a>{% endif %}
+                        </div>
+                    </article>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
+    <section class="quickstart-section">
+        <div class="container">
+            <div class="quickstart-panel">
+                <div>
+                    <p class="eyebrow">Quick start</p>
+                    <h2>From install to first command in minutes</h2>
+                </div>
+                <ol>
+                    <li><strong>Install</strong><span>Install the module from the PowerShell Gallery.</span></li>
+                    <li><strong>Configure</strong><span>Set your Atlassian server URL and credentials.</span></li>
+                    <li><strong>Automate</strong><span>Run commands locally, in scripts, or in CI.</span></li>
+                </ol>
+            </div>
+        </div>
+    </section>
 
-    {% for section in site.data.landing %}
-        {% assign loopindex = forloop.index | modulo: 2 %}
-    <section id="{{ section.id }}" class="features {% if loopindex != 1 %} gray-section {% endif %} {{ section.classes }}">
+    <section class="community-section">
         <div class="container">
-            <div class="row section-header">
-                <div class="col-xs-12 mx-auto text-center">
-                    <div class="navy-line"></div>
-                    <h2 class="section-title" id="{{ section.title }}">
-                        {% if section.preTitle %}<small>{{ section.preTitle }}<br/></small>{% endif %}
-                        <span class="text-uppercase">{{ section.title }}</span>
-                        {% if section.postTitle %}<small><br/>{{ section.postTitle }}</small>{% endif %}
-                    </h2>
+            <div class="row align-items-center">
+                <div class="col-12 col-lg-7">
+                    <p class="eyebrow">Community</p>
+                    <h2>Built by Atlassian and PowerShell users</h2>
+                    <p>AtlassianPS is maintained by volunteers. Join the community, report issues, improve docs, or contribute fixes.</p>
+                </div>
+                <div class="col-12 col-lg-5 community-actions">
+                    <a href="/contact" class="btn primary-action" role="button">Join the community</a>
+                    <a href="https://github.com/AtlassianPS" class="btn secondary-action" role="button">View GitHub org</a>
                 </div>
             </div>
-            {% include sections/{{section.tpl}} %}
         </div>
     </section>
-    {% endfor %}
-</div>
+</main>
diff --git a/_layouts/page.html b/_layouts/page.html
index 61ea71c..a766857 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -2,8 +2,8 @@
 layout: default
 ---
 
-<div class="container page">
-    <section class="col-10 ml-auto mr-auto content">
+<div class="container page {{ page.page_class }}">
+    <section class="content">
 
         {{ content }}
         
diff --git a/_posts/2017-06-24-A-Community-is-Born.md b/_posts/2017-06-24-A-Community-is-Born.md
index 90c1394..47d214f 100644
--- a/_posts/2017-06-24-A-Community-is-Born.md
+++ b/_posts/2017-06-24-A-Community-is-Born.md
@@ -38,10 +38,10 @@ Providing them with shared resources, such as:
 
 # Scope
 The modules we have in our portfolio are:
-* [BitbucketPS](/BitbucketPS)
-* [ConfluencePS](/ConfluencePS)
-* [HipChatPS](/HipChatPS)
-* [JiraPS](/JiraPS)
+* [BitbucketPS](https://github.com/AtlassianPS/BitbucketPS)
+* [ConfluencePS](/module/ConfluencePS)
+* [HipChatPS](https://github.com/AtlassianPS/HipChatPS)
+* [JiraPS](/module/JiraPS)
 
 # Changes
 Some changes to the existing modules had to be made:
diff --git a/_sass/_breadcrumb.scss b/_sass/_breadcrumb.scss
index 27c0e05..cce3ddc 100644
--- a/_sass/_breadcrumb.scss
+++ b/_sass/_breadcrumb.scss
@@ -1,90 +1,58 @@
-.breadcrumb {
-    background: transparent;
-    .btn {
-        padding: 6px 12px 6px 24px;
-        :first-child {
-            padding: 6px 6px 6px 10px;
-        }
-        :last-child {
-            padding: 6px 18px 6px 24px;
-        }
-        &:not(:last-child) {
-            &:before {
-                content: " ";
-                display: block;
-                width: 0;
-                height: 0;
-                border-top: 17px solid transparent;
-                border-bottom: 17px solid transparent;
-                border-left: 10px solid rgb(173, 173, 173);
-                position: absolute;
-                top: 50%;
-                margin-top: -17px;
-                margin-left: 1px;
-                left: 100%;
-                z-index: 3;
-            }
-            &:after {
-                content: " ";
-                display: block;
-                width: 0;
-                height: 0;
-                border-top: 17px solid transparent;
-                border-bottom: 17px solid transparent;
-                border-left: 10px solid white;
-                position: absolute;
-                top: 50%;
-                margin-top: -17px;
-                left: 100%;
-                z-index: 3;
-            }
-        }
-    }
-}
-
-@mixin colorize($colorBefore, $colorAfter, $colorHoverBefore, $colorHoverAfter) {
-    &:not(:last-child) {
-        &:before {
-            @include border($colorBefore);
-        }
-        &:after {
-            @include border($colorAfter);
-        }
-    }
-    &:hover {
-        &:not(:last-child) {
-            &:before {
-                @include border($colorHoverBefore);
-            }
-            &:after {
-                @include border($colorHoverAfter);
-            }
-        }
-    }
-}
-@mixin border($color) {
-    border-left: 10px solid $color;
-}
-
-.btn-breadcrumb {
-    .btn {
-        & &-default {
-            @include colorize(#fff,#ccc,#ebebeb,#adadad);
-        }
-        & &-primary {
-            @include colorize(#428bca,#357ebd,#3276b1,#285e8e);
-        }
-        & &-success {
-            @include colorize(#4cae4c,#5cb85c,#398439,#47a447);
-        }
-        & &-danger {
-            @include colorize(#d9534f,#d43f3a,#d2322d,#ac2925);
-        }
-        & &-warning {
-            @include colorize(#f0ad4e,#eea236,#ed9c28,#d58512);
-        }
-        & &-info {
-            @include colorize(#5bc0de,#5bc0de,#5bc0de,#5bc0de);
-        }
-    }
-}
+.breadcrumb {
+    background: transparent;
+    border: 0;
+    margin-bottom: 1.5rem;
+    padding: 0;
+}
+
+.btn-breadcrumb {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+
+    .btn {
+        align-items: center;
+        background: transparent;
+        border: 0;
+        border-radius: 999px;
+        box-shadow: none;
+        color: #64748b;
+        display: inline-flex;
+        font-size: 0.86rem;
+        font-weight: 700;
+        line-height: 1;
+        margin: 0;
+        padding: 0.45rem 0.65rem;
+        position: relative;
+        text-transform: none;
+
+        &:not(:first-child) {
+            &:before {
+                color: #cbd5e1;
+                content: '/';
+                font-weight: 700;
+                margin-right: 0.4rem;
+            }
+        }
+
+        &:hover,
+        &:focus {
+            background: #eff6ff;
+            color: #1d4ed8;
+            text-decoration: none;
+        }
+    }
+
+    span.btn {
+        background: #eef2f7;
+        color: #0f172a;
+        cursor: default;
+
+        &:hover,
+        &:focus {
+            background: #eef2f7;
+            color: #0f172a;
+        }
+    }
+}
diff --git a/_sass/_landingpage.scss b/_sass/_landingpage.scss
index 68bb637..ed50f51 100644
--- a/_sass/_landingpage.scss
+++ b/_sass/_landingpage.scss
@@ -1,164 +1,350 @@
-.landing-page {
-    .slideshow-wrapper {
-        background-color: $powershell-blue;
-        .container {
-            padding: 7% 0px;
-            position: relative;
-            z-index: 80;
-            .slideshow-content {
-                text-align: center;
-                color: #FFF;
-                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-                font-size: 18px;
-                font-size: 1.125rem;
-                font-weight: 300;
-                h2 {
-                    visibility: visible;
-                    opacity: 1;
-                    -webkit-transform: translateY(0);
-                    transform: translateY(0);
-                    -webkit-transition-delay: 0.7s;
-                    transition-delay: 0.7s;
-                    -webkit-transition: all .5s linear;
-                    transition: all .5s linear;
-                    color: #FFFFFF;
-                    font-size: 35px;
-                    letter-spacing: 2px;
-                    line-height: 1.3;
-                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-                    font-weight: 600;
-                    word-break: break-word;
-                    word-wrap: break-word;
-                }
-                p {
-                    visibility: visible;
-                    opacity: 1;
-                    -webkit-transform: translateY(0);
-                    transform: translateY(0);
-                    -webkit-transition-delay: 0.8s;
-                    transition-delay: 0;
-                    -webkit-transition: all .5s linear;
-                    transition: all .5s linear;
-                    font-size: 14px;
-                    font-style: italic;
-                    letter-spacing: 0.4px;
-                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-                    color: #FFFFFF;
-                    text-align: center;
-                    font-weight: 100;
-                    margin-bottom: 30px;
-                    margin-bottom: 1.875rem;
-                    word-break: break-word;
-                    word-wrap: break-word;
-                }
-                .btn {
-                    margin: 0.625rem 0.625rem 1.25rem 0px;
-                    color: #fff;
-                    text-transform: uppercase;
-                    text-shadow: none;
-                    border: 1px solid transparent;
-                    &:focus,
-                    &:active {
-                        box-shadow: none;
-                        border: 1px solid transparent;
-                    }
-                }
-                .btn-lg {
-                    padding: .75rem 1.5
-                }
-                .btn-outline {
-                    border: 1px solid #fff;
-                    color: #fff;
-                    &:hover,
-                    &:focus,
-                    &:active {
-                        color: $powershell-blue;
-                        background: #fff;
-                    }
-                }
-            }
+.site-home {
+    background: #f6f8fb;
+    color: #172033;
+
+    .eyebrow {
+        color: #2563eb;
+        font-size: 0.78rem;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        margin-bottom: 0.75rem;
+        text-transform: uppercase;
+    }
+
+    h1,
+    h2,
+    h3,
+    p {
+        word-break: normal;
+    }
+
+    h1 {
+        color: #0f172a;
+        font-size: clamp(2.45rem, 5vw, 4.75rem);
+        font-weight: 750;
+        letter-spacing: -0.055em;
+        line-height: 0.98;
+        margin-bottom: 1.5rem;
+    }
+
+    h2 {
+        color: #0f172a;
+        font-size: clamp(2rem, 3vw, 3rem);
+        font-weight: 720;
+        letter-spacing: -0.035em;
+        line-height: 1.05;
+    }
+
+    h3 {
+        color: #0f172a;
+        font-size: 1.2rem;
+        font-weight: 700;
+        letter-spacing: -0.015em;
+    }
+
+    p {
+        color: #526174;
+        font-size: 1rem;
+        line-height: 1.7;
+    }
+
+    .btn {
+        border-radius: 999px;
+        font-weight: 700;
+        letter-spacing: 0;
+        padding: 0.9rem 1.25rem;
+        text-transform: none;
+    }
+
+    .primary-action {
+        background: #0f172a;
+        color: #ffffff;
+
+        &:hover,
+        &:focus {
+            background: #1d4ed8;
+            color: #ffffff;
+            text-decoration: none;
         }
     }
-    section {
-        &.gray-section {
-            background-color: #f8f9f9;
+
+    .secondary-action {
+        background: #ffffff;
+        border: 1px solid #d8e1ee;
+        color: #0f172a;
+
+        &:hover,
+        &:focus {
+            border-color: #2563eb;
+            color: #1d4ed8;
+            text-decoration: none;
         }
     }
-    h2.section-title {
-        font-weight: 800;
+
+    .hero-section {
+        background:
+            radial-gradient(circle at 12% 16%, rgba(37, 99, 235, 0.16), transparent 28rem),
+            linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
+        padding: 6rem 0 5rem;
+    }
+
+    .hero-copy .lead {
+        color: #475569;
+        font-size: 1.22rem;
+        line-height: 1.65;
+        margin-bottom: 2rem;
+        max-width: 42rem;
     }
-    h2.section-title small {
-        font-weight: 200;
+
+    .hero-actions,
+    .community-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.85rem;
     }
-    /* Modules */
-    .item {
-        // height: 250px;
-        margin-bottom: 30px;
+
+    .terminal-card {
+        background: #0b1220;
+        border: 1px solid rgba(148, 163, 184, 0.24);
+        border-radius: 24px;
+        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
+        margin-top: 3rem;
+        overflow: hidden;
+
+        pre {
+            background: transparent;
+            color: #dbeafe;
+            font-size: 0.98rem;
+            line-height: 1.85;
+            margin: 0;
+            overflow-wrap: anywhere;
+            padding: 1.75rem;
+            white-space: pre-wrap;
+        }
+
+        code {
+            background: transparent;
+            color: inherit;
+            padding: 0;
+        }
+    }
+
+    .terminal-bar {
+        align-items: center;
+        background: #111a2e;
+        display: flex;
+        gap: 0.5rem;
+        padding: 0.9rem 1.1rem;
+
+        span {
+            background: #60a5fa;
+            border-radius: 999px;
+            display: block;
+            height: 0.7rem;
+            opacity: 0.9;
+            width: 0.7rem;
+        }
+
+        span:nth-child(1) {
+            background: #ef4444;
+        }
+
+        span:nth-child(2) {
+            background: #f59e0b;
+        }
+
+        span:nth-child(3) {
+            background: #22c55e;
+        }
+
+        strong {
+            color: #94a3b8;
+            font-size: 0.85rem;
+            margin-left: 0.5rem;
+        }
+    }
+
+    section {
+        padding: 5rem 0;
+    }
+
+    .section-heading {
+        margin: 0 auto 2.4rem;
+        max-width: 45rem;
         text-align: center;
-        h3.item-title,
-        h3.item-title a {
-            color: $powershell-blue;
-            letter-spacing: 1.5px;
-            font-weight: 800;
-            position: relative;
-            margin-top: 5px;
-            margin-bottom: 10px;
+    }
+
+    .module-card {
+        background: #ffffff;
+        border: 1px solid #e5edf6;
+        border-radius: 22px;
+        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
+        height: calc(100% - 1.5rem);
+        margin-bottom: 1.5rem;
+        padding: 1.5rem;
+    }
+
+    .module-card {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        .module-card-header {
+            align-items: center;
+            display: flex;
+            gap: 0.9rem;
+            min-width: 0;
+        }
+
+        img {
+            flex: 0 0 auto;
+            height: 48px;
+            margin-bottom: 0;
+            object-fit: contain;
+            width: 48px;
+        }
+
+        h3 {
+            margin-bottom: 0;
+            min-width: 0;
+            overflow-wrap: anywhere;
         }
+
         p {
-            color: #aaaaaa;
-            font-size: 12px;
-            display: inline-block;
-            position: relative;
-            margin-bottom: 13px;
-            margin-bottom: 0.8125rem;
-            letter-spacing: 2px;
+            flex: 1 1 auto;
+            margin-bottom: 0;
+            min-height: 6rem;
         }
-        img {
-            margin: auto;
-        }
-        .module-item {
-            margin: 10px 0
-        }
-        .ghbtn {
-            text-align: center;
-            a {
-                margin: 0 4px 5px;
-                width: 65px;
-                &:hover {
-                    color: $powershell-blue;
-                }
-            }
+
+        code {
+            background: #f1f5f9;
+            border: 1px solid #dbe5f0;
+            border-radius: 999px;
+            color: #0f172a;
+            display: block;
+            font-size: 0.82rem;
+            max-width: 100%;
+            overflow-wrap: anywhere;
+            padding: 0.55rem 0.75rem;
         }
-        .person-item {
-            height: 280px;
+    }
+
+    .module-stats {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.45rem;
+
+        img {
+            height: 20px;
+            margin: 0;
+            width: auto;
         }
     }
-}
 
-@media screen and (min-width: 940px) {
-    .landing-page .slideshow-wrapper .container .slideshow-content {
-        h2 {
-            font-size: 75px;
-            letter-spacing: 4px;
+    .module-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+
+        a {
+            background: #ffffff;
+            border: 1px solid #d8e1ee;
+            border-radius: 999px;
+            color: #1d4ed8;
+            font-weight: 700;
+            padding: 0.4rem 0.7rem;
+
+            &:hover,
+            &:focus {
+                background: #eff6ff;
+                border-color: #2563eb;
+                text-decoration: none;
+            }
         }
+    }
+
+    .quickstart-panel {
+        align-items: center;
+        background: #0f172a;
+        border-radius: 28px;
+        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
+        display: grid;
+        gap: 2rem;
+        grid-template-columns: 1fr;
+        padding: 2rem;
+
+        h2,
         p {
-            font-size: 22px;
+            color: #ffffff;
+        }
+
+        .eyebrow {
+            color: #93c5fd;
+        }
+
+        ol {
+            counter-reset: steps;
+            display: grid;
+            gap: 1rem;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            background: rgba(255, 255, 255, 0.08);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            border-radius: 18px;
+            color: #dbeafe;
+            margin: 0;
+            padding: 1rem;
+
+            strong {
+                color: #ffffff;
+                display: block;
+                margin-bottom: 0.35rem;
+            }
+
+            span {
+                color: #cbd5e1;
+            }
         }
     }
+
+    .community-section {
+        background: #ffffff;
+    }
 }
 
-@media screen and (min-width: 720px) {
-    .landing-page .slideshow-wrapper .container .slideshow-content {
-        h2 {
-            font-size: 60px;
-            letter-spacing: 3px;
+@media screen and (min-width: 992px) {
+    .site-home {
+        .terminal-card {
+            margin-top: 0;
         }
-        p {
-            font-size: 18px;
+
+        .quickstart-panel {
+            grid-template-columns: 0.9fr 1.4fr;
+            padding: 3rem;
+
+            ol {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        .community-actions {
+            justify-content: flex-end;
         }
     }
 }
 
-.section-header {
-    margin-bottom: 30px;
+@media screen and (max-width: 767px) {
+    .site-home {
+        .hero-section {
+            padding: 4rem 0 3rem;
+        }
+
+        section {
+            padding: 3.5rem 0;
+        }
+    }
 }
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index 5bfc1cd..0b9c4f2 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -1,14 +1,14 @@
 .bd-toc,
 .bd-sidebar {
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 1280px) {
         position: sticky;
     }
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 1279px) {
         position: inherit;
     }
     top: 80px;
     border: 0;
-    z-index: 90;
+    z-index: 1;
     ul.bd-sidenav,
     ul.bd-sidenav li {
         margin: 0;
@@ -23,28 +23,6 @@
     overflow: visible;
 }
 
-#small-nav {
-    &>* {
-        display: inline-block;
-    }
-    .bd-search {
-        display: block !important;
-        width: 70%;
-        margin: 0 auto 10px;
-    }
-    h4 {
-        font-size: 1.2rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        line-height: 1.1;
-        margin-right: 10px;
-    }
-    select {
-        vertical-align: baseline;
-        padding: 5px;
-    }
-}
-
 .bd-toc {
     &>h3 {
         margin-top: 0 !important;
diff --git a/_sass/_site.scss b/_sass/_site.scss
new file mode 100644
index 0000000..6cb561c
--- /dev/null
+++ b/_sass/_site.scss
@@ -0,0 +1,991 @@
+$site-ink: #0f172a;
+$site-muted: #526174;
+$site-border: #e5edf6;
+$site-surface: #ffffff;
+$site-page: #f6f8fb;
+$site-accent: #2563eb;
+
+body {
+    background: $site-page;
+    color: $site-muted;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+    color: $site-muted;
+}
+
+a {
+    color: #1d4ed8;
+}
+
+a:hover {
+    color: $site-ink;
+}
+
+.site-header-wrapper {
+    background: rgba(255, 255, 255, 0.92);
+    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
+    position: sticky;
+    top: 0;
+    z-index: 999;
+}
+
+header.site-header {
+    background: transparent;
+    line-height: 72px;
+
+    .site-branding {
+        .site-logo-div {
+            line-height: 72px;
+            margin-right: 12px;
+            width: 54px;
+        }
+
+        .site-title,
+        .site-text-logo {
+            color: $site-ink;
+            font-size: 20px;
+            font-weight: 800;
+            letter-spacing: -0.02em;
+            text-transform: none;
+        }
+
+        .site-description {
+            color: #64748b;
+            font-size: 12px;
+        }
+    }
+
+    ul.onepress-menu {
+        > li {
+            &.active {
+                background: transparent !important;
+
+                > a {
+                    color: $site-accent !important;
+                }
+            }
+        }
+
+        a {
+            color: #334155;
+            font-size: 13px;
+            font-weight: 750;
+            letter-spacing: 0;
+            text-transform: none;
+
+            &:hover,
+            &:focus {
+                color: $site-accent;
+            }
+        }
+
+        ul {
+            border: 1px solid $site-border;
+            border-radius: 14px;
+            box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
+            overflow: hidden;
+
+            li a {
+                background: $site-surface;
+                border-color: $site-border;
+                color: #475569;
+            }
+        }
+    }
+}
+
+body > .page,
+.documentation.page {
+    margin-bottom: 0;
+    margin-top: 0;
+    min-height: 65vh;
+    padding-bottom: 5rem;
+    padding-top: 3.5rem;
+}
+
+body > .page .content,
+.documentation .content {
+    background: $site-surface;
+    border: 1px solid $site-border;
+    border-radius: 24px;
+    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
+    padding: 2rem;
+}
+
+body > .page .content {
+    max-width: 980px;
+}
+
+body > .module-page .content {
+    max-width: 1120px;
+}
+
+.content {
+    h1 {
+        color: $site-ink;
+        font-size: clamp(2rem, 4vw, 3.6rem);
+        font-weight: 760;
+        letter-spacing: -0.045em;
+        line-height: 1.02;
+        margin-bottom: 1.2rem;
+    }
+
+    h2 {
+        color: $site-ink;
+        font-size: clamp(1.5rem, 2.4vw, 2.1rem);
+        font-weight: 720;
+        letter-spacing: -0.03em;
+        margin-top: 2.4rem;
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: $site-ink;
+        letter-spacing: -0.015em;
+    }
+
+    p,
+    li {
+        color: $site-muted;
+        font-size: 1rem;
+        line-height: 1.75;
+    }
+
+    > p:first-of-type {
+        color: #475569;
+        font-size: 1.12rem;
+        font-weight: 400;
+        max-width: 780px;
+    }
+
+    table {
+        border: 1px solid $site-border;
+        border-radius: 16px;
+        border-spacing: 0;
+        box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
+        display: block;
+        max-width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    table > thead > tr > th,
+    table > tbody > tr > td,
+    table > tbody > tr > th {
+        border-color: $site-border;
+        padding: 0.85rem;
+    }
+
+    table th {
+        background: #f8fafc;
+        color: $site-ink;
+        font-size: 0.78rem;
+        letter-spacing: 0.08em;
+    }
+}
+
+.btn-outline,
+.btn-white,
+.btn-default {
+    background: #ffffff;
+    border: 1px solid #d8e1ee;
+    border-radius: 999px;
+    color: $site-ink;
+    font-weight: 700;
+    text-transform: none;
+
+    &:hover,
+    &:focus {
+        background: #eff6ff;
+        border-color: $site-accent;
+        color: #1d4ed8;
+        text-decoration: none;
+    }
+}
+
+.breadcrumb {
+    background: transparent;
+    border: 0;
+    margin-bottom: 1.5rem;
+    padding: 0;
+
+    .btn-breadcrumb {
+        box-shadow: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+    }
+
+    a[href="/"] {
+        font-size: 0;
+
+        i {
+            font-size: 0.875rem;
+        }
+    }
+}
+
+.bd-sidebar,
+.bd-toc {
+    background: transparent;
+}
+
+.bd-links {
+    background: $site-surface;
+    border: 1px solid $site-border;
+    border-radius: 12px;
+    box-shadow: none;
+    padding: 0.85rem;
+}
+
+.bd-sidebar {
+    padding-right: 1.75rem;
+
+    .bd-toc-link,
+    .bd-sidenav a {
+        color: #475569;
+        font-weight: 650;
+    }
+
+    h4.bd-toc-item {
+        color: $site-ink;
+        font-size: 0.92rem;
+        letter-spacing: 0;
+        margin-bottom: 0.6rem;
+        text-transform: none;
+    }
+
+    .active > a,
+    .bd-toc-link.active,
+    .bd-toc-link:hover,
+    .bd-sidenav a:hover {
+        color: $site-accent;
+    }
+
+    input.searchbox {
+        background: #f8fafc;
+        border: 1px solid #d8e1ee;
+        border-radius: 999px;
+        box-shadow: none;
+        color: $site-ink;
+        font-weight: 500;
+    }
+}
+
+.docs-sidebar-section {
+    display: grid;
+    gap: 0.35rem;
+
+    + .docs-sidebar-section {
+        border-top: 1px solid $site-border;
+        margin-top: 0.9rem;
+        padding-top: 0.9rem;
+    }
+
+    > span {
+        color: #94a3b8;
+        font-size: 0.72rem;
+        font-weight: 850;
+        letter-spacing: 0.1em;
+        margin-bottom: 0.15rem;
+        text-transform: uppercase;
+    }
+
+    .bd-toc-link {
+        border-radius: 10px;
+        display: block;
+        padding: 0.42rem 0.55rem;
+
+        &.active {
+            background: #eff6ff;
+            color: #1d4ed8;
+        }
+    }
+
+    .bd-sidenav {
+        border-left: 1px solid #d8e1ee;
+        margin: 0.2rem 0 0.35rem 0.65rem;
+        padding-left: 0.65rem;
+
+        a {
+            display: block;
+            font-size: 0.86rem;
+            padding: 0.28rem 0;
+        }
+    }
+}
+
+.flex-docs-nowrap {
+    flex-wrap: wrap;
+}
+
+.docs-sidebar-col,
+.docs-content-col,
+.docs-toc-col {
+    flex: 0 0 100%;
+    min-width: 0;
+    max-width: 100%;
+}
+
+.docs-desktop-nav,
+.docs-toc-col {
+    display: none !important;
+}
+
+.bd-sidebar .docs-desktop-nav {
+    display: none !important;
+}
+
+@media screen and (min-width: 768px) and (max-width: 1279px) {
+    .bd-sidebar {
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+    }
+
+    .documentation .content {
+        flex: 0 0 calc(100% - 2.5rem);
+        margin-left: 1.25rem;
+        margin-right: 1.25rem;
+        max-width: calc(100% - 2.5rem);
+    }
+}
+
+@media screen and (max-width: 1279px) {
+    .bd-sidebar {
+        margin-bottom: 0.75rem;
+
+        #small-nav {
+            margin-left: 1.25rem;
+            margin-right: 1.25rem;
+        }
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .flex-docs-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .docs-sidebar-col,
+    .docs-toc-col {
+        flex: 0 0 20%;
+        min-width: 0;
+        max-width: 20%;
+    }
+
+    .docs-content-col {
+        flex: 0 0 60%;
+        min-width: 0;
+        max-width: 60%;
+    }
+
+    .docs-desktop-nav {
+        display: block !important;
+    }
+
+    .bd-sidebar .docs-desktop-nav {
+        display: block !important;
+    }
+
+    .docs-mobile-nav {
+        display: none !important;
+    }
+
+    .bd-sidebar .docs-mobile-nav {
+        display: none !important;
+    }
+
+    .docs-toc-col {
+        display: block !important;
+    }
+}
+
+.docs-mobile-nav {
+    display: grid;
+    gap: 0.75rem;
+    text-align: left;
+
+    .docs-mobile-search input {
+        margin-bottom: 0;
+    }
+}
+
+.docs-mobile-menu {
+    background: #f8fafc;
+    border: 1px solid $site-border;
+    border-radius: 14px;
+    overflow: hidden;
+
+    summary {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        gap: 0.75rem;
+        justify-content: space-between;
+        list-style: none;
+        padding: 0.85rem 1rem;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        span {
+            color: #64748b;
+            font-size: 0.76rem;
+            font-weight: 850;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+        strong {
+            color: $site-ink;
+            font-size: 0.95rem;
+        }
+
+        &:after {
+            color: #64748b;
+            content: '+';
+            font-weight: 850;
+        }
+    }
+
+    &[open] summary:after {
+        content: '-';
+    }
+}
+
+.content {
+    h2[id^="about_"],
+    h1[id="short-description"],
+    h1[id="long-description"] {
+        color: #64748b;
+        font-size: 0.82rem;
+        letter-spacing: 0.08em;
+        margin-top: 1rem;
+        text-transform: uppercase;
+    }
+}
+
+.docs-mobile-menu-body {
+    background: #ffffff;
+    border-top: 1px solid $site-border;
+    display: grid;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+    .docs-mobile-menu-section {
+        display: grid;
+        gap: 0.4rem;
+
+    > span {
+        color: #94a3b8;
+        font-size: 0.72rem;
+        font-weight: 850;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+    }
+
+    a {
+        border: 1px solid transparent;
+        border-radius: 10px;
+        color: #475569;
+        font-weight: 750;
+        padding: 0.5rem 0.6rem;
+
+        &:hover,
+        &:focus,
+        &.active {
+            background: #eff6ff;
+            border-color: #d8e1ee;
+            color: #1d4ed8;
+            text-decoration: none;
+        }
+    }
+
+    .docs-mobile-subitem {
+        margin-left: 0.75rem;
+    }
+}
+
+.bd-toc {
+    .toc {
+        background: $site-surface;
+        border: 1px solid $site-border;
+        border-radius: 12px;
+        box-shadow: none;
+        padding: 0.85rem;
+        overflow-wrap: anywhere;
+
+        a {
+            color: #64748b;
+            font-size: 0.9rem;
+        }
+
+        a:hover,
+        .active > a {
+            color: $site-accent;
+        }
+    }
+}
+
+.gist,
+.gist-file,
+.gist-data,
+.gist .highlight,
+.gist table {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+div.code_block {
+    background: #111a2e;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    border-radius: 18px;
+    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
+    margin: 1.5rem 0;
+    overflow: hidden;
+
+    .code_head {
+        background: #111a2e;
+        border: 0;
+        color: #cbd5e1;
+        margin-top: 0;
+        min-height: 2.75rem;
+
+        span {
+            color: #93c5fd;
+            font-size: 0.78rem;
+            font-weight: 800;
+            letter-spacing: 0.08em;
+            padding: 0.65rem 1rem;
+            text-transform: uppercase;
+        }
+
+        button {
+            border-left: 1px solid rgba(148, 163, 184, 0.18);
+            color: #cbd5e1;
+            font-weight: 700;
+            padding: 0.65rem 0.9rem;
+
+            &:hover,
+            &:focus {
+                background: #1d4ed8;
+                color: #ffffff;
+            }
+        }
+    }
+
+    pre,
+    pre.console {
+        background: #0b1220;
+        border: 0;
+        border-radius: 0;
+        color: #dbeafe;
+        font-size: 0.92rem;
+        line-height: 1.8;
+        margin: 0;
+        overflow-x: auto;
+        padding: 1.3rem;
+
+        code {
+            background: transparent;
+            color: inherit !important;
+            padding: 0;
+        }
+    }
+}
+
+pre,
+code,
+tt,
+kbd,
+samp,
+var {
+    border-radius: 8px;
+}
+
+blockquote {
+    background: #f8fafc;
+    border-left: 4px solid $site-accent;
+    border-radius: 14px;
+    padding: 1rem 1.2rem;
+}
+
+.card {
+    border: 1px solid $site-border;
+    border-radius: 20px;
+    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.05);
+}
+
+.module-directory {
+    border: 1px solid $site-border;
+    border-radius: 22px;
+    display: grid;
+    margin-top: 1.5rem;
+    overflow: hidden;
+}
+
+.module-directory-header,
+.module-directory-card {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.module-directory-header {
+    background: #f8fafc;
+    color: #64748b;
+    display: none;
+    font-size: 0.78rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    padding: 0.85rem 1.1rem;
+    text-transform: uppercase;
+}
+
+.module-directory-card {
+    align-items: flex-start;
+    background: $site-surface;
+    border-top: 1px solid $site-border;
+    padding: 1.1rem;
+
+    &:first-of-type {
+        border-top: 0;
+    }
+
+    code {
+        align-self: start;
+        background: #f1f5f9;
+        border: 1px solid #dbe5f0;
+        border-radius: 999px;
+        color: $site-ink;
+        display: block;
+        font-size: 0.84rem;
+        overflow-wrap: anywhere;
+        padding: 0.6rem 0.8rem;
+    }
+}
+
+.module-summary {
+    align-items: flex-start;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 56px minmax(0, 1fr);
+
+    img.logo {
+        height: 56px;
+        object-fit: contain;
+        width: 56px;
+    }
+
+    h2.item-title {
+        font-size: 1.25rem;
+        margin: 0 0 0.35rem;
+
+        a {
+            color: $site-ink;
+        }
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+}
+
+.module-directory-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+
+    img {
+        height: 20px;
+        width: max-content;
+    }
+}
+
+.module-directory-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    margin-top: 0;
+
+    a {
+        background: #ffffff;
+        border: 1px solid #d8e1ee;
+        border-radius: 999px;
+        color: #1d4ed8;
+        font-weight: 700;
+        padding: 0.4rem 0.7rem;
+
+        &:hover,
+        &:focus {
+            background: #eff6ff;
+            border-color: $site-accent;
+            text-decoration: none;
+        }
+    }
+}
+
+.repository-list {
+    background: #f8fafc;
+    border: 1px solid $site-border;
+    border-radius: 18px;
+    list-style: none;
+    padding: 1rem 1.2rem;
+
+    li {
+        margin: 0.5rem 0;
+    }
+}
+
+.reference-index {
+    display: grid;
+    gap: 0.6rem;
+    grid-template-columns: 1fr;
+    margin: 1.4rem 0;
+
+    a {
+        background: #f8fafc;
+        border: 1px solid $site-border;
+        border-radius: 12px;
+        color: $site-ink;
+        font-weight: 750;
+        padding: 0.7rem 0.85rem;
+
+        &:hover,
+        &:focus {
+            background: #eff6ff;
+            border-color: $site-accent;
+            color: #1d4ed8;
+            text-decoration: none;
+        }
+    }
+}
+
+.docs-home {
+    display: grid;
+    gap: 2rem;
+    margin-top: 2rem;
+}
+
+.docs-home-section {
+    display: grid;
+    gap: 1rem;
+
+    article,
+    > div:not(.docs-home-heading) {
+        background: #f8fafc;
+        border: 1px solid $site-border;
+        border-radius: 18px;
+        padding: 1.25rem;
+    }
+
+    span {
+        color: $site-accent;
+        display: block;
+        font-size: 0.76rem;
+        font-weight: 800;
+        letter-spacing: 0.1em;
+        margin-bottom: 0.55rem;
+        text-transform: uppercase;
+    }
+
+    h2,
+    h3 {
+        margin-top: 0;
+    }
+
+    a {
+        font-weight: 750;
+    }
+}
+
+.docs-home-start,
+.docs-home-community {
+    grid-template-columns: 1fr;
+}
+
+.docs-home-heading {
+    max-width: 42rem;
+}
+
+.docs-module-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
+
+    article div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        margin-top: 1rem;
+    }
+}
+
+.docs-home-paths > div {
+    display: grid;
+    gap: 0.75rem;
+
+    a {
+        align-items: center;
+        background: #ffffff;
+        border: 1px solid #d8e1ee;
+        border-radius: 14px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0.9rem 1rem;
+
+        &:after {
+            content: '→';
+        }
+
+        &:hover,
+        &:focus {
+            border-color: $site-accent;
+            text-decoration: none;
+        }
+    }
+}
+
+.project-issue-list {
+    display: grid;
+    gap: 0.85rem;
+    margin: 1.4rem 0 1.8rem;
+}
+
+.project-issue-card {
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid $site-border;
+    border-radius: 16px;
+    display: grid;
+    gap: 0.65rem;
+    padding: 1rem;
+
+    h3 {
+        font-size: 1.05rem;
+        margin: 0;
+    }
+
+    a {
+        font-weight: 700;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .docs-home-start,
+    .docs-home-community,
+    .project-issue-list {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .docs-module-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .reference-index {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .module-directory-header,
+    .module-directory-card {
+        grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.9fr) minmax(150px, 0.65fr) minmax(180px, 0.8fr);
+    }
+
+    .module-directory-header {
+        display: grid;
+    }
+}
+
+footer.site-footer {
+    background: #0f172a;
+    color: #cbd5e1;
+    margin-top: 0;
+
+    .site-info {
+        background: transparent;
+        color: #cbd5e1;
+        padding: 2.5rem 0 1.5rem;
+
+        a {
+            color: #dbeafe;
+        }
+
+        .btt a {
+            background: #1e293b;
+            border-radius: 999px;
+            color: #dbeafe;
+            right: 2rem;
+            transform: none;
+
+            i {
+                transform: none;
+            }
+        }
+
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.8rem;
+            justify-content: center;
+            padding-left: 0;
+
+            li {
+                margin: 0;
+
+                &:before {
+                    content: '';
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    body > .page,
+    .documentation.page {
+        padding-top: 2rem;
+    }
+
+    body > .page .content,
+    .documentation .content {
+        border-radius: 18px;
+        overflow-x: hidden;
+        padding: 1.35rem;
+
+        table {
+            display: block;
+            max-width: 100%;
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        table th,
+        table td {
+            min-width: 9rem;
+        }
+    }
+
+    .documentation .breadcrumb {
+        margin-bottom: 0.9rem;
+    }
+
+    .docs-mobile-nav {
+        gap: 0.55rem;
+    }
+
+    .docs-mobile-menu summary {
+        padding: 0.7rem 0.85rem;
+    }
+}
diff --git a/assets/css/animate.css b/assets/css/animate.css
deleted file mode 100644
index 1e79e03..0000000
--- a/assets/css/animate.css
+++ /dev/null
@@ -1,1579 +0,0 @@
-@charset "UTF-8";
-
-/*!
- * animate.css -http://daneden.me/animate
- * Version - 3.5.2
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- *
- * Copyright (c) 2017 Daniel Eden
- */
-
-.animated {
-  animation-duration: 1s;
-  animation-fill-mode: both;
-}
-
-.animated.infinite {
-  animation-iteration-count: infinite;
-}
-
-.animated.hinge {
-  animation-duration: 2s;
-}
-
-.animated.flipOutX,
-.animated.flipOutY,
-.animated.bounceIn,
-.animated.bounceOut {
-  animation-duration: .75s;
-}
-
-@keyframes bounce {
-  from, 20%, 53%, 80%, to {
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    transform: translate3d(0,0,0);
-  }
-
-  40%, 43% {
-    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    transform: translate3d(0, -30px, 0);
-  }
-
-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-    transform: translate3d(0, -15px, 0);
-  }
-
-  90% {
-    transform: translate3d(0,-4px,0);
-  }
-}
-
-.bounce {
-  animation-name: bounce;
-  transform-origin: center bottom;
-}
-
-@keyframes flash {
-  from, 50%, to {
-    opacity: 1;
-  }
-
-  25%, 75% {
-    opacity: 0;
-  }
-}
-
-.flash {
-  animation-name: flash;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes pulse {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  50% {
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.pulse {
-  animation-name: pulse;
-}
-
-@keyframes rubberBand {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  30% {
-    transform: scale3d(1.25, 0.75, 1);
-  }
-
-  40% {
-    transform: scale3d(0.75, 1.25, 1);
-  }
-
-  50% {
-    transform: scale3d(1.15, 0.85, 1);
-  }
-
-  65% {
-    transform: scale3d(.95, 1.05, 1);
-  }
-
-  75% {
-    transform: scale3d(1.05, .95, 1);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.rubberBand {
-  animation-name: rubberBand;
-}
-
-@keyframes shake {
-  from, to {
-    transform: translate3d(0, 0, 0);
-  }
-
-  10%, 30%, 50%, 70%, 90% {
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  20%, 40%, 60%, 80% {
-    transform: translate3d(10px, 0, 0);
-  }
-}
-
-.shake {
-  animation-name: shake;
-}
-
-@keyframes headShake {
-  0% {
-    transform: translateX(0);
-  }
-
-  6.5% {
-    transform: translateX(-6px) rotateY(-9deg);
-  }
-
-  18.5% {
-    transform: translateX(5px) rotateY(7deg);
-  }
-
-  31.5% {
-    transform: translateX(-3px) rotateY(-5deg);
-  }
-
-  43.5% {
-    transform: translateX(2px) rotateY(3deg);
-  }
-
-  50% {
-    transform: translateX(0);
-  }
-}
-
-.headShake {
-  animation-timing-function: ease-in-out;
-  animation-name: headShake;
-}
-
-@keyframes swing {
-  20% {
-    transform: rotate3d(0, 0, 1, 15deg);
-  }
-
-  40% {
-    transform: rotate3d(0, 0, 1, -10deg);
-  }
-
-  60% {
-    transform: rotate3d(0, 0, 1, 5deg);
-  }
-
-  80% {
-    transform: rotate3d(0, 0, 1, -5deg);
-  }
-
-  to {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-}
-
-.swing {
-  transform-origin: top center;
-  animation-name: swing;
-}
-
-@keyframes tada {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  10%, 20% {
-    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
-  }
-
-  30%, 50%, 70%, 90% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-  }
-
-  40%, 60%, 80% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.tada {
-  animation-name: tada;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes wobble {
-  from {
-    transform: none;
-  }
-
-  15% {
-    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-  }
-
-  30% {
-    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-  }
-
-  45% {
-    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-  }
-
-  60% {
-    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-  }
-
-  75% {
-    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-  }
-
-  to {
-    transform: none;
-  }
-}
-
-.wobble {
-  animation-name: wobble;
-}
-
-@keyframes jello {
-  from, 11.1%, to {
-    transform: none;
-  }
-
-  22.2% {
-    transform: skewX(-12.5deg) skewY(-12.5deg);
-  }
-
-  33.3% {
-    transform: skewX(6.25deg) skewY(6.25deg);
-  }
-
-  44.4% {
-    transform: skewX(-3.125deg) skewY(-3.125deg);
-  }
-
-  55.5% {
-    transform: skewX(1.5625deg) skewY(1.5625deg);
-  }
-
-  66.6% {
-    transform: skewX(-0.78125deg) skewY(-0.78125deg);
-  }
-
-  77.7% {
-    transform: skewX(0.390625deg) skewY(0.390625deg);
-  }
-
-  88.8% {
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
-  }
-}
-
-.jello {
-  animation-name: jello;
-  transform-origin: center;
-}
-
-@keyframes bounceIn {
-  from, 20%, 40%, 60%, 80%, to {
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  0% {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-  }
-
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    transform: scale3d(.9, .9, .9);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    transform: scale3d(.97, .97, .97);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.bounceIn {
-  animation-name: bounceIn;
-}
-
-@keyframes bounceInDown {
-  from, 60%, 75%, 90%, to {
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(0, 25px, 0);
-  }
-
-  75% {
-    transform: translate3d(0, -10px, 0);
-  }
-
-  90% {
-    transform: translate3d(0, 5px, 0);
-  }
-
-  to {
-    transform: none;
-  }
-}
-
-.bounceInDown {
-  animation-name: bounceInDown;
-}
-
-@keyframes bounceInLeft {
-  from, 60%, 75%, 90%, to {
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  0% {
-    opacity: 0;
-    transform: translate3d(-3000px, 0, 0);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(25px, 0, 0);
-  }
-
-  75% {
-    transform: translate3d(-10px, 0, 0);
-  }
-
-  90% {
-    transform: translate3d(5px, 0, 0);
-  }
-
-  to {
-    transform: none;
-  }
-}
-
-.bounceInLeft {
-  animation-name: bounceInLeft;
-}
-
-@keyframes bounceInRight {
-  from, 60%, 75%, 90%, to {
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  from {
-    opacity: 0;
-    transform: translate3d(3000px, 0, 0);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(-25px, 0, 0);
-  }
-
-  75% {
-    transform: translate3d(10px, 0, 0);
-  }
-
-  90% {
-    transform: translate3d(-5px, 0, 0);
-  }
-
-  to {
-    transform: none;
-  }
-}
-
-.bounceInRight {
-  animation-name: bounceInRight;
-}
-
-@keyframes bounceInUp {
-  from, 60%, 75%, 90%, to {
-    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  from {
-    opacity: 0;
-    transform: translate3d(0, 3000px, 0);
-  }
-
-  60% {
-    opacity: 1;
-    transform: translate3d(0, -20px, 0);
-  }
-
-  75% {
-    transform: translate3d(0, 10px, 0);
-  }
-
-  90% {
-    transform: translate3d(0, -5px, 0);
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.bounceInUp {
-  animation-name: bounceInUp;
-}
-
-@keyframes bounceOut {
-  20% {
-    transform: scale3d(.9, .9, .9);
-  }
-
-  50%, 55% {
-    opacity: 1;
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-  }
-}
-
-.bounceOut {
-  animation-name: bounceOut;
-}
-
-@keyframes bounceOutDown {
-  20% {
-    transform: translate3d(0, 10px, 0);
-  }
-
-  40%, 45% {
-    opacity: 1;
-    transform: translate3d(0, -20px, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-
-.bounceOutDown {
-  animation-name: bounceOutDown;
-}
-
-@keyframes bounceOutLeft {
-  20% {
-    opacity: 1;
-    transform: translate3d(20px, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-
-.bounceOutLeft {
-  animation-name: bounceOutLeft;
-}
-
-@keyframes bounceOutRight {
-  20% {
-    opacity: 1;
-    transform: translate3d(-20px, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-
-.bounceOutRight {
-  animation-name: bounceOutRight;
-}
-
-@keyframes bounceOutUp {
-  20% {
-    transform: translate3d(0, -10px, 0);
-  }
-
-  40%, 45% {
-    opacity: 1;
-    transform: translate3d(0, 20px, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-
-.bounceOutUp {
-  animation-name: bounceOutUp;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeIn {
-  animation-name: fadeIn;
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInDown {
-  animation-name: fadeInDown;
-}
-
-@keyframes fadeInDownBig {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInDownBig {
-  animation-name: fadeInDownBig;
-}
-
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInLeft {
-  animation-name: fadeInLeft;
-}
-
-@keyframes fadeInLeftBig {
-  from {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInLeftBig {
-  animation-name: fadeInLeftBig;
-}
-
-@keyframes fadeInRight {
-  from {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInRight {
-  animation-name: fadeInRight;
-}
-
-@keyframes fadeInRightBig {
-  from {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInRightBig {
-  animation-name: fadeInRightBig;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInUp {
-  animation-name: fadeInUp;
-}
-
-@keyframes fadeInUpBig {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 2000px, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInUpBig {
-  animation-name: fadeInUpBig;
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-.fadeOut {
-  animation-name: fadeOut;
-}
-
-@keyframes fadeOutDown {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-.fadeOutDown {
-  animation-name: fadeOutDown;
-}
-
-@keyframes fadeOutDownBig {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 2000px, 0);
-  }
-}
-
-.fadeOutDownBig {
-  animation-name: fadeOutDownBig;
-}
-
-@keyframes fadeOutLeft {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-.fadeOutLeft {
-  animation-name: fadeOutLeft;
-}
-
-@keyframes fadeOutLeftBig {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(-2000px, 0, 0);
-  }
-}
-
-.fadeOutLeftBig {
-  animation-name: fadeOutLeftBig;
-}
-
-@keyframes fadeOutRight {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-.fadeOutRight {
-  animation-name: fadeOutRight;
-}
-
-@keyframes fadeOutRightBig {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(2000px, 0, 0);
-  }
-}
-
-.fadeOutRightBig {
-  animation-name: fadeOutRightBig;
-}
-
-@keyframes fadeOutUp {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-.fadeOutUp {
-  animation-name: fadeOutUp;
-}
-
-@keyframes fadeOutUpBig {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -2000px, 0);
-  }
-}
-
-.fadeOutUpBig {
-  animation-name: fadeOutUpBig;
-}
-
-@keyframes flip {
-  from {
-    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-    animation-timing-function: ease-out;
-  }
-
-  40% {
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-    animation-timing-function: ease-out;
-  }
-
-  50% {
-    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-    animation-timing-function: ease-in;
-  }
-
-  80% {
-    transform: perspective(400px) scale3d(.95, .95, .95);
-    animation-timing-function: ease-in;
-  }
-
-  to {
-    transform: perspective(400px);
-    animation-timing-function: ease-in;
-  }
-}
-
-.animated.flip {
-  -webkit-backface-visibility: visible;
-  backface-visibility: visible;
-  animation-name: flip;
-}
-
-@keyframes flipInX {
-  from {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    animation-timing-function: ease-in;
-  }
-
-  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  to {
-    transform: perspective(400px);
-  }
-}
-
-.flipInX {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  animation-name: flipInX;
-}
-
-@keyframes flipInY {
-  from {
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    animation-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    animation-timing-function: ease-in;
-  }
-
-  60% {
-    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-  }
-
-  to {
-    transform: perspective(400px);
-  }
-}
-
-.flipInY {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  animation-name: flipInY;
-}
-
-@keyframes flipOutX {
-  from {
-    transform: perspective(400px);
-  }
-
-  30% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    opacity: 1;
-  }
-
-  to {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    opacity: 0;
-  }
-}
-
-.flipOutX {
-  animation-name: flipOutX;
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-}
-
-@keyframes flipOutY {
-  from {
-    transform: perspective(400px);
-  }
-
-  30% {
-    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
-    opacity: 1;
-  }
-
-  to {
-    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-    opacity: 0;
-  }
-}
-
-.flipOutY {
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
-  animation-name: flipOutY;
-}
-
-@keyframes lightSpeedIn {
-  from {
-    transform: translate3d(100%, 0, 0) skewX(-30deg);
-    opacity: 0;
-  }
-
-  60% {
-    transform: skewX(20deg);
-    opacity: 1;
-  }
-
-  80% {
-    transform: skewX(-5deg);
-    opacity: 1;
-  }
-
-  to {
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.lightSpeedIn {
-  animation-name: lightSpeedIn;
-  animation-timing-function: ease-out;
-}
-
-@keyframes lightSpeedOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    transform: translate3d(100%, 0, 0) skewX(30deg);
-    opacity: 0;
-  }
-}
-
-.lightSpeedOut {
-  animation-name: lightSpeedOut;
-  animation-timing-function: ease-in;
-}
-
-@keyframes rotateIn {
-  from {
-    transform-origin: center;
-    transform: rotate3d(0, 0, 1, -200deg);
-    opacity: 0;
-  }
-
-  to {
-    transform-origin: center;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateIn {
-  animation-name: rotateIn;
-}
-
-@keyframes rotateInDownLeft {
-  from {
-    transform-origin: left bottom;
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-
-  to {
-    transform-origin: left bottom;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInDownLeft {
-  animation-name: rotateInDownLeft;
-}
-
-@keyframes rotateInDownRight {
-  from {
-    transform-origin: right bottom;
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  to {
-    transform-origin: right bottom;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInDownRight {
-  animation-name: rotateInDownRight;
-}
-
-@keyframes rotateInUpLeft {
-  from {
-    transform-origin: left bottom;
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-
-  to {
-    transform-origin: left bottom;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInUpLeft {
-  animation-name: rotateInUpLeft;
-}
-
-@keyframes rotateInUpRight {
-  from {
-    transform-origin: right bottom;
-    transform: rotate3d(0, 0, 1, -90deg);
-    opacity: 0;
-  }
-
-  to {
-    transform-origin: right bottom;
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.rotateInUpRight {
-  animation-name: rotateInUpRight;
-}
-
-@keyframes rotateOut {
-  from {
-    transform-origin: center;
-    opacity: 1;
-  }
-
-  to {
-    transform-origin: center;
-    transform: rotate3d(0, 0, 1, 200deg);
-    opacity: 0;
-  }
-}
-
-.rotateOut {
-  animation-name: rotateOut;
-}
-
-@keyframes rotateOutDownLeft {
-  from {
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-
-  to {
-    transform-origin: left bottom;
-    transform: rotate3d(0, 0, 1, 45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutDownLeft {
-  animation-name: rotateOutDownLeft;
-}
-
-@keyframes rotateOutDownRight {
-  from {
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-
-  to {
-    transform-origin: right bottom;
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutDownRight {
-  animation-name: rotateOutDownRight;
-}
-
-@keyframes rotateOutUpLeft {
-  from {
-    transform-origin: left bottom;
-    opacity: 1;
-  }
-
-  to {
-    transform-origin: left bottom;
-    transform: rotate3d(0, 0, 1, -45deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutUpLeft {
-  animation-name: rotateOutUpLeft;
-}
-
-@keyframes rotateOutUpRight {
-  from {
-    transform-origin: right bottom;
-    opacity: 1;
-  }
-
-  to {
-    transform-origin: right bottom;
-    transform: rotate3d(0, 0, 1, 90deg);
-    opacity: 0;
-  }
-}
-
-.rotateOutUpRight {
-  animation-name: rotateOutUpRight;
-}
-
-@keyframes hinge {
-  0% {
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-
-  20%, 60% {
-    transform: rotate3d(0, 0, 1, 80deg);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-  }
-
-  40%, 80% {
-    transform: rotate3d(0, 0, 1, 60deg);
-    transform-origin: top left;
-    animation-timing-function: ease-in-out;
-    opacity: 1;
-  }
-
-  to {
-    transform: translate3d(0, 700px, 0);
-    opacity: 0;
-  }
-}
-
-.hinge {
-  animation-name: hinge;
-}
-
-@keyframes jackInTheBox {
-  from {
-    opacity: 0;
-    transform: scale(0.1) rotate(30deg);
-    transform-origin: center bottom;
-  }
-
-  50% {
-    transform: rotate(-10deg);
-  }
-
-  70% {
-    transform: rotate(3deg);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.jackInTheBox {
-  animation-name: jackInTheBox;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes rollIn {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.rollIn {
-  animation-name: rollIn;
-}
-
-/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-@keyframes rollOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
-  }
-}
-
-.rollOut {
-  animation-name: rollOut;
-}
-
-@keyframes zoomIn {
-  from {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-.zoomIn {
-  animation-name: zoomIn;
-}
-
-@keyframes zoomInDown {
-  from {
-    opacity: 0;
-    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-  }
-}
-
-.zoomInDown {
-  animation-name: zoomInDown;
-}
-
-@keyframes zoomInLeft {
-  from {
-    opacity: 0;
-    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-  }
-}
-
-.zoomInLeft {
-  animation-name: zoomInLeft;
-}
-
-@keyframes zoomInRight {
-  from {
-    opacity: 0;
-    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-  }
-}
-
-.zoomInRight {
-  animation-name: zoomInRight;
-}
-
-@keyframes zoomInUp {
-  from {
-    opacity: 0;
-    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-  }
-}
-
-.zoomInUp {
-  animation-name: zoomInUp;
-}
-
-@keyframes zoomOut {
-  from {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-.zoomOut {
-  animation-name: zoomOut;
-}
-
-@keyframes zoomOutDown {
-  40% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-    transform-origin: center bottom;
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-  }
-}
-
-.zoomOutDown {
-  animation-name: zoomOutDown;
-}
-
-@keyframes zoomOutLeft {
-  40% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(.1) translate3d(-2000px, 0, 0);
-    transform-origin: left center;
-  }
-}
-
-.zoomOutLeft {
-  animation-name: zoomOutLeft;
-}
-
-@keyframes zoomOutRight {
-  40% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(.1) translate3d(2000px, 0, 0);
-    transform-origin: right center;
-  }
-}
-
-.zoomOutRight {
-  animation-name: zoomOutRight;
-}
-
-@keyframes zoomOutUp {
-  40% {
-    opacity: 1;
-    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
-    transform-origin: center bottom;
-    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-  }
-}
-
-.zoomOutUp {
-  animation-name: zoomOutUp;
-}
-
-@keyframes slideInDown {
-  from {
-    transform: translate3d(0, -100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInDown {
-  animation-name: slideInDown;
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translate3d(-100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInLeft {
-  animation-name: slideInLeft;
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInRight {
-  animation-name: slideInRight;
-}
-
-@keyframes slideInUp {
-  from {
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slideInUp {
-  animation-name: slideInUp;
-}
-
-@keyframes slideOutDown {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-.slideOutDown {
-  animation-name: slideOutDown;
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-.slideOutLeft {
-  animation-name: slideOutLeft;
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-.slideOutRight {
-  animation-name: slideOutRight;
-}
-
-@keyframes slideOutUp {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-.slideOutUp {
-  animation-name: slideOutUp;
-}
diff --git a/assets/css/morphext.css b/assets/css/morphext.css
deleted file mode 100644
index a9d743c..0000000
--- a/assets/css/morphext.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.morphext > .animated {
-    display: inline-block;
-}
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 07a299d..9d6c85a 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -15,3 +15,4 @@
 @import "documentationpage";
 @import "footer";
 @import "algolia";
+@import "site";
diff --git a/assets/javascript/github.js b/assets/javascript/github.js
deleted file mode 100644
index 01f10f3..0000000
--- a/assets/javascript/github.js
+++ /dev/null
@@ -1,36 +0,0 @@
-$(document).ready(function() {
-    var user = "AtlassianPS";
-
-    // if (data = JSON.parse(localStorage[id])) { // use cache
-    //     console.debug("using cache for: " + id, data);
-    //     // setRepoData("{{ forloop.index }}", data);
-    // } else {
-    //     $.get("https://api.github.com/users/" + id + "/repos?per_page=100", function(data) {
-    //         localStorage[id] = JSON.stringify(data); // store cache
-    //         // setRepoData("{{ forloop.index }}", data);
-    //     });
-    // }
-
-    $.ajax({
-        type: "GET",
-        url: "https://api.github.com/users/" + user + "/repos?per_page=100",
-        tryCount: 0,
-        retryLimit: 3,
-        async: !0,
-        dataType: "json",
-        success: function(data) {
-            $.each(data, function(index, data) {
-                let id = user + '/' + data.name;
-                $("div.module.item[repo='" + data.name + "']").find(".html_url").attr("href", data.html_url);
-                $("div.module.item[repo='" + data.name + "']").find(".item-description").html(data.description);
-                $("div.module.item[repo='" + data.name + "']").find(".img.logo").attr("alt", data.name);
-                $("div.module.item[repo='" + data.name + "']").find(".fork").html('<i class="fas fa-code-branch"></i> ' + data.forks_count);
-                $("div.module.item[repo='" + data.name + "']").find(".star").html('<i class="fas fa-star"></i> ' + data.stargazers_count);
-            });
-        }
-    }).done(function(data) {
-        // if (console && console.log) {
-        // console.log("Sample of data:", data.slice(0, 100));
-        // }
-    });
-});
diff --git a/assets/javascript/morphext.min.js b/assets/javascript/morphext.min.js
deleted file mode 100644
index 2b2643e..0000000
--- a/assets/javascript/morphext.min.js
+++ /dev/null
@@ -1 +0,0 @@
-/*! Morphext - v2.4.4 - 2015-05-21 */!function(a){"use strict";function b(b,c){this.element=a(b),this.settings=a.extend({},d,c),this._defaults=d,this._init()}var c="Morphext",d={animation:"bounceIn",separator:",",speed:2e3,complete:a.noop};b.prototype={_init:function(){var b=this;this.phrases=[],this.element.addClass("morphext"),a.each(this.element.text().split(this.settings.separator),function(c,d){b.phrases.push(a.trim(d))}),this.index=-1,this.animate(),this.start()},animate:function(){this.index=++this.index%this.phrases.length,this.element[0].innerHTML='<span class="animated '+this.settings.animation+'">'+this.phrases[this.index]+"</span>",a.isFunction(this.settings.complete)&&this.settings.complete.call(this)},start:function(){var a=this;this._interval=setInterval(function(){a.animate()},this.settings.speed)},stop:function(){this._interval=clearInterval(this._interval)}},a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(this,d))})}}(jQuery);
\ No newline at end of file
diff --git a/assets/javascript/theme.js b/assets/javascript/theme.js
index 8173700..4cd8590 100644
--- a/assets/javascript/theme.js
+++ b/assets/javascript/theme.js
@@ -78,19 +78,19 @@ $(document).ready(function () {
         }, 350);
     });
 
-    $('pre code').parent().wrap('<div class="code_block"></div>').each(function (k, v) {
-        let language = "";
+    $('pre code').parent().not('.terminal-card pre').wrap('<div class="code_block"></div>').each(function (k, v) {
+        let language = "Code";
         if ($(v).children('code').hasClass('language-powershell')) {
             language = "PowerShell";
-
-            $(v).before(`
-                <div class="code_head">
-                    <span class="">${language}</span>
-                    <button class="action copy"><i class="far fa-clone"></i> Copy</button>
-                </div>
-            `);
             $(v).addClass('console');
         }
+
+        $(v).before(`
+            <div class="code_head">
+                <span class="">${language}</span>
+                <button class="action copy"><i class="far fa-clone"></i> Copy</button>
+            </div>
+        `);
     });
 
     $('button.action.copy').on('click', function () {
@@ -99,7 +99,7 @@ $(document).ready(function () {
     });
 
     /**
-     * Remove Powershell help specific dashes on H3 of examples
+     * Remove PowerShell help specific dashes on H3 of examples
      */
     $('h3').each(function () {
         let text = $(this).text();
@@ -118,12 +118,6 @@ $(document).ready(function () {
     //     $(this).parent().find('.nav.bd-sidenav').toggle();
     // })
 
-    $("#small-nav-dropdown").change(function () {
-        if ($(this).val() != '') {
-            window.location.href = $(this).val();
-        }
-    });
-
     $("ul.nav.toc").toc({
         content: "section.content",
         headings: "h1,h2,h3"
diff --git a/docs/Contributing/index.md b/docs/Contributing/index.md
index 26b3493..b0a1b8c 100644
--- a/docs/Contributing/index.md
+++ b/docs/Contributing/index.md
@@ -30,13 +30,33 @@ When you notice something that could be improved, tell us by creating an issue.
 
 Each of our projects has an _issue tracker_ where you can report your findings.
 
-| Project                       | Link                                                                  | # of open issues                                                                                                                                                                     |
-| ----------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **AtlassianPS.Configuration** | <https://github.com/AtlassianPS/AtlassianPS.Configuration/issues/new> | [![Open Issues](https://img.shields.io/github/issues-raw/AtlassianPS/AtlassianPS.Configuration.svg?maxAge=2592000)](https://github.com/AtlassianPS/AtlassianPS.Configuration/issues) |
-| **AtlassianPS.github.io**     | <https://github.com/AtlassianPS/AtlassianPS.github.io/issues/new>     | [![Open Issues](https://img.shields.io/github/issues-raw/AtlassianPS/AtlassianPS.github.io.svg?maxAge=2592000)](https://github.com/AtlassianPS/AtlassianPS.github.io/issues)         |
-| **ConfluencePS**              | <https://github.com/AtlassianPS/ConfluencePS/issues/new>              | [![Open Issues](https://img.shields.io/github/issues-raw/AtlassianPS/ConfluencePS.svg?maxAge=2592000)](https://github.com/AtlassianPS/ConfluencePS/issues)                           |
-| **JiraAgilePS**               | <https://github.com/AtlassianPS/JiraAgilePS/issues/new>               | [![Open Issues](https://img.shields.io/github/issues-raw/AtlassianPS/JiraAgilePS.svg?maxAge=2592000)](https://github.com/AtlassianPS/JiraAgilePS/issues)                             |
-| **JiraPS**                    | <https://github.com/AtlassianPS/JiraPS/issues/new>                    | [![Open Issues](https://img.shields.io/github/issues-raw/AtlassianPS/JiraPS.svg?maxAge=2592000)](https://github.com/AtlassianPS/JiraPS/issues)                                       |
+<div class="project-issue-list">
+    <article class="project-issue-card">
+        <h3>AtlassianPS.Configuration</h3>
+        <a href="https://github.com/AtlassianPS/AtlassianPS.Configuration/issues/new">Open a new issue</a>
+        <a href="https://github.com/AtlassianPS/AtlassianPS.Configuration/issues"><img src="https://img.shields.io/github/issues-raw/AtlassianPS/AtlassianPS.Configuration.svg?maxAge=2592000" alt="Open issues for AtlassianPS.Configuration"></a>
+    </article>
+    <article class="project-issue-card">
+        <h3>AtlassianPS.github.io</h3>
+        <a href="https://github.com/AtlassianPS/AtlassianPS.github.io/issues/new">Open a new issue</a>
+        <a href="https://github.com/AtlassianPS/AtlassianPS.github.io/issues"><img src="https://img.shields.io/github/issues-raw/AtlassianPS/AtlassianPS.github.io.svg?maxAge=2592000" alt="Open issues for AtlassianPS.github.io"></a>
+    </article>
+    <article class="project-issue-card">
+        <h3>ConfluencePS</h3>
+        <a href="https://github.com/AtlassianPS/ConfluencePS/issues/new">Open a new issue</a>
+        <a href="https://github.com/AtlassianPS/ConfluencePS/issues"><img src="https://img.shields.io/github/issues-raw/AtlassianPS/ConfluencePS.svg?maxAge=2592000" alt="Open issues for ConfluencePS"></a>
+    </article>
+    <article class="project-issue-card">
+        <h3>JiraAgilePS</h3>
+        <a href="https://github.com/AtlassianPS/JiraAgilePS/issues/new">Open a new issue</a>
+        <a href="https://github.com/AtlassianPS/JiraAgilePS/issues"><img src="https://img.shields.io/github/issues-raw/AtlassianPS/JiraAgilePS.svg?maxAge=2592000" alt="Open issues for JiraAgilePS"></a>
+    </article>
+    <article class="project-issue-card">
+        <h3>JiraPS</h3>
+        <a href="https://github.com/AtlassianPS/JiraPS/issues/new">Open a new issue</a>
+        <a href="https://github.com/AtlassianPS/JiraPS/issues"><img src="https://img.shields.io/github/issues-raw/AtlassianPS/JiraPS.svg?maxAge=2592000" alt="Open issues for JiraPS"></a>
+    </article>
+</div>
 
 Legacy modules such as `AtlassianPS`, `BitbucketPS`, and `HipChatPS` are not active documentation targets on this website.
 Use their GitHub repositories directly if you need historical source or issue context.
diff --git a/docs/index.md b/docs/index.md
index 137c5b3..51b1a49 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,8 +4,69 @@ hide: true
 ---
 # Documentation
 
-Here you will find an overview of the documentation section of this site.
+{% assign activeModules = site.data.modules | where: "status", "active" %}
 
-Please help us improve this page.
+Use these docs to install AtlassianPS modules, connect to Atlassian products, and find command reference material.
 
-Use the menu above to find what you are looking for.
+<div class="docs-home">
+    <section class="docs-home-section docs-home-start">
+        <article>
+            <span>Start here</span>
+            <h2>Install and run your first command</h2>
+            <p>Use the quick start when you want the shortest path from a fresh PowerShell session to a working AtlassianPS command.</p>
+            <a href="quick-start.html">Open Quick Start</a>
+        </article>
+        <article>
+            <span>Choose a module</span>
+            <h2>Find the right tool</h2>
+            <p>Compare active modules, source repositories, documentation, and PowerShell Gallery packages.</p>
+            <a href="/module/">Browse Modules</a>
+        </article>
+    </section>
+
+    <section class="docs-home-section">
+        <div class="docs-home-heading">
+            <span>Reference</span>
+            <h2>Module documentation</h2>
+        </div>
+        <div class="docs-module-grid">
+{% for module in activeModules %}
+            <article>
+                <h3><a href="{{ module.docs }}">{{ module.name }}</a></h3>
+                <p>{{ module.description }}</p>
+                <div>
+                    <a href="{{ module.docs }}">Docs</a>
+                    <a href="{{ module.path }}">Module page</a>
+                    <a href="{{ module.gallery }}">Gallery</a>
+                </div>
+            </article>
+{% endfor %}
+        </div>
+    </section>
+
+    <section class="docs-home-section docs-home-paths">
+        <div class="docs-home-heading">
+            <span>Common paths</span>
+            <h2>What are you trying to do?</h2>
+        </div>
+        <div>
+            <a href="JiraPS/">Automate Jira issues and administration</a>
+            <a href="ConfluencePS/">Automate Confluence pages and spaces</a>
+            <a href="AtlassianPS.Configuration/">Share Atlassian server configuration</a>
+            <a href="JiraAgilePS/">Work with Jira Agile resources</a>
+        </div>
+    </section>
+
+    <section class="docs-home-section docs-home-community">
+        <article>
+            <h2>Contribute to the docs</h2>
+            <p>Report issues, improve examples, or submit fixes through the contributing guide.</p>
+            <a href="Contributing/">Read Contributing Guide</a>
+        </article>
+        <article>
+            <h2>Browse examples</h2>
+            <p>Use the gallery for practical snippets and community-submitted automation ideas.</p>
+            <a href="Gallery/">Open Gallery</a>
+        </article>
+    </section>
+</div>
diff --git a/docs/quick-start.md b/docs/quick-start.md
new file mode 100644
index 0000000..35d6c68
--- /dev/null
+++ b/docs/quick-start.md
@@ -0,0 +1,72 @@
+---
+layout: documentation
+title: Quick Start
+---
+# Quick Start
+
+This page shows the shortest path from a fresh PowerShell session to a working AtlassianPS command.
+
+## 1. Choose a module
+
+Install the module that matches the product you want to automate.
+
+```powershell
+Install-Module JiraPS -Scope CurrentUser
+Install-Module ConfluencePS -Scope CurrentUser
+Install-Module JiraAgilePS -Scope CurrentUser
+```
+
+Use `AtlassianPS.Configuration` when you want shared server configuration across AtlassianPS modules.
+It is installed automatically as a dependency of the product modules.
+
+## 2. Import the module
+
+```powershell
+Import-Module JiraPS
+```
+
+Replace `JiraPS` with `ConfluencePS` or `JiraAgilePS` as needed.
+
+## 3. Configure the server
+
+For JiraPS, point the module at your Jira site.
+
+```powershell
+Set-JiraConfigServer -Server 'https://jira.example.com'
+```
+
+For other modules, see the module-specific docs linked below.
+
+## 4. Authenticate
+
+Start with an explicit credential while you are learning the module.
+
+```powershell
+$credential = Get-Credential
+Get-JiraIssue -Issue 'PROJ-123' -Credential $credential
+```
+
+If you run many commands against the same server, review the module's session documentation.
+
+## 5. Find commands
+
+PowerShell can discover commands after importing a module.
+
+```powershell
+Get-Command -Module JiraPS
+Get-Help Get-JiraIssue -Full
+```
+
+You can also browse the online command reference:
+
+- [JiraPS commands](JiraPS/commands/)
+- [ConfluencePS commands](ConfluencePS/commands/)
+- [JiraAgilePS commands](JiraAgilePS/commands/)
+- [AtlassianPS.Configuration commands](AtlassianPS.Configuration/commands/)
+
+## Next steps
+
+- Use [JiraPS](JiraPS/) for Jira issue, project, user, version, and workflow automation.
+- Use [ConfluencePS](ConfluencePS/) for Confluence page and space automation.
+- Use [JiraAgilePS](JiraAgilePS/) for Jira Agile boards, sprints, and related resources.
+- Use [AtlassianPS.Configuration](AtlassianPS.Configuration/) to share Atlassian server configuration.
diff --git a/modules/AtlassianPS.Configuration b/modules/AtlassianPS.Configuration
index 555e8a3..3cd7574 160000
--- a/modules/AtlassianPS.Configuration
+++ b/modules/AtlassianPS.Configuration
@@ -1 +1 @@
-Subproject commit 555e8a3300a12e03b1d9c494a874fe21fe9bbccf
+Subproject commit 3cd7574072efb71f72c8fbb2d36923b1b8a92ecb
diff --git a/modules/ConfluencePS b/modules/ConfluencePS
index adb0628..e04e4ab 160000
--- a/modules/ConfluencePS
+++ b/modules/ConfluencePS
@@ -1 +1 @@
-Subproject commit adb06280d9e0fc43267841174a82d1c88b1725d7
+Subproject commit e04e4abcd867c57e4e1b0c5b840ec5d0082475c6
diff --git a/modules/JiraAgilePS b/modules/JiraAgilePS
index ce33340..3e195d8 160000
--- a/modules/JiraAgilePS
+++ b/modules/JiraAgilePS
@@ -1 +1 @@
-Subproject commit ce3334097716b9dda3e3ed91afba809e2b1773ef
+Subproject commit 3e195d893eb034fcce83f9648a551ed2d088abae
diff --git a/modules/JiraPS b/modules/JiraPS
index 93f2195..ec414bb 160000
--- a/modules/JiraPS
+++ b/modules/JiraPS
@@ -1 +1 @@
-Subproject commit 93f21956730ea89910763fe302dce805610a1ea2
+Subproject commit ec414bb03b2be8c7251251d5ed83afcf6ec8949a
diff --git a/pages/archive.html b/pages/archive.html
index 95b7ab0..5889fd1 100644
--- a/pages/archive.html
+++ b/pages/archive.html
@@ -17,9 +17,9 @@
     <article id="{{post.title}}" class="container post item col-10 ml-auto mr-auto">
         <div class="row">
             <div class="col-3 ml-auto article-thumb text-center">
-                <a href="#"> <!-- href="{{ categoryIcon.name | prepend: site.baseurl }}" -->
+                <span class="archive-category-icon">
                     <i class="fa {{categoryIcon.icon}} fa-5x {{categoryIcon.class}}"></i>
-                </a>
+                </span>
             </div>
             <div class="col-7 mr-auto">
                 <div class="article-meta row">
diff --git a/pages/module.md b/pages/module.md
index b03282c..f234048 100644
--- a/pages/module.md
+++ b/pages/module.md
@@ -2,36 +2,50 @@
 layout:    page
 title:     Modules
 permalink: /module/
+page_class: module-page
 ---
 
 # Modules
 
-AtlassianPS maintains PowerShell modules for Atlassian products and shared AtlassianPS configuration.
+AtlassianPS maintains PowerShell modules for Atlassian products and related repositories for project coordination.
 
 {% assign activeModules = site.data.modules | where: "status", "active" %}
 {% assign otherRepositories = site.data.modules | where: "status", "repository" %}
 
 ## Active modules
 
-<div class="row module-wrapper">
+<div class="module-directory">
+    <div class="module-directory-header" aria-hidden="true">
+        <span>Module</span>
+        <span>Install</span>
+        <span>Stats</span>
+        <span>Links</span>
+    </div>
 {% for module in activeModules %}
-    <div class="module item col-12 col-md-6">
-        <div class="module-item card h-100">
-            <div class="card-body">
-                <a class="link" href="{{ module.path }}">
-                    <img src="/assets/img/{{ module.name }}.png" class="logo img-responsive" alt="{{ module.name }}" />
-                    <h2 class="item-title h3">{{ module.name }}</h2>
-                </a>
+    <article class="module-directory-card">
+        <div class="module-summary">
+            <img src="/assets/img/{{ module.name }}.png" class="logo img-responsive" alt="{{ module.name }}" />
+            <div>
+                <h2 class="item-title h3"><a href="{{ module.path }}">{{ module.name }}</a></h2>
                 <p>{{ module.description }}</p>
-                <p>
-                    <a class="btn btn-square btn-outline" href="{{ module.path }}">Module details</a>
-                    {% if module.docs %}<a class="btn btn-square btn-outline" href="{{ module.docs }}">Documentation</a>{% endif %}
-                    <a class="btn btn-square btn-outline" href="{{ module.github }}">Source code</a>
-                    {% if module.gallery %}<a class="btn btn-square btn-outline" href="{{ module.gallery }}">PowerShell Gallery</a>{% endif %}
-                </p>
             </div>
         </div>
-    </div>
+        {% if module.dependency %}
+        <code>Installed as a dependency</code>
+        {% else %}
+        <code>Install-Module {{ module.name }}</code>
+        {% endif %}
+        <div class="module-directory-stats" aria-label="{{ module.name }} project statistics">
+            <img src="https://img.shields.io/github/stars/AtlassianPS/{{ module.name }}?style=flat-square&label=Stars" alt="{{ module.name }} GitHub stars" />
+            <img src="https://img.shields.io/powershellgallery/dt/{{ module.name }}?style=flat-square&label=Downloads" alt="{{ module.name }} PowerShell Gallery downloads" />
+        </div>
+        <div class="module-directory-links">
+            <a href="{{ module.path }}">Details</a>
+            {% if module.docs %}<a href="{{ module.docs }}">Docs</a>{% endif %}
+            <a href="{{ module.github }}">Source</a>
+            {% if module.gallery %}<a href="{{ module.gallery }}">Gallery</a>{% endif %}
+        </div>
+    </article>
 {% endfor %}
 </div>
 
@@ -39,7 +53,7 @@ AtlassianPS maintains PowerShell modules for Atlassian products and shared Atlas
 
 These repositories are part of AtlassianPS, but they are not published modules on this website.
 
-<ul>
+<ul class="repository-list">
 {% for module in otherRepositories %}
     <li><a href="{{ module.github }}">{{ module.name }}</a>: {{ module.description }}</li>
 {% endfor %}

From e2d6787638082ec46664e723b99d19fca169ea0d Mon Sep 17 00:00:00 2001
From: Oliver Lipkau <oliver@lipkau.net>
Date: Mon, 1 Jun 2026 09:06:38 +0200
Subject: [PATCH 2/2] Use released module documentation

---
 docs/released-doc-redirects.md                   |  7 +++++++
 .../atlassianps-configuration-classes-index.md   | 16 ++++++++++++++++
 ...lassianps-configuration-enumerations-index.md | 16 ++++++++++++++++
 ...onfiguration-export-atlassianconfiguration.md |  6 ++++++
 ...ssianps-configuration-export-configuration.md |  6 ++++++
 .../confluenceps-classes-index.md                | 16 ++++++++++++++++
 .../jiraps-add-jiraissueattachmentfile.md        |  6 ++++++
 .../jiraps-get-jiraattachmentfile.md             |  6 ++++++
 .../jiraps-remove-jiraissueattachmentfile.md     |  6 ++++++
 modules/AtlassianPS.Configuration                |  2 +-
 modules/ConfluencePS                             |  2 +-
 modules/JiraPS                                   |  2 +-
 12 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 docs/released-doc-redirects.md
 create mode 100644 docs/released-doc-redirects/atlassianps-configuration-classes-index.md
 create mode 100644 docs/released-doc-redirects/atlassianps-configuration-enumerations-index.md
 create mode 100644 docs/released-doc-redirects/atlassianps-configuration-export-atlassianconfiguration.md
 create mode 100644 docs/released-doc-redirects/atlassianps-configuration-export-configuration.md
 create mode 100644 docs/released-doc-redirects/confluenceps-classes-index.md
 create mode 100644 docs/released-doc-redirects/jiraps-add-jiraissueattachmentfile.md
 create mode 100644 docs/released-doc-redirects/jiraps-get-jiraattachmentfile.md
 create mode 100644 docs/released-doc-redirects/jiraps-remove-jiraissueattachmentfile.md

diff --git a/docs/released-doc-redirects.md b/docs/released-doc-redirects.md
new file mode 100644
index 0000000..abfd613
--- /dev/null
+++ b/docs/released-doc-redirects.md
@@ -0,0 +1,7 @@
+---
+hide: true
+---
+
+Release-tag documentation can contain historical command links. The files in
+`docs/released-doc-redirects/` keep those published docs navigable without
+modifying released submodule content.
diff --git a/docs/released-doc-redirects/atlassianps-configuration-classes-index.md b/docs/released-doc-redirects/atlassianps-configuration-classes-index.md
new file mode 100644
index 0000000..9684dcc
--- /dev/null
+++ b/docs/released-doc-redirects/atlassianps-configuration-classes-index.md
@@ -0,0 +1,16 @@
+---
+layout: documentation
+title: AtlassianPS.Configuration classes
+permalink: /docs/AtlassianPS.Configuration/classes/
+hide: true
+---
+# AtlassianPS.Configuration Classes
+
+<div class="reference-index">
+{% assign pages = site.pages | where_exp: "p", "p.url contains '/docs/AtlassianPS.Configuration/classes/'" | sort: "name" %}
+{% for p in pages %}
+{% unless p.url == page.url %}
+    <a href="{{ p.url }}">{{ p.title | default: p.name | remove: '.html' | remove: '.md' }}</a>
+{% endunless %}
+{% endfor %}
+</div>
diff --git a/docs/released-doc-redirects/atlassianps-configuration-enumerations-index.md b/docs/released-doc-redirects/atlassianps-configuration-enumerations-index.md
new file mode 100644
index 0000000..a680739
--- /dev/null
+++ b/docs/released-doc-redirects/atlassianps-configuration-enumerations-index.md
@@ -0,0 +1,16 @@
+---
+layout: documentation
+title: AtlassianPS.Configuration enumerations
+permalink: /docs/AtlassianPS.Configuration/enumerations/
+hide: true
+---
+# AtlassianPS.Configuration Enumerations
+
+<div class="reference-index">
+{% assign pages = site.pages | where_exp: "p", "p.url contains '/docs/AtlassianPS.Configuration/enumerations/'" | sort: "name" %}
+{% for p in pages %}
+{% unless p.url == page.url %}
+    <a href="{{ p.url }}">{{ p.title | default: p.name | remove: '.html' | remove: '.md' }}</a>
+{% endunless %}
+{% endfor %}
+</div>
diff --git a/docs/released-doc-redirects/atlassianps-configuration-export-atlassianconfiguration.md b/docs/released-doc-redirects/atlassianps-configuration-export-atlassianconfiguration.md
new file mode 100644
index 0000000..9c469f4
--- /dev/null
+++ b/docs/released-doc-redirects/atlassianps-configuration-export-atlassianconfiguration.md
@@ -0,0 +1,6 @@
+---
+layout: redirect
+permalink: /docs/AtlassianPS.Configuration/Export-AtlassianConfiguration
+redirect_to: https://github.com/PoshCode/Configuration#how-it-works
+hide: true
+---
diff --git a/docs/released-doc-redirects/atlassianps-configuration-export-configuration.md b/docs/released-doc-redirects/atlassianps-configuration-export-configuration.md
new file mode 100644
index 0000000..23ca3c0
--- /dev/null
+++ b/docs/released-doc-redirects/atlassianps-configuration-export-configuration.md
@@ -0,0 +1,6 @@
+---
+layout: redirect
+permalink: /docs/AtlassianPS.Configuration/commands/Export-Configuration/
+redirect_to: /docs/AtlassianPS.Configuration/commands/Get-Configuration/
+hide: true
+---
diff --git a/docs/released-doc-redirects/confluenceps-classes-index.md b/docs/released-doc-redirects/confluenceps-classes-index.md
new file mode 100644
index 0000000..3b24e27
--- /dev/null
+++ b/docs/released-doc-redirects/confluenceps-classes-index.md
@@ -0,0 +1,16 @@
+---
+layout: documentation
+title: ConfluencePS classes
+permalink: /docs/ConfluencePS/classes/
+hide: true
+---
+# ConfluencePS Classes
+
+<div class="reference-index">
+{% assign pages = site.pages | where_exp: "p", "p.url contains '/docs/ConfluencePS/classes/'" | sort: "name" %}
+{% for p in pages %}
+{% unless p.url == page.url %}
+    <a href="{{ p.url }}">{{ p.title | default: p.name | remove: '.html' | remove: '.md' }}</a>
+{% endunless %}
+{% endfor %}
+</div>
diff --git a/docs/released-doc-redirects/jiraps-add-jiraissueattachmentfile.md b/docs/released-doc-redirects/jiraps-add-jiraissueattachmentfile.md
new file mode 100644
index 0000000..08f43f8
--- /dev/null
+++ b/docs/released-doc-redirects/jiraps-add-jiraissueattachmentfile.md
@@ -0,0 +1,6 @@
+---
+layout: redirect
+permalink: /docs/JiraPS/commands/Add-JiraIssueAttachmentFile/
+redirect_to: /docs/JiraPS/commands/Add-JiraIssueAttachment/
+hide: true
+---
diff --git a/docs/released-doc-redirects/jiraps-get-jiraattachmentfile.md b/docs/released-doc-redirects/jiraps-get-jiraattachmentfile.md
new file mode 100644
index 0000000..241e5af
--- /dev/null
+++ b/docs/released-doc-redirects/jiraps-get-jiraattachmentfile.md
@@ -0,0 +1,6 @@
+---
+layout: redirect
+permalink: /docs/JiraPS/commands/Get-JiraAttachmentFile/
+redirect_to: /docs/JiraPS/commands/Get-JiraIssueAttachmentFile/
+hide: true
+---
diff --git a/docs/released-doc-redirects/jiraps-remove-jiraissueattachmentfile.md b/docs/released-doc-redirects/jiraps-remove-jiraissueattachmentfile.md
new file mode 100644
index 0000000..a50d169
--- /dev/null
+++ b/docs/released-doc-redirects/jiraps-remove-jiraissueattachmentfile.md
@@ -0,0 +1,6 @@
+---
+layout: redirect
+permalink: /docs/JiraPS/commands/Remove-JiraIssueAttachmentFile/
+redirect_to: /docs/JiraPS/commands/Remove-JiraIssueAttachment/
+hide: true
+---
diff --git a/modules/AtlassianPS.Configuration b/modules/AtlassianPS.Configuration
index 3cd7574..119a891 160000
--- a/modules/AtlassianPS.Configuration
+++ b/modules/AtlassianPS.Configuration
@@ -1 +1 @@
-Subproject commit 3cd7574072efb71f72c8fbb2d36923b1b8a92ecb
+Subproject commit 119a891c63d3ad7a33ed6981ebbbbe749c1a880f
diff --git a/modules/ConfluencePS b/modules/ConfluencePS
index e04e4ab..adb0628 160000
--- a/modules/ConfluencePS
+++ b/modules/ConfluencePS
@@ -1 +1 @@
-Subproject commit e04e4abcd867c57e4e1b0c5b840ec5d0082475c6
+Subproject commit adb06280d9e0fc43267841174a82d1c88b1725d7
diff --git a/modules/JiraPS b/modules/JiraPS
index ec414bb..93f2195 160000
--- a/modules/JiraPS
+++ b/modules/JiraPS
@@ -1 +1 @@
-Subproject commit ec414bb03b2be8c7251251d5ed83afcf6ec8949a
+Subproject commit 93f21956730ea89910763fe302dce805610a1ea2
