From 8fb654914de4b928aa43139a7817adb422f68308 Mon Sep 17 00:00:00 2001
From: Georg krause <mail@georg-krause.net>
Date: Fri, 31 Mar 2023 10:16:01 +0200
Subject: [PATCH] feat: Make background take full width on huge screens
---
theme/static/css/website.css | 8 +-
theme/templates/inc/features.html.j2 | 72 +++++------
theme/templates/inc/footer.html.j2 | 146 +++++++++++-----------
theme/templates/inc/get-started.html.j2 | 62 ++++-----
theme/templates/inc/hero.html.j2 | 28 +++--
theme/templates/inc/menu.html.j2 | 71 ++++++-----
theme/templates/inc/support-us.html.j2 | 20 +--
theme/templates/inc/target_groups.html.j2 | 87 +++++++------
8 files changed, 262 insertions(+), 232 deletions(-)
diff --git a/theme/static/css/website.css b/theme/static/css/website.css
index 255f00b3..3c7f68b0 100644
--- a/theme/static/css/website.css
+++ b/theme/static/css/website.css
@@ -1,7 +1,13 @@
body {
- max-width: 1600px;
+ margin: 0;
+}
+
+@media screen and (min-width: 1600px) {
+.background-wrapper {
+ width: 1600px;
margin: auto;
}
+}
img {
border-radius: var(--fw-border-radius);
diff --git a/theme/templates/inc/features.html.j2 b/theme/templates/inc/features.html.j2
index 207b18b5..ad51b44e 100644
--- a/theme/templates/inc/features.html.j2
+++ b/theme/templates/inc/features.html.j2
@@ -68,44 +68,46 @@
}
}
</style>
- <div class="feature">
- <div class="content">
- <h2 class="title">{% trans %}Your music and podcasts, anywhere{% endtrans %}</h2>
- <p>
- {% trans %}Listen to your music and podcasts from your web browser, or a wide range of compatible apps for every platform. This includes the Subsonic client of your choice and your favourite podcast app.{% endtrans %}
- </p>
+ <div class="background-wrapper">
+ <div class="feature">
+ <div class="content">
+ <h2 class="title">{% trans %}Your music and podcasts, anywhere{% endtrans %}</h2>
+ <p>
+ {% trans %}Listen to your music and podcasts from your web browser, or a wide range of compatible apps for every platform. This includes the Subsonic client of your choice and your favourite podcast app.{% endtrans %}
+ </p>
+ </div>
+ <img alt="An illustration showing a long haired person with yellow headphones standing next to their insanely huge mobile phone listening to some audio."
+ src="{{ main_siteurl }}/theme/images/undraw_audio_player_re_cl20.svg"/>
</div>
- <img alt="An illustration showing a long haired person with yellow headphones standing next to their insanely huge mobile phone listening to some audio."
- src="{{ main_siteurl }}/theme/images/undraw_audio_player_re_cl20.svg"/>
- </div>
- <div class="feature">
- <div class="content">
- <h2 class="title">{% trans %}Share your music library{% endtrans %}</h2>
- <p>
- {% trans %}Share your playlists and albums, or whole parts of your library, with your friends and family. Promote free art by sharing it with users on your pod, or with the entire Funkwhale network.{% endtrans %}
- </p>
+ <div class="feature">
+ <div class="content">
+ <h2 class="title">{% trans %}Share your music library{% endtrans %}</h2>
+ <p>
+ {% trans %}Share your playlists and albums, or whole parts of your library, with your friends and family. Promote free art by sharing it with users on your pod, or with the entire Funkwhale network.{% endtrans %}
+ </p>
+ </div>
+ <img alt="A person with a pigtail and yellow shirt and another one with a blue shirt are inside a webpage organizing the content."
+ src="{{ main_siteurl }}/theme/images/undraw_social_friends_re_7uaa.svg"/>
</div>
- <img alt="A person with a pigtail and yellow shirt and another one with a blue shirt are inside a webpage organizing the content."
- src="{{ main_siteurl }}/theme/images/undraw_social_friends_re_7uaa.svg"/>
- </div>
- <div class="feature">
- <div class="content">
- <h2 class="title">{% trans %}Extend your horizons{% endtrans %}</h2>
- <p>
- {% trans %}Explore the content shared by the community to discover new artists and podcasts. Keep tracks of your favorites in your library.{% endtrans %}
- </p>
+ <div class="feature">
+ <div class="content">
+ <h2 class="title">{% trans %}Extend your horizons{% endtrans %}</h2>
+ <p>
+ {% trans %}Explore the content shared by the community to discover new artists and podcasts. Keep tracks of your favorites in your library.{% endtrans %}
+ </p>
+ </div>
+ <img alt="A black person with long hair and yellow headphones walks around. Next to them is an illustrated tree."
+ src="{{ main_siteurl }}/theme/images/undraw_imagination_re_i0xi.svg"/>
</div>
- <img alt="A black person with long hair and yellow headphones walks around. Next to them is an illustrated tree."
- src="{{ main_siteurl }}/theme/images/undraw_imagination_re_i0xi.svg"/>
- </div>
- <div class="feature">
- <div class="content">
- <h2 class="title">{% trans %}Publish your work{% endtrans %}</h2>
- <p>
- {% trans %}Create channels for your musit or podcast and let people get notified of your latest releases. Use our export widget to embed your content on other platforms and websites.{% endtrans %}
- </p>
+ <div class="feature">
+ <div class="content">
+ <h2 class="title">{% trans %}Publish your work{% endtrans %}</h2>
+ <p>
+ {% trans %}Create channels for your musit or podcast and let people get notified of your latest releases. Use our export widget to embed your content on other platforms and websites.{% endtrans %}
+ </p>
+ </div>
+ <img alt="A black person with long hair and a white person in a wheelchair are around a huge tablet showing a microphone and some player controls."
+ src="{{ main_siteurl }}/theme/images/undraw_podcast_audience_re_4i5q.svg"/>
</div>
- <img alt="A black person with long hair and a white person in a wheelchair are around a huge tablet showing a microphone and some player controls."
- src="{{ main_siteurl }}/theme/images/undraw_podcast_audience_re_4i5q.svg"/>
</div>
</section>
diff --git a/theme/templates/inc/footer.html.j2 b/theme/templates/inc/footer.html.j2
index 4741e8dd..64ae05e5 100644
--- a/theme/templates/inc/footer.html.j2
+++ b/theme/templates/inc/footer.html.j2
@@ -39,79 +39,81 @@
margin: 50px 5% 0;
}
</style>
- <div class="columns">
- <div class="column">
- <h2 class="title">About</h2>
- <ul>
- <li>
- <a href="{{ SITEURL }}">{% trans %}The Project{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/credits">{% trans %}Credits{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/contact">{% trans %}Contact Us{% endtrans %}</a>
- </li>
- </ul>
+ <div class="background-wrapper">
+ <div class="columns">
+ <div class="column">
+ <h2 class="title">About</h2>
+ <ul>
+ <li>
+ <a href="{{ SITEURL }}">{% trans %}The Project{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/credits">{% trans %}Credits{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/contact">{% trans %}Contact Us{% endtrans %}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="column">
+ <h2 class="title">Get started</h2>
+ <ul>
+ <li>
+ <a href="{{ SITEURL }}/join">{% trans %}Find a pod{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="https://docs.funkwhale.audio/admin/" target="_blank">{% trans %}Start your own pod{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/apps">{% trans %}Find an app{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="https://docs.funkwhale.audio/index.html" target="_blank">{% trans %}Documentation{% endtrans %}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="column">
+ <h2 class="title">{% trans %}Community{% endtrans %}</h2>
+ <ul>
+ <li>
+ <a href="{{ SITEURL }}/help">{% trans %}Help{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/donate">{% trans %}Make a donation{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/contribute">{% trans %}Contribute{% endtrans %}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="column credits">
+ <ul>
+ <li>{% trans %}Logo by{% endtrans %} Francis Ganding</li>
+ <li>
+ {% trans %}Artwork by{% endtrans %} <a href="https://gallery.robin-jay.blue/">Robin Bluejay</a>
+ </li>
+ <li>{% trans %}Website by the Funkwhale Collective{% endtrans %}</li>
+ <li>
+ <a href="{{ SITEURL }}/logos">{% trans %}Logos and identity guidelines{% endtrans %}</a>
+ </li>
+ </ul>
+ </div>
</div>
- <div class="column">
- <h2 class="title">Get started</h2>
- <ul>
- <li>
- <a href="{{ SITEURL }}/join">{% trans %}Find a pod{% endtrans %}</a>
- </li>
- <li>
- <a href="https://docs.funkwhale.audio/admin/" target="_blank">{% trans %}Start your own pod{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/apps">{% trans %}Find an app{% endtrans %}</a>
- </li>
- <li>
- <a href="https://docs.funkwhale.audio/index.html" target="_blank">{% trans %}Documentation{% endtrans %}</a>
- </li>
- </ul>
- </div>
- <div class="column">
- <h2 class="title">{% trans %}Community{% endtrans %}</h2>
- <ul>
- <li>
- <a href="{{ SITEURL }}/help">{% trans %}Help{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/donate">{% trans %}Make a donation{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/contribute">{% trans %}Contribute{% endtrans %}</a>
- </li>
- </ul>
- </div>
- <div class="column credits">
- <ul>
- <li>{% trans %}Logo by{% endtrans %} Francis Ganding</li>
- <li>
- {% trans %}Artwork by{% endtrans %} <a href="https://gallery.robin-jay.blue/">Robin Bluejay</a>
- </li>
- <li>{% trans %}Website by the Funkwhale Collective{% endtrans %}</li>
- <li>
- <a href="{{ SITEURL }}/logos">{% trans %}Logos and identity guidelines{% endtrans %}</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="social">
- {% include "inc/language-switch.html.j2" %}
- <div class="social-content">
- <span>{% trans %}Follow us{% endtrans %}</span>
- <a href="https://blog.funkwhale.audio/feeds/all.atom.xml"
- title="via RSS"
- class="funkwhale button is-outline icon-only">
- <i class="fa fa-rss" aria-hidden="true"></i>
- </a>
- <a href="https://fosstodon.org/@funkwhale"
- title="via Mastodon"
- class="funkwhale button is-outline icon-only">
- <i class="fa fa-mastodon" aria-hidden="true"></i>
- </a>
+ <div class="social">
+ {% include "inc/language-switch.html.j2" %}
+ <div class="social-content">
+ <span>{% trans %}Follow us{% endtrans %}</span>
+ <a href="https://blog.funkwhale.audio/feeds/all.atom.xml"
+ title="via RSS"
+ class="funkwhale button is-outline icon-only">
+ <i class="fa fa-rss" aria-hidden="true"></i>
+ </a>
+ <a href="https://fosstodon.org/@funkwhale"
+ title="via Mastodon"
+ class="funkwhale button is-outline icon-only">
+ <i class="fa fa-mastodon" aria-hidden="true"></i>
+ </a>
+ </div>
</div>
</div>
</footer>
diff --git a/theme/templates/inc/get-started.html.j2 b/theme/templates/inc/get-started.html.j2
index ba9319e6..64b88d35 100644
--- a/theme/templates/inc/get-started.html.j2
+++ b/theme/templates/inc/get-started.html.j2
@@ -38,40 +38,42 @@
}
</style>
- <div class="content">
- <h2 class="title" id="get-started">{% trans %}Get started{% endtrans %}</h2>
- <p>
- {% trans %}Sign up on a pod to upload your music library, share it, keep track of your favorites, and more! Each pod has its own rules and conditions, but thanks to federation you'll be able to share content with other people regardless of which pod they're using.{% endtrans %}
- </p>
- </div>
- <div class="entrypoints">
- <div class="funkwhale card is-link is-cta">
- <h2 class="title">{% trans %}Join an existing pod{% endtrans %}</h2>
+ <div class="background-wrapper">
+ <div class="content">
+ <h2 class="title" id="get-started">{% trans %}Get started{% endtrans %}</h2>
<p>
- {% trans %}The easiest way to start using Funkwhale is to register an account on one of the many available pods.{% endtrans %}
+ {% trans %}Sign up on a pod to upload your music library, share it, keep track of your favorites, and more! Each pod has its own rules and conditions, but thanks to federation you'll be able to share content with other people regardless of which pod they're using.{% endtrans %}
</p>
- <div class="card-button">
- <a href="{{ SITEURL }}/join"
- class="funkwhale button is-secondary is-outline">{% trans %}Find a pod{% endtrans %}</a>
- </div>
</div>
- <div class="funkwhale card is-link is-cta">
- <h2 class="title">{% trans %}Start your own pod{% endtrans %}</h2>
- <p>
- {% trans %}Running your own pod requires some system administration skills, but also gives you more independence and control.{% endtrans %}
- </p>
- <div class="card-button">
- <a href="https://docs.funkwhale.audio/admin/index.html"
- class="funkwhale button is-secondary is-outline">{% trans %}Read the docs{% endtrans %}</a>
+ <div class="entrypoints">
+ <div class="funkwhale card is-link is-cta">
+ <h2 class="title">{% trans %}Join an existing pod{% endtrans %}</h2>
+ <p>
+ {% trans %}The easiest way to start using Funkwhale is to register an account on one of the many available pods.{% endtrans %}
+ </p>
+ <div class="card-button">
+ <a href="{{ SITEURL }}/join"
+ class="funkwhale button is-secondary is-outline">{% trans %}Find a pod{% endtrans %}</a>
+ </div>
</div>
- </div>
- <div class="funkwhale card is-link is-cta">
- <h2 class="title">{% trans %}Third-party hosting{% endtrans %}</h2>
- <p>
- {% trans %}If you'd prefer to have someone else host your pod for you, here are a few providers who offer hosted solutions.{% endtrans %}
- </p>
- <div class="card-button">
- <a href="#" class="funkwhale button is-secondary is-outline" disabled>{% trans %}Coming soon!{% endtrans %}</a>
+ <div class="funkwhale card is-link is-cta">
+ <h2 class="title">{% trans %}Start your own pod{% endtrans %}</h2>
+ <p>
+ {% trans %}Running your own pod requires some system administration skills, but also gives you more independence and control.{% endtrans %}
+ </p>
+ <div class="card-button">
+ <a href="https://docs.funkwhale.audio/admin/index.html"
+ class="funkwhale button is-secondary is-outline">{% trans %}Read the docs{% endtrans %}</a>
+ </div>
+ </div>
+ <div class="funkwhale card is-link is-cta">
+ <h2 class="title">{% trans %}Third-party hosting{% endtrans %}</h2>
+ <p>
+ {% trans %}If you'd prefer to have someone else host your pod for you, here are a few providers who offer hosted solutions.{% endtrans %}
+ </p>
+ <div class="card-button">
+ <a href="#" class="funkwhale button is-secondary is-outline" disabled>{% trans %}Coming soon!{% endtrans %}</a>
+ </div>
</div>
</div>
</div>
diff --git a/theme/templates/inc/hero.html.j2 b/theme/templates/inc/hero.html.j2
index 99a66bda..c9f19d9f 100644
--- a/theme/templates/inc/hero.html.j2
+++ b/theme/templates/inc/hero.html.j2
@@ -1,14 +1,16 @@
-<section class="hero">
- <div class="hero-box">
- <h1>{% trans %}A platform for all your audio{% endtrans %}</h1>
- <h2>{% trans %}Your music. Your podcasts.{% endtrans %}</h2>
- <h2>{% trans %}Enjoy anywhere, share with anyone.{% endtrans %}</h2>
- <div>
- <a href="{{ SITEURL }}#get-started" class="funkwhale button is-primary">{% trans %}Get started{% endtrans %}</a>
+<div class="background-wrapper">
+ <section class="hero">
+ <div class="hero-box">
+ <h1>{% trans %}A platform for all your audio{% endtrans %}</h1>
+ <h2>{% trans %}Your music. Your podcasts.{% endtrans %}</h2>
+ <h2>{% trans %}Enjoy anywhere, share with anyone.{% endtrans %}</h2>
+ <div>
+ <a href="{{ SITEURL }}#get-started" class="funkwhale button is-primary">{% trans %}Get started{% endtrans %}</a>
+ </div>
</div>
- </div>
- <div class="hero-box">
- <img alt="The images shows an screenshot of the Funkwhale Web Interface. The artist page for a band called Break the Bans is shown with four albums."
- src="{{ main_siteurl }}/theme/images/screenshot.png"/>
- </div>
-</section>
+ <div class="hero-box">
+ <img alt="The images shows an screenshot of the Funkwhale Web Interface. The artist page for a band called Break the Bans is shown with four albums."
+ src="{{ main_siteurl }}/theme/images/screenshot.png"/>
+ </div>
+ </section>
+</div>
diff --git a/theme/templates/inc/menu.html.j2 b/theme/templates/inc/menu.html.j2
index 155aca46..b6d21b35 100644
--- a/theme/templates/inc/menu.html.j2
+++ b/theme/templates/inc/menu.html.j2
@@ -66,36 +66,45 @@
padding: 10px 0;
}
}
+
+ @media only screen and (min-width: 1600px) {
+ nav.navbar {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
</style>
{% endblock header %}
-<nav class="navbar" role="navigation" aria-label="main navigation">
- <a class="logo" href="{{ SITEURL }}/">
- <img alt="The Funkwhale logo is shown: There are three blue semicircles open to the top where a black flipper is visible just like a wish would jump into the water. On the right there is the word Funkwhale."
- src="{{ main_siteurl }}/theme/images/logo.svg"/>
- </a>
- <a role="button"
- class="navbar-burger"
- aria-label="menu"
- aria-expanded="false"
- data-target="navbar-main">
- <i class="fa fa-bars"></i>
- </a>
- <ul id="navbar-main">
- <li>
- <a href="{{ SITEURL }}/" class="navbar-item">{% trans %}The project{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/help" class="navbar-item">{% trans %}Help{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/contribute" class="navbar-item">{% trans %}Contribute{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}/donate" class="navbar-item">{% trans %}Support us{% endtrans %}</a>
- </li>
- <li>
- <a href="{{ SITEURL }}#get-started"
- class="funkwhale button is-colored is-primary">{% trans %}Get Started{% endtrans %}</a>
- </li>
- </ul>
-</nav>
+<div class="background-wrapper">
+ <nav class="navbar" role="navigation" aria-label="main navigation">
+ <a class="logo" href="{{ SITEURL }}/">
+ <img alt="The Funkwhale logo is shown: There are three blue semicircles open to the top where a black flipper is visible just like a wish would jump into the water. On the right there is the word Funkwhale."
+ src="{{ main_siteurl }}/theme/images/logo.svg"/>
+ </a>
+ <a role="button"
+ class="navbar-burger"
+ aria-label="menu"
+ aria-expanded="false"
+ data-target="navbar-main">
+ <i class="fa fa-bars"></i>
+ </a>
+ <ul id="navbar-main">
+ <li>
+ <a href="{{ SITEURL }}/" class="navbar-item">{% trans %}The project{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/help" class="navbar-item">{% trans %}Help{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/contribute" class="navbar-item">{% trans %}Contribute{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}/donate" class="navbar-item">{% trans %}Support us{% endtrans %}</a>
+ </li>
+ <li>
+ <a href="{{ SITEURL }}#get-started"
+ class="funkwhale button is-colored is-primary">{% trans %}Get Started{% endtrans %}</a>
+ </li>
+ </ul>
+ </nav>
+</div>
diff --git a/theme/templates/inc/support-us.html.j2 b/theme/templates/inc/support-us.html.j2
index de54692f..f3b1ecbc 100644
--- a/theme/templates/inc/support-us.html.j2
+++ b/theme/templates/inc/support-us.html.j2
@@ -27,15 +27,17 @@
}
}
</style>
- <div class="block">
- <div class="content container">
- <h2 class="title">{% trans %}Support Us{% endtrans %}</h2>
- <p>
- {% trans %}Funkwhale is a community-driven project maintained by a non-profit organization called the Funkwhale Collective. We strive to make Funkwhale better and there are many things you can do to help!{% endtrans %}
- </p>
- <div class="level">
- <a href="{{ SITEURL }}/donate" class="funkwhale button is-outline">{% trans %}Make a donation{% endtrans %}</a>
- <a href="{{ SITEURL }}/contribute" class="funkwhale button is-outline">{% trans %}Contribute{% endtrans %}</a>
+ <div class="background-wrapper">
+ <div class="block">
+ <div class="content container">
+ <h2 class="title">{% trans %}Support Us{% endtrans %}</h2>
+ <p>
+ {% trans %}Funkwhale is a community-driven project maintained by a non-profit organization called the Funkwhale Collective. We strive to make Funkwhale better and there are many things you can do to help!{% endtrans %}
+ </p>
+ <div class="level">
+ <a href="{{ SITEURL }}/donate" class="funkwhale button is-outline">{% trans %}Make a donation{% endtrans %}</a>
+ <a href="{{ SITEURL }}/contribute" class="funkwhale button is-outline">{% trans %}Contribute{% endtrans %}</a>
+ </div>
</div>
</div>
</div>
diff --git a/theme/templates/inc/target_groups.html.j2 b/theme/templates/inc/target_groups.html.j2
index 4f07cf6f..8c70aaf0 100644
--- a/theme/templates/inc/target_groups.html.j2
+++ b/theme/templates/inc/target_groups.html.j2
@@ -1,13 +1,16 @@
-{% block header %}
+<section class="target-group">
<style>
- .target-group {
+ section.target-group {
padding: 50px 0px;
+ background-color: var(--fw-beige-100);
+ }
+
+ div.target-group {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
gap: 30px;
justify-content: space-around;
- background-color: var(--fw-beige-100);
}
.target-group .funkwhale.card {
@@ -15,42 +18,44 @@
background-color: #fff;
}
</style>
-{% endblock header %}
-<div class="target-group">
- <div class="funkwhale card slider-item" data-position="1">
- <img alt="The Icon shows a blue music note on light blue background."
- class="icon"
- src="{{ main_siteurl }}/theme/images/benefits-music.svg"/>
- <h2 class="title">{% trans %}For music lovers{% endtrans %}</h2>
- <p>
- {% trans %}Access your personal music collection from anywhere. Funkwhale supports advanced sharing features to promote Freely licensed content.{% endtrans %}
- </p>
- </div>
- <div class="funkwhale card slider-item" data-position="2">
- <img alt="An Icon showing three dots with 2 connections between them in blue on a light blue background."
- class="icon"
- src="{{ main_siteurl }}/theme/images/benefits-federated.svg"/>
- <h2 class="title">{% trans %}For artists and podcasters{% endtrans %}</h2>
- <p>
- {% trans %}Publish your music and podcasts on Funkwhale. Let people follow your releases or subscribe to your podcast in their favorite podcatcher.{% endtrans %}
- </p>
- </div>
- <div class="funkwhale card slider-item" data-position="3">
- <img alt="An icon showing a blue tower which sends blue waves to the left and right on a light blue background."
- class="icon"
- src="{{ main_siteurl }}/theme/images/benefits-creators.svg"/>
- <h2 class="title">{% trans %}Decentralized & Federated{% endtrans %}</h2>
- <p>
- {% trans %}Content can be shared across instances, or moderated to restrict bad actors. The network is not tied to any corporation or entity, so you have total independence.{% endtrans %}
- </p>
- </div>
- <div class="funkwhale card slider-item" data-position="4">
- <img alt="An icon showing two people where one is standing behind the other, both are blue on a light blue background."
- class="icon"
- src="{{ main_siteurl }}/theme/images/benefits-community.svg"/>
- <h2 class="title">{% trans %}Community-driven{% endtrans %}</h2>
- <p>
- {% trans %}Free software build by the community using standard protocols and open-source technology. No third-party analytics. No tracking. No ads. You are in control.{% endtrans %}
- </p>
+ <div class="background-wrapper">
+ <div class="target-group">
+ <div class="funkwhale card slider-item" data-position="1">
+ <img alt="The Icon shows a blue music note on light blue background."
+ class="icon"
+ src="{{ main_siteurl }}/theme/images/benefits-music.svg"/>
+ <h2 class="title">{% trans %}For music lovers{% endtrans %}</h2>
+ <p>
+ {% trans %}Access your personal music collection from anywhere. Funkwhale supports advanced sharing features to promote Freely licensed content.{% endtrans %}
+ </p>
+ </div>
+ <div class="funkwhale card slider-item" data-position="2">
+ <img alt="An Icon showing three dots with 2 connections between them in blue on a light blue background."
+ class="icon"
+ src="{{ main_siteurl }}/theme/images/benefits-federated.svg"/>
+ <h2 class="title">{% trans %}For artists and podcasters{% endtrans %}</h2>
+ <p>
+ {% trans %}Publish your music and podcasts on Funkwhale. Let people follow your releases or subscribe to your podcast in their favorite podcatcher.{% endtrans %}
+ </p>
+ </div>
+ <div class="funkwhale card slider-item" data-position="3">
+ <img alt="An icon showing a blue tower which sends blue waves to the left and right on a light blue background."
+ class="icon"
+ src="{{ main_siteurl }}/theme/images/benefits-creators.svg"/>
+ <h2 class="title">{% trans %}Decentralized & Federated{% endtrans %}</h2>
+ <p>
+ {% trans %}Content can be shared across instances, or moderated to restrict bad actors. The network is not tied to any corporation or entity, so you have total independence.{% endtrans %}
+ </p>
+ </div>
+ <div class="funkwhale card slider-item" data-position="4">
+ <img alt="An icon showing two people where one is standing behind the other, both are blue on a light blue background."
+ class="icon"
+ src="{{ main_siteurl }}/theme/images/benefits-community.svg"/>
+ <h2 class="title">{% trans %}Community-driven{% endtrans %}</h2>
+ <p>
+ {% trans %}Free software build by the community using standard protocols and open-source technology. No third-party analytics. No tracking. No ads. You are in control.{% endtrans %}
+ </p>
+ </div>
+ </div>
</div>
-</div>
+</section>
--
GitLab