docs: Change font and make it dark mode (#576)

docs/index.md

@@ -4,6 +4,8 @@ title: Getting Started
 description: Package management made easy
 ---
 
+![Pixi with magic wand](assets/pixi.webp)
+
 Pixi is a package management tool for developers.
 It allows the developer to install libraries and applications in a reproducible way.
 Use pixi cross-platform, on Windows, Mac and Linux.
@@ -13,7 +15,7 @@ Use pixi cross-platform, on Windows, Mac and Linux.
 To install `pixi` you can run the following command in your terminal:
 
 === "Linux & macOS"
-    ```shell
+    ```bash
     curl -fsSL https://pixi.sh/install.sh | bash
     ```
 

docs/overrides/partials/footer.html

@@ -0,0 +1,104 @@
+<!--
+  Copyright (c) 2016-2023 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.
+-->
+
+<!-- Footer -->
+<footer class="md-footer">
+    <!-- Link to previous and/or next page -->
+    {% 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__inner md-grid"
+          aria-label="{{ lang.t('footer') }}"
+          {{ hidden }}
+        >
+
+          <!-- Link to previous page -->
+          {% if page.previous_page %}
+            {% 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__title">
+                <span class="md-footer__direction">
+                  {{ direction }}
+                </span>
+                <div class="md-ellipsis">
+                  {{ page.previous_page.title }}
+                </div>
+              </div>
+            </a>
+          {% endif %}
+
+          <!-- Link to next page -->
+          {% if page.next_page %}
+            {% 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">
+                  {{ page.next_page.title }}
+                </div>
+              </div>
+              <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 %}
+    {% endif %}
+
+    <!-- Further information -->
+    <div class="md-footer-meta md-typeset">
+      <div class="md-footer-meta__inner md-grid">
+        {% include "partials/copyright.html" %}
+
+        <!-- prefix logo -->
+        <div class="md-footer-meta__item md-footer-meta__item--prefix-logo">
+            <a href="https://prefix.dev" target="_blank">
+                <img src="{{ 'assets/logo_dark.svg' | url }}" alt="">
+            </a>
+        </div>
+
+        <!-- Social links -->
+        {% if config.extra.social %}
+          {% include "partials/social.html" %}
+        {% endif %}
+      </div>
+    </div>
+  </footer>

docs/stylesheets/extra.css

@@ -1,5 +1,50 @@
-:root {
-  --md-primary-fg-color: #fabd0e;
-  --md-primary-fg-color--light: #ffe9ad;
-  --md-primary-fg-color--dark: #916a00;
+.md-header__topic {
+  font-family: 'Dosis', sans-serif;
+}
+
+
+.md-header__topic:first-child {
+  font-weight: normal;
+}
+
+.md-typeset h1 {
+  color: #ffec3d;
+}
+.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
+  font-family: 'Dosis', sans-serif;
+  font-weight: 500;
+  color: #ffec3d;
+}
+
+.md-typeset p {
+  /* kerning */
+  text-rendering: optimizeLegibility;
+}
+
+
+:root > * {
+  --md-code-hl-string-color: #ffec3d;
+}
+
+.md-header__button.md-logo {
+  padding: 0;
+  margin: 0;
+}
+
+.md-header__button.md-logo img, .md-header__button.md-logo svg {
+  height: 2.1rem;
+}
+
+[dir=ltr] .md-header__title {
+  margin-left: 0.5rem;
+}
+
+.md-footer-meta__item--prefix-logo {
+  height: 2rem;
+  margin: 0.5rem 0;
+  display: flex;
+}
+
+.md-footer-meta__item--prefix-logo img {
+  height: 100%;
 }