From ab4294f4d6a4a7770640aaceab5a3e20fe0bb556 Mon Sep 17 00:00:00 2001
From: Tyler Mills <tylerssn@users.noreply.github.com>
Date: Sat, 27 Feb 2021 23:02:44 -0500
Subject: [PATCH] fix(docs): Fixes UI (#527)

---
 docs/assets/stylesheets/home_overrides.css | 101 +++++++++++++++++++
 docs/overrides/home.html                   | 111 ++-------------------
 docs/overrides/main.html                   |   5 -
 docs/overrides/partials/footer.html        | 111 ++++++---------------
 docs/overrides/partials/header.html        |  83 ---------------
 docs/readme.md                             |  10 ++
 6 files changed, 151 insertions(+), 270 deletions(-)
 create mode 100644 docs/assets/stylesheets/home_overrides.css
 delete mode 100644 docs/overrides/partials/header.html
 create mode 100644 docs/readme.md

diff --git a/docs/assets/stylesheets/home_overrides.css b/docs/assets/stylesheets/home_overrides.css
new file mode 100644
index 000000000..713c49eef
--- /dev/null
+++ b/docs/assets/stylesheets/home_overrides.css
@@ -0,0 +1,101 @@
+/* Remove spacing, as we cannot hide it completely */
+.md-main__inner {
+  margin: 0;
+}
+
+/* Hide main content for now */
+.md-content {
+  display: none;
+}
+
+/* Hide table of contents */
+@media screen and (min-width: 60em) {
+  .md-sidebar--secondary {
+    display: none;
+  }
+}
+
+/* Hide navigation */
+@media screen and (min-width: 76.25em) {
+  .md-sidebar--primary {
+    display: none;
+  }
+}
+
+.md-main {
+  background: var(--md-default-fg-color);
+}
+
+.md-typeset h1 {
+  color: var(--md-default-bg-color--light);
+}
+
+.tx-container {
+  background: var(--md-default-fg-color);
+  padding-top: 1rem;
+}
+
+.tx-hero {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  flex-direction: column;
+  min-height: 400px;
+  margin: 0 0.8rem;
+}
+
+.tx-hero div {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.tx-hero__image {
+  text-align: center;
+}
+
+.tx-hero__content {
+  text-align: center;
+}
+
+.tx-hero__content .md-button {
+  background-color: transparent;
+  color: var(--md-primary-bg-color--light);
+  border-color: var(--md-primary-bg-color--light);
+}
+
+.tx-hero__content .md-button--primary {
+  background-color: var(--muo-gold);
+  color: var(--md-primary-fg-color);
+  border-color: transparent;
+}
+
+.tx-hero__content .md-button:hover {
+  border-color: transparent;
+  color: var(--md-primary-fg-color);
+  background-color: var(--md-primary-bg-color);
+}
+
+.tx-hero__content .md-button--primary:hover {
+  border-color: var(--md-primary-bg-color--light);
+}
+
+/*@media screen and (max-width: 60em)*/
+/*{*/
+/*  .tx-hero__image img {*/
+/*    max-width: 64px;*/
+/*  }*/
+/*}*/
+
+@media screen and (max-width: 60em)
+{
+  .tx-hero__image img {
+    max-width: 128px;
+  }
+}
+
+@media screen and (min-width: 60em)
+{
+  .tx-hero__image img {
+    max-width: 200px;
+  }
+}
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
index 406173eb7..64153b7bf 100644
--- a/docs/overrides/home.html
+++ b/docs/overrides/home.html
@@ -1,113 +1,16 @@
 {% extends "main.html" %}
+{% block extrahead %}
+<!-- Extra stylesheets -->
+<link
+  rel="stylesheet"
+  href="{{ 'assets/stylesheets/home_overrides.css' | url }}"
+/>
+{% endblock %}
 
 <!-- Render hero under tabs -->
 {% block tabs %}
 {{ super() }}
 
-<style>
-  /* Remove spacing, as we cannot hide it completely */
-  .md-main__inner {
-    margin: 0;
-  }
-
-  /* Hide main content for now */
-  .md-content {
-    display: none;
-  }
-
-  /* Hide table of contents */
-  @media screen and (min-width: 60em) {
-    .md-sidebar--secondary {
-      display: none;
-    }
-  }
-
-  /* Hide navigation */
-  @media screen and (min-width: 76.25em) {
-    .md-sidebar--primary {
-      display: none;
-    }
-  }
-
-  .md-main {
-    background: var(--md-default-fg-color);
-  }
-
-  .md-typeset h1 {
-    color: var(--md-default-bg-color--light);
-  }
-
-  .tx-container {
-    background: var(--md-default-fg-color);
-    padding-top: 1rem;
-  }
-
-  .tx-hero {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    flex-direction: column;
-    min-height: 400px;
-    margin: 0 0.8rem;
-  }
-
-  .tx-hero div {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .tx-hero__image {
-    text-align: center;
-  }
-
-  .tx-hero__content {
-    text-align: center;
-  }
-
-  .tx-hero__content .md-button {
-    background-color: transparent;
-    color: var(--md-primary-bg-color--light);
-    border-color: var(--md-primary-bg-color--light);
-  }
-
-  .tx-hero__content .md-button--primary {
-    background-color: var(--muo-gold);
-    color: var(--md-primary-fg-color);
-    border-color: transparent;
-  }
-
-  .tx-hero__content .md-button:hover {
-    border-color: transparent;
-    color: var(--md-primary-fg-color);
-    background-color: var(--md-primary-bg-color);
-  }
-
-  .tx-hero__content .md-button--primary:hover {
-    border-color: var(--md-primary-bg-color--light);
-  }
-
-  /*@media screen and (max-width: 60em)*/
-  /*{*/
-  /*  .tx-hero__image img {*/
-  /*    max-width: 64px;*/
-  /*  }*/
-  /*}*/
-
-  @media screen and (max-width: 60em)
-  {
-    .tx-hero__image img {
-      max-width: 128px;
-    }
-  }
-
-  @media screen and (min-width: 60em)
-  {
-    .tx-hero__image img {
-      max-width: 200px;
-    }
-  }
-</style>
-
 <!-- Hero for landing page -->
 <section class="tx-container">
   <div class="md-grid md-typeset">
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index a22023f94..e49ce3a10 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -30,11 +30,6 @@
 <meta name="twitter:description" content="{{ config.site_description }}" />
 <meta name="twitter:image" content="{{ image }}" />
 
-<!-- Extra stylesheets -->
-<link
-  rel="stylesheet"
-  href="{{ 'assets/stylesheets/overrides.css' | url }}"
-/>
 {% endblock %}
 
 <!-- Content -->
diff --git a/docs/overrides/partials/footer.html b/docs/overrides/partials/footer.html
index b28b2a89e..d160b2f2c 100644
--- a/docs/overrides/partials/footer.html
+++ b/docs/overrides/partials/footer.html
@@ -1,87 +1,44 @@
-<!--
-  Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to
-  deal in the Software without restriction, including without limitation the
-  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-  sell copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
-  IN THE SOFTWARE.
--->
-
+{#-
+This file was automatically generated - do not edit
+-#}
 {% import "partials/language.html" as lang with context %}
-
-<!-- Application footer -->
 <footer class="md-footer">
-
-  <!-- Link to previous and/or next page -->
   {% if page.previous_page or page.next_page %}
-  <div class="md-footer-nav">
-    <nav
-      class="md-footer-nav__inner md-grid"
-      aria-label="{{ lang.t('footer.title') }}"
-    >
-
-      <!-- Link to previous page -->
-      {% if page.previous_page %}
-      <a
-        href="{{ page.previous_page.url | url }}"
-        title="{{ page.previous_page.title | striptags }}"
-        class="md-footer-nav__link md-footer-nav__link--prev"
-        rel="prev"
-      >
-        <div class="md-footer-nav__button md-icon">
-          {% include ".icons/material/arrow-left.svg" %}
+  <nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
+    {% if page.previous_page %}
+    <a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" rel="prev">
+      <div class="md-footer__button md-icon">
+        {% include ".icons/material/arrow-left.svg" %}
+      </div>
+      <div class="md-footer__title">
+        <div class="md-ellipsis">
+              <span class="md-footer__direction">
+                {{ lang.t("footer.previous") }}
+              </span>
+          {{ page.previous_page.title }}
         </div>
-        <div class="md-footer-nav__title">
-          <div class="md-ellipsis">
-                <span class="md-footer-nav__direction">
-                  {{ lang.t("footer.previous") }}
-                </span>
-            {{ page.previous_page.title }}
-          </div>
+      </div>
+    </a>
+    {% endif %}
+    {% if page.next_page %}
+    <a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" rel="next">
+      <div class="md-footer__title">
+        <div class="md-ellipsis">
+              <span class="md-footer__direction">
+                {{ lang.t("footer.next") }}
+              </span>
+          {{ page.next_page.title }}
         </div>
-      </a>
-      {% endif %}
-
-      <!-- Link to next page -->
-      {% if page.next_page %}
-      <a
-        href="{{ page.next_page.url | url }}"
-        title="{{ page.next_page.title | striptags }}"
-        class="md-footer-nav__link md-footer-nav__link--next"
-        rel="next"
-      >
-        <div class="md-footer-nav__title">
-          <div class="md-ellipsis">
-                <span class="md-footer-nav__direction">
-                  {{ lang.t("footer.next") }}
-                </span>
-            {{ page.next_page.title }}
-          </div>
-        </div>
-        <div class="md-footer-nav__button md-icon">
-          {% include ".icons/material/arrow-right.svg" %}
-        </div>
-      </a>
-      {% endif %}
-    </nav>
-  </div>
+      </div>
+      <div class="md-footer__button md-icon">
+        {% include ".icons/material/arrow-right.svg" %}
+      </div>
+    </a>
+    {% endif %}
+  </nav>
   {% endif %}
-
-  <!-- Further information -->
   <div class="md-footer-meta md-typeset">
     <div class="md-footer-meta__inner md-grid">
-
-      <!-- Copyright and theme information -->
       <div class="md-footer-copyright">
         {% if config.copyright %}
         <div class="md-footer-copyright__highlight">
@@ -89,8 +46,6 @@
         </div>
         {% endif %}
       </div>
-
-      <!-- Social links -->
       {% include "partials/social.html" %}
     </div>
   </div>
diff --git a/docs/overrides/partials/header.html b/docs/overrides/partials/header.html
deleted file mode 100644
index 7537eecf2..000000000
--- a/docs/overrides/partials/header.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!--
-  Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
-
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to
-  deal in the Software without restriction, including without limitation the
-  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-  sell copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
-  IN THE SOFTWARE.
--->
-
-<!-- Application header -->
-<header class="md-header" data-md-component="header">
-
-  <!-- Top-level navigation -->
-  <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
-
-    <!-- Link to home -->
-    <a
-      href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
-      title="{{ config.site_name }}"
-      class="md-header-nav__button md-logo"
-      aria-label="{{ config.site_name }}"
-    >
-      {% include "partials/logo.html" %}
-    </a>
-
-    <!-- Button to open drawer -->
-    <label class="md-header-nav__button md-icon" for="__drawer">
-      {% include ".icons/material/menu" ~ ".svg" %}
-    </label>
-
-    <!-- Header title -->
-    <div class="md-header-nav__title" data-md-component="header-title">
-      {% if config.site_name == page.title %}
-      <div class="md-header-nav__ellipsis md-ellipsis">
-        {{ config.site_name }}
-      </div>
-      {% else %}
-      <div class="md-header-nav__ellipsis">
-          <span class="md-header-nav__topic md-ellipsis">
-            {{ config.site_name }}
-          </span>
-        <span class="md-header-nav__topic md-ellipsis">
-            {% if page and page.meta and page.meta.title %}
-              {{ page.meta.title }}
-            {% else %}
-              {{ page.title }}
-            {% endif %}
-          </span>
-      </div>
-      {% endif %}
-    </div>
-
-    <!-- Button to open search dialogue -->
-    {% if "search" in config["plugins"] %}
-    <label class="md-header-nav__button md-icon" for="__search">
-      {% include ".icons/material/magnify.svg" %}
-    </label>
-
-    <!-- Search interface -->
-    {% include "partials/search.html" %}
-    {% endif %}
-
-    <!-- Repository containing source -->
-    {% if config.repo_url %}
-    <div class="md-header-nav__source">
-      {% include "partials/source.html" %}
-    </div>
-    {% endif %}
-  </nav>
-</header>
diff --git a/docs/readme.md b/docs/readme.md
new file mode 100644
index 000000000..fcc0f5972
--- /dev/null
+++ b/docs/readme.md
@@ -0,0 +1,10 @@
+# ModernUO Website
+
+## Development
+
+1. Install Python's `pip` package manager
+1. Install MkDocs: `pip install mkdocs`
+1. Install Required Extensions
+   * `pip install pymdown-extensions`
+   * `pip install mkdocs-material`
+1. Launch development server: `mkdocs`