Unverified Commit da962a1f authored by Georg Krause's avatar Georg Krause
Browse files

Bring more content to the main page

parent f8f38a26
Pipeline #19910 canceled with stages
in 24 seconds
...@@ -45,6 +45,10 @@ ...@@ -45,6 +45,10 @@
font-weight: bold; font-weight: bold;
} }
.columns.features {
margin-bottom: 0;
}
.funkwhale.card { .funkwhale.card {
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
...@@ -65,3 +69,24 @@ ...@@ -65,3 +69,24 @@
width: 160px; width: 160px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
#content.section {
background-color: var(--grey-100);
}
.level-item.content {
max-width: 60%;
}
.level-item.image {
max-width: 35%;
}
.level-item.image img {
border-radius: 12px;
}
#content .container .level:not(:first-child) {
padding-top: 24px;
border-top: 1px solid #cfcaca;
}
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
{% include "inc/hero.html" %} {% include "inc/hero.html" %}
{% include "inc/features.html" %} {% include "inc/features.html" %}
<section class="section"> <section id="content" class="section">
<div class="container is-max-desktop"> <div class="container">
<div class="columns"> <div class="level">
<div class="column is-three-fifths"> <div class="level-item content">
<div class="section"> <div>
<p class="subtitle is-3 is-spaced"> <h2 class="title">Your music and podcasts, anywhere</h2>
Listen to your music, everywhere <p>
</p> Listen to your music and podcasts from your web browser, or a wide
<p class="title is-5"> range of compatible apps for every platform. Yes, this includes the
Upload your personal library to your pod, share it with friends and family, and discover talented subsonic client of your choice and your favourite podcast app.
creators. </p>
</p> </div>
<p> </div>
Funkwhale gives you access to your playlists, favorite tracks, and artists everywhere, from our <div class="level-item image">
web interface or the wide range of compatible apps for every platform. <img src="{{ site_url }}/theme/images/placeholder.png">
</p> </div>
<a class="button is-text mt-4 is-fullwidth">Get started!</a> </div>
</div> <div class="level">
</div> <div class="level-item image">
<div class="column"> <img src="{{ site_url }}/theme/images/placeholder.png">
<div class="block has-text-centered"> </div>
<figure class="image is-inline-block"> <div class="level-item content">
<img style="max-height: 440px" <div>
src="{{ main_siteurl }}/theme/images/mobile.jpg"> <h2 class="title">Share your music library</h2>
</figure> <p>Share privately your playlists and albums, or whole parts of your library, with your friends and family. Promote free art by sharing it with the pod community, or with the entire federation.</p>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="container is-max-desktop"> <div class="level">
<div class="columns"> <div class="level-item content">
<div class="column"> <div>
<div class="block has-text-centered"> <h2 class="title">Extend your horizon</h2>
<figure class="image is-inline-block"> <p>Explore the content shared by the community to discover new artists and podcasts. Keep tracks of your favourites in your library.</p>
<img style="max-height: 440px" </div>
src="{{ main_siteurl }}/theme/images/network.jpg"> </div>
</figure> <div class="level-item image">
</div> <img src="{{ site_url }}/theme/images/placeholder.png">
</div> </div>
<div class="column is-three-fifths"> </div>
<div class="section"> <div class="level">
<p class="subtitle is-3 is-spaced"> <div class="level-item image">
A decentralized and open platform <img src="{{ site_url }}/theme/images/placeholder.png">
</p> </div>
<p class="title is-5"> <div class="level-item content">
Funkwhale consists of many independent pods which can communicate together. <div>
</p> <h2 class="title">Publish your work</h2>
<p> <p>Create as many channel as music band or podcast show you participate in, and let people get notified of your latest releases. Use our export widget to embed your content on other platforms and websites.</p>
This is based on open standards and free and open source technology. The network is not tied to any corporation or entity, which gives you independence and choice. </div>
</p> </div>
<a class="button is-text mt-4 is-fullwidth">Find or start your pod</a> </div>
</div> </div>
</div> </section>
</div> {% include "inc/instances.html" %}
</div> {% include "inc/blogposts.html" %}
</section>
{% include "inc/instances.html" %}
{% include "inc/blogposts.html" %}
{% endblock %} {% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment