diff --git a/docs/assets/BlossomValley.jpg b/docs/assets/BlossomValley.jpg
deleted file mode 100644
index 8c6a6321f..000000000
Binary files a/docs/assets/BlossomValley.jpg and /dev/null differ
diff --git a/docs/assets/blossom_valley.jpg b/docs/assets/blossom_valley.jpg
new file mode 100644
index 000000000..394459027
Binary files /dev/null and b/docs/assets/blossom_valley.jpg differ
diff --git a/docs/assets/blossom_valley_blur.jpg b/docs/assets/blossom_valley_blur.jpg
new file mode 100644
index 000000000..54bb9bae2
Binary files /dev/null and b/docs/assets/blossom_valley_blur.jpg differ
diff --git a/docs/assets/homepage_demo_clip.png b/docs/assets/homepage_demo_clip.png
new file mode 100644
index 000000000..8ac16f355
Binary files /dev/null and b/docs/assets/homepage_demo_clip.png differ
diff --git a/docs/index.md b/docs/index.md
index 676086dbb..2f5b602e9 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -12,17 +12,18 @@ hide:
-
-![Alt text](assets/banner_dark@2x.png#only-light)
-![Alt text](assets/banner_light@2x.png#only-dark)
+
-A modern,
fully static, fast, secure
fully proxied, 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.
+
-![Alt text](assets/homepage_demo.png)
+
-
-
-
-
-Homepage builds are kindly powered by DigitalOcean.
-
+
A modern, fully static, fast, secure fully proxied, 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.
+
+
+
+
diff --git a/docs/more/coverage.md b/docs/more/coverage.md
new file mode 100644
index 000000000..65a1a8665
--- /dev/null
+++ b/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
+
+
+
+[![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)
+
+
+
+
+
+
+## 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)
+
+
+
+## German
+[![Youtube Video](https://img.youtube.com/vi/DrDgg-WRA2g/maxresdefault.jpg)](https://www.youtube.com/watch?v=DrDgg-WRA2g)
+
+
+
+## Chinese
+[![Youtube Video](https://img.youtube.com/vi/DAW15ckt4n4/mqdefault.jpg){: style="width: 100%"}](https://www.youtube.com/watch?v=DAW15ckt4n4)
+
+
+
+## Russian
+[![Youtube Video](https://img.youtube.com/vi/dk3Cp5ck8mY/maxresdefault.jpg)](https://www.youtube.com/watch?v=dk3Cp5ck8mY)
+
+
+
diff --git a/docs/more/development.md b/docs/more/development.md
index ec580cff4..377238a60 100644
--- a/docs/more/development.md
+++ b/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!):
diff --git a/docs/overrides/main.html b/docs/overrides/main.html
index 0a5f2bc50..7150c1b78 100644
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -1,5 +1,10 @@
{% extends "base.html" %}
+{% block header %}
+
+ {% include "partials/header.html" %}
+{% endblock %}
+
{% block site_nav %}
{% if nav %}
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index f9281da26..d856cef14 100644
--- a/docs/stylesheets/extra.css
+++ b/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;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
index e5ea55fc9..a6f1cd873 100644
--- a/mkdocs.yml
+++ b/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: custom
+ cards_layout: default
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: