new website design

this is a trial run, it could very well get reverted

docs/index.md

@@ -12,17 +12,18 @@ hide:
 
 <div style="margin-top: -100px;"></div>
 
-<p align="center" style="max-width: 75%; margin: 0 auto; display: block;" markdown>
+<div style="max-width: 70%; margin: 0 auto; display: block;">
-![Alt text](assets/banner_dark@2x.png#only-light)
-![Alt text](assets/banner_light@2x.png#only-dark)
 
-A modern, <em>fully static, fast</em>, secure <em>fully proxied</em>, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages. Easily configured via YAML files or through docker label discovery.
+<img src="assets/banner_light@2x.png" alt="homepage" style="max-width: 100%; max-height: 175px; margin: 0 auto; display: block;" />
 
-![Alt text](assets/homepage_demo.png)
+<img src="assets/homepage_demo_clip.png" alt="homepage" style="max-width: 100%; margin: 0 auto; display: block;" />
 
-<p align="center">
+<p style="margin: 0 0 30px;">A modern, <em>fully static, fast</em>, secure <em>fully proxied</em>, highly customizable application dashboard with integrations for over 100 services and translations into multiple languages. Easily configured via YAML files or through docker label discovery.</p>
-  <a href="https://www.digitalocean.com/?refcode=df14bcb7c016&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%203.svg" alt="DigitalOcean Referral Badge" /></a>
+
-</p>
+</div>
-<p align="center">
+
-<em>Homepage builds are kindly powered by DigitalOcean.</em>
+<style>
-</p>
+  .md-header__source {
+    display: none;
+  }
+</style>

docs/more/coverage.md

@@ -0,0 +1,57 @@
+---
+title: Community Coverage
+description: Homepage has been covered by quite a few YouTube channels, here are some of them.
+---
+
+Homepage has been covered by quite a few YouTube channels, here are some of them. If you have a video you'd like to add, please open a PR!
+
+## English
+
+<div class="grid" markdown>
+
+[![Youtube Video](https://img.youtube.com/vi/mC3tjysJ01E/maxresdefault.jpg)](https://www.youtube.com/watch?v=mC3tjysJ01E)
+
+[![Youtube Video](https://img.youtube.com/vi/o9SLve4wBPY/maxresdefault.jpg)](https://www.youtube.com/watch?v=o9SLve4wBPY)
+
+[![Youtube Video](https://img.youtube.com/vi/j9kbQucNwlc/maxresdefault.jpg)](https://www.youtube.com/watch?v=j9kbQucNwlc)
+
+[![Youtube Video](https://img.youtube.com/vi/3Ux7zfCCM1A/maxresdefault.jpg)](https://www.youtube.com/watch?v=3Ux7zfCCM1A)
+
+[![Youtube Video](https://img.youtube.com/vi/4AwUNy2eztA/maxresdefault.jpg)](https://www.youtube.com/watch?v=4AwUNy2eztA)
+
+[![Youtube Video](https://img.youtube.com/vi/7mUUCB3kP0E/maxresdefault.jpg)](https://www.youtube.com/watch?v=7mUUCB3kP0E)
+
+[![Youtube Video](https://img.youtube.com/vi/a5-4u0qFKaE/maxresdefault.jpg)](https://www.youtube.com/watch?v=a5-4u0qFKaE)
+
+[![Youtube Video](https://img.youtube.com/vi/tV7-06FU4gQ/maxresdefault.jpg)](https://www.youtube.com/watch?v=tV7-06FU4gQ)
+
+[![Youtube Video](https://img.youtube.com/vi/X2ycbT7rPu4/maxresdefault.jpg)](https://www.youtube.com/watch?v=X2ycbT7rPu4)
+
+[![Youtube Video](https://img.youtube.com/vi/1jEWUJqL-eo/maxresdefault.jpg)](https://www.youtube.com/watch?v=1jEWUJqL-eo)
+
+</div>
+
+<div class="grid" markdown>
+
+<div markdown>
+## French
+[![Youtube Video](https://img.youtube.com/vi/aGztk8you6o/maxresdefault.jpg)](https://www.youtube.com/watch?v=aGztk8you6o)
+[![Youtube Video](https://img.youtube.com/vi/pQfhWqZh7YE/maxresdefault.jpg)](https://www.youtube.com/watch?v=pQfhWqZh7YE)
+</div>
+
+<div markdown>
+## German
+[![Youtube Video](https://img.youtube.com/vi/DrDgg-WRA2g/maxresdefault.jpg)](https://www.youtube.com/watch?v=DrDgg-WRA2g)
+</div>
+
+<div markdown>
+## Chinese
+[![Youtube Video](https://img.youtube.com/vi/DAW15ckt4n4/mqdefault.jpg){: style="width: 100%"}](https://www.youtube.com/watch?v=DAW15ckt4n4)
+</div>
+
+<div markdown>
+## Russian
+[![Youtube Video](https://img.youtube.com/vi/dk3Cp5ck8mY/maxresdefault.jpg)](https://www.youtube.com/watch?v=dk3Cp5ck8mY)
+</div>
+
+</div>

docs/more/development.md

@@ -3,8 +3,6 @@ title: Development
 description: Homepage Development
 ---
 
-## Development Overview
-
 First, clone the homepage repository.
 
 For installing NPM packages, this project uses [pnpm](https://pnpm.io/) (and so should you!):

docs/overrides/main.html

@@ -1,5 +1,10 @@
 {% extends "base.html" %}
 
+{% block header %}
+  <div id="blur-overlay" class="blur-overlay"></div>
+  {% include "partials/header.html" %}
+{% endblock %}
+
 {% block site_nav %}
   <!-- Navigation -->
   {% if nav %}

docs/stylesheets/extra.css

@@ -1,3 +1,17 @@
+[data-md-color-scheme="slate"] {
+  --md-hue: 220;
+  --md-default-bg-color: hsla(0, 0%, 14%, 0.6);
+  --md-code-bg-color: hsla(0, 0%, 0%, 0.2);
+}
+
+[data-md-color-scheme="default"] {
+  --md-hue: 220;
+  --md-default-fg-color--light: white;
+  --md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.6);
+  --md-default-bg-color: hsla(0, 0%, 100%, 0.8);
+  --md-code-bg-color: hsla(0, 0%, 100%, 0.8);
+}
+
 [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
   position: absolute;
   top: 0.3rem;
@@ -42,3 +56,153 @@
 .md-typeset table:not([class]) {
   display: table;
 }
+
+/* less than 1440px wide */
+@media (max-width: 1440px) {
+  .md-footer-meta__inner {
+    justify-content: center;
+  }
+}
+
+/* less than 740px wide */
+@media (max-width: 740px) {
+  .md-footer-meta__inner {
+    justify-content: left;
+    flex-direction: column;
+  }
+  .md-social {
+    padding-top: 0;
+  }
+}
+
+.md-header__button.md-logo {
+  padding: 0;
+  margin: 0;
+}
+
+.md-header__button.md-logo img,
+.md-header__button.md-logo svg {
+  height: 2rem;
+}
+
+.md-header__topic {
+  display: none;
+}
+
+body {
+  background-image: url("/assets/blossom_valley.jpg");
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: center;
+  background-color: transparent;
+  color: #fff;
+}
+
+.blur-overlay {
+  z-index: -1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: hsla(0, 0%, 0%, 0);
+  backdrop-filter: blur(64px);
+  -webkit-backdrop-filter: blur(64px);
+}
+
+.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
+.md-nav--secondary .md-nav__title {
+  background: none;
+  box-shadow: none;
+}
+
+[data-md-color-scheme="slate"] .md-main,
+[data-md-color-scheme="slate"] .md-tabs,
+[data-md-color-scheme="slate"] .md-footer {
+  background-color: hsla(0, 0%, 0%, 0.3);
+}
+
+[data-md-color-scheme="default"] .md-main,
+[data-md-color-scheme="default"] .md-tabs,
+[data-md-color-scheme="default"] .md-footer {
+  background-color: hsla(0, 0%, 100%, 0.1);
+}
+
+[data-md-color-scheme="slate"] .md-header {
+  background-color: hsla(0, 0%, 0%, 0.3);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+[data-md-color-scheme="default"] .md-header {
+  background-color: hsla(0, 0%, 100%, 0.1);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.md-footer-meta {
+  background-color: transparent;
+}
+
+[data-md-color-scheme="slate"][data-md-color-primary="black"],
+[data-md-color-scheme="default"][data-md-color-primary="black"] {
+  --md-typeset-a-color: #ffffff;
+}
+
+.md-content__inner a {
+  text-decoration: underline;
+  font-weight: bolder;
+}
+
+[data-md-color-scheme="default"] .highlight .p,
+[data-md-color-scheme="default"] .highlight .o,
+[data-md-color-scheme="default"] .highlight .ow,
+[data-md-color-scheme="default"] .highlight .c,
+[data-md-color-scheme="default"] .highlight .c1,
+[data-md-color-scheme="default"] .highlight .ch,
+[data-md-color-scheme="default"] .highlight .cm,
+[data-md-color-scheme="default"] .highlight .cs,
+[data-md-color-scheme="default"] .highlight .sd {
+  color: #36464eaa;
+}
+
+[data-md-color-scheme="default"] .md-annotation__index:after {
+  background-color: #36464ecc;
+}
+
+/* I know this is a farce, but I want it to look nice. */
+.css-9if7bc {
+  background-color: hsla(0, 0%, 0%, 0.3);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+@media screen and (max-width: 76.234375em) {
+  .md-nav--primary,
+  .md-nav--primary .md-nav {
+    background-color: hsla(0, 0%, 0%, 0.8);
+  }
+}
+
+@media screen and (max-width: 76.234375em) {
+  .md-nav--primary .md-nav__title ~ .md-nav__list {
+    background-color: hsla(0, 0%, 0%, 0.8);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+}
+
+@media screen and (max-width: 76.234375em) {
+  .md-nav--primary .md-nav__title {
+    background-color: hsla(0, 0%, 0%, 0.8);
+    backdrop-filter: blur(16px);
+  }
+}
+
+.md-search__scrollwrap {
+  background-color: hsla(0, 0%, 0%, 0.3);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.md-search-result .md-typeset h1 {
+  color: #fff;
+}

mkdocs.yml

@@ -177,6 +177,7 @@ nav:
       - more/index.md
       - more/development.md
       - more/translations.md
+      - more/coverage.md
       - more/homepage-move.md
 
 theme:
@@ -202,7 +203,8 @@ theme:
       toggle:
         icon: material/brightness-4
         name: Switch to system preference
-  logo: assets/light_squircle@2x.png
+  logo: assets/banner_light@2x.png
+
   favicon: assets/favicon.ico
   features:
     - navigation.instant
@@ -228,10 +230,12 @@ extra:
   social:
     - icon: fontawesome/brands/discord
       link: https://discord.gg/k4ruYNrudu
-    - icon: fontawesome/regular/message
-      link: https://github.com/gethomepage/homepage/discussions
     - icon: fontawesome/brands/github
       link: https://github.com/gethomepage/homepage
+    - icon: simple/opencollective
+      link: https://opencollective.com/homepage
+    - icon: simple/patreon
+      link: https://www.patreon.com/gethomepage
 
 markdown_extensions:
   - pymdownx.highlight:
@@ -262,12 +266,12 @@ plugins:
       plugins:
         - typeset
         - social:
-            cards_layout_dir: docs/layouts
+            cards_layout: default
-            cards_layout: custom
             cards_layout_options:
-              background_image: docs/assets/BlossomValley.jpg
+              background_image: docs/assets/blossom_valley_blur.jpg
               background_color: "rgba(13, 29, 41, 128)"
               color: "#ffffff"
+              logo: docs/assets/light_squircle@2x.png
   - tags
   - search:
       pipeline: