Upgrade mkdocs-material

CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [PEP 440](https://www.python.org/dev/peps/pep-0440/) 
 and uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0]
+
+### Changed
+- Upgraded `mkdocs-material` to v9.4.2. We have updated our templates in [asf_theme/partials](./asf_theme/partials) to match the [upstream versions](https://github.com/squidfunk/mkdocs-material/tree/9.4.2/src/templates/partials) as closely as possible. This introduces breaking changes. In particular:
+    - If you want a footer, you should make the following change to your website's `mkdocs.yml` file:
+      ```diff
+      theme:
+        features:
+      +    - navigation.footer
+      ```
+    - You should carefully review your website to confirm that everything still renders and functions as expected.
+    - If anything does not work as expected, you may want to read the [`mkdocs-material` upgrade guide](https://squidfunk.github.io/mkdocs-material/upgrade/) starting at [Upgrading from 6.x to 7.x](https://squidfunk.github.io/mkdocs-material/upgrade/#upgrading-from-6x-to-7x) for any other important changes that may apply to your website.
+
+### Fixed
+- Fixed <https://github.com/ASFHyP3/mkdocs-asf-theme/issues/27> by upgrading `mkdocs-material`.
 
 ## [0.2.4](https://github.com/ASFHyP3/mkdocs-asf-theme/compare/v0.2.3...v0.2.4)
 
@@ -17,7 +32,6 @@ and uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Fixed
 - ASF logo and background map now appear correctly in "Project" or repo level sites
 
-
 ## [0.2.2](https://github.com/ASFHyP3/mkdocs-asf-theme/compare/v0.2.1...v0.2.2)
 
 ### Changed

asf_theme/assets/stylesheets/asf.css

@@ -11,29 +11,38 @@ a {
 }
 
 .md-header, .md-footer {
-  background: rgb(101, 102, 92);
-  background: linear-gradient(180deg, rgba(101, 102, 92, 1) 0%, rgba(106, 106, 106, 1) 100%);
   box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.5);
   transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
-
 }
 
-.md-header-nav__button.md-logo img {
-  height: 2.0rem;
-  width: auto;
-  display: inline-block;
-  margin-top: -7px;
+.md-header {
+  background: rgb(101, 102, 92);
+  background: linear-gradient(180deg, rgba(101, 102, 92, 1) 0%, rgba(106, 106, 106, 1) 100%);
 }
 
-.md-footer-nav {
+.md-footer {
+  background: rgb(106, 106, 106);
   background-image: url("../images/map.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
-  min-height: 510px;
+  min-height: 574px;
   border-top: 58px solid #ffcd00;
 }
 
+.md-header__button.md-logo img {
+  height: 2.0rem;
+  width: auto;
+  display: inline-block;
+  margin-top: -7px;
+}
+
+.md-footer-meta.md-typeset {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
 .md-footer-container {
   display: flex;
   flex-direction: row;
@@ -82,14 +91,28 @@ a {
   background-color: black;
 }
 
-.md-footer-copyright-link {
+.md-copyright-link {
   color: #1bb0ce !important;
 }
 
-.md-footer-copyright {
+.md-copyright {
   margin-left: 0;
 }
 
+.md-nav__title {
+  color: black;
+}
+
+.md-nav--primary .md-nav__title {
+  background: #f8f8f8;
+  box-shadow: none;
+}
+
+.md-nav--secondary .md-nav__title {
+  background: #f8f8f8;
+  box-shadow: none;
+}
+
 .expert-rec-search {
   margin-top: 10px;
 }

asf_theme/partials/logo.html → asf_theme/partials/copyright.html

@@ -1,5 +1,5 @@
 <!--
-  Copyright (c) 2016-2020 Martin Donath <[email protected]>
+  Copyright (c) 2016-2023 Martin Donath <[email protected]>
 
   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to
@@ -20,9 +20,26 @@
   IN THE SOFTWARE.
 -->
 
-<!-- Logo -->
-{% if config.theme.logo %}
-  <img src="{{ config.theme.logo | url }}" alt="logo" />
-{% elif config.theme.icon.logo %}
-  {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
-{% endif %}
+<!-- Adapted from https://github.com/squidfunk/mkdocs-material/blob/9.4.2/src/templates/partials/copyright.html -->
+
+<!-- Copyright and theme information -->
+<div class="md-copyright">
+  <div class="md-copyright__highlight">
+    {% if config.copyright or config.theme.copyright %}
+      &copy; <span id="copyright-year"></span>
+      <script type="text/javascript">
+          current_year = new Date().getFullYear();
+          document.getElementById("copyright-year").innerHTML=current_year;
+      </script>
+      {{ config.copyright if config.copyright else config.theme.copyright}}
+    {% endif %}
+    <!-- ASF non-discrimination disclaimer-->
+    &nbsp;&nbsp;
+    <a href="https://www.alaska.edu/nondiscrimination"
+       target="_blank"
+       class="md-copyright-link">
+      UA is an AA/EO employer and educational institution and prohibits
+      illegal discrimination against any individual
+    </a>
+  </div>
+</div>

asf_theme/partials/footer.html

@@ -1,5 +1,5 @@
 <!--
-  Copyright (c) 2016-2020 Martin Donath <[email protected]>
+  Copyright (c) 2016-2023 Martin Donath <[email protected]>
 
   Permission is hereby granted, free of charge, to any person obtaining a copy
   of this software and associated documentation files (the "Software"), to
@@ -20,30 +20,40 @@
   IN THE SOFTWARE.
 -->
 
-{% import "partials/language.html" as lang with context %}
+<!-- Adapted from https://github.com/squidfunk/mkdocs-material/blob/9.4.2/src/templates/partials/footer.html -->
 
-<!-- Application footer -->
+<!-- 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">
+  {% if "navigation.footer" in features %}
+    {% if page.previous_page or page.next_page %}
+      {% if page.meta and page.meta.hide %}
+        {% set hidden = "hidden" if "footer" in page.meta.hide %}
+      {% endif %}
       <nav
-        class="md-footer-nav__inner md-grid"
-        aria-label="{{ lang.t('footer.title') }}"
+        class="md-footer__inner md-grid"
+        aria-label="{{ lang.t('footer') }}"
+        {{ hidden }}
       >
 
         <!-- Link to previous page -->
         {% if page.previous_page %}
-          <a href="{{ page.previous_page.url | url }}" 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" %}
+          {% set direction = lang.t("footer.previous") %}
+          <a
+            href="{{ page.previous_page.url | url }}"
+            class="md-footer__link md-footer__link--prev"
+            aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
+          >
+            <div class="md-footer__button md-icon">
+              {% set icon = config.theme.icon.previous or "material/arrow-left" %}
+              {% include ".icons/" ~ icon ~ ".svg" %}
             </div>
-            <div class="md-footer-nav__title">
+            <div class="md-footer__title">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
               <div class="md-ellipsis">
-                <span class="md-footer-nav__direction">
-                  {{ lang.t("footer.previous") }}
-                </span>
                 {{ page.previous_page.title }}
               </div>
             </div>
@@ -52,22 +62,28 @@
 
         <!-- Link to next page -->
         {% if page.next_page %}
-          <a href="{{ page.next_page.url | url }}" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
-            <div class="md-footer-nav__title">
+          {% set direction = lang.t("footer.next") %}
+          <a
+            href="{{ page.next_page.url | url }}"
+            class="md-footer__link md-footer__link--next"
+            aria-label="{{ direction }}: {{ page.next_page.title | e }}"
+          >
+            <div class="md-footer__title">
+              <span class="md-footer__direction">
+                {{ direction }}
+              </span>
               <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 class="md-footer__button md-icon">
+              {% set icon = config.theme.icon.next or "material/arrow-right" %}
+              {% include ".icons/" ~ icon ~ ".svg" %}
             </div>
           </a>
         {% endif %}
       </nav>
-
+    {% endif %}
       <!-- ASF Footer information-->
       <div class="md-grid">
         <div class="md-footer-container md-grid">
@@ -104,34 +120,12 @@ <h1>Contact Info</h1>
           </div>
         </div>
       </div>
-    </div>
   {% 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">
-        <div class="md-footer-copyright__highlight">
-          {% if config.copyright or config.theme.copyright %}
-            &copy; <span id="copyright-year"></span>
-            <script type="text/javascript">
-                current_year = new Date().getFullYear();
-                document.getElementById("copyright-year").innerHTML=current_year;
-            </script>
-            {{ config.copyright if config.copyright else config.theme.copyright}}
-          {% endif %}
-          <!-- ASF non-discrimination disclaimer-->
-          &nbsp;&nbsp;
-          <a href="https://www.alaska.edu/nondiscrimination"
-             target="_blank"
-             class="md-footer-copyright-link">
-            UA is an AA/EO employer and educational institution and prohibits
-            illegal discrimination against any individual
-          </a>
-        </div>
-      </div>
+      {% include "partials/copyright.html" %}
 
       <!-- Social links -->
       {% include "partials/social.html" %}