Skip to content
GitLab
Unverified Commit 6c58bc97 authored by Georg Krause's avatar Georg Krause
Browse files

Rough implementation of the whole draft

parent cf6e3a41
Pipeline #19915 passed with stages
in 4 minutes and 13 seconds
Hide whitespace changes
Inline Side-by-side
theme/static/css/funkwhale.css
View file @ 6c58bc97
......@@ -90,3 +90,65 @@
padding-top: 24px;
border-top: 1px solid #cfcaca;
}
#get-started {
padding-top: 5rem;
background-color: #fafaf6;
margin-bottom: 0;
padding-bottom: 1.5rem;
}
#get-started .container .content {
max-width: 800px;
}
.support-us {
color: #fafaf6;
background-color: #605659;
margin-bottom: 0;
padding: 3rem 0;
}
.support-us .title {
color: #fafaf6;
}
.support-us .block .content {
max-width: 600px;
}
.footer {
background-color: #292525;
}
.footer .title {
color: #908888;
}
.footer ul li {
color: #b3afaf;
}
.footer ul li a {
color: #fffdfd;
text-decoration: none;
}
.footer ul li a:hover {
text-decoration: underline;
}
.footer .credits {
margin-top: 3.5rem;
}
.button.transparent {
background-color: transparent;
border: 1px solid #fffdfd;
color: #fffdfd;
}
.footer .button.icon {
margin: 0 10px;
width: 34px;
}
theme/templates/base.html
View file @ 6c58bc97
......@@ -17,5 +17,6 @@
<body>
{% include "inc/menu.html" %}
{% block content %}{% endblock %}
{% include "inc/footer.html" %}
</body>
</html>
theme/templates/inc/footer.html 0 → 100644
View file @ 6c58bc97
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column">
<h2 class="title">About</h2>
<ul>
<li>
<a>The Project</a>
</li>
<li>
<a>Credits</a>
</li>
<li>
<a>Contact Us</a>
</li>
</ul>
</div>
<div class="column">
<h2 class="title">Get started</h2>
<ul>
<li>
<a>Find a pod</a>
</li>
<li>
<a>Start your own pod</a>
</li>
<li>
<a>Find an app</a>
</li>
<li>
<a>Documentation</a>
</li>
</ul>
</div>
<div class="column">
<h2 class="title">Community</h2>
<ul>
<li>
<a>Help</a>
</li>
<li>
<a>Make a donation</a>
</li>
<li>
<a>Join the collective</a>
</li>
<li>
<a>Contribute</a>
</li>
</ul>
</div>
<div class="column credits">
<ul>
<li>Logo by Francis Ganding</li>
<li>Artwork by XXX</li>
<li>Website by the Funkwhale Collective</li>
<li>
<a>Logos and identity guidelines</a>
</li>
</ul>
</div>
</div>
</div>
<div class="level">
<div class="level-left">
<div class="level-item">
<button class="funkwhale button transparent">English</button>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span>Follow us</span>
<button class="funkwhale button icon transparent">
<i class="fa fa-rss" aria-hidden="true"></i>
</button>
<button class="funkwhale button icon transparent">
<i class="fa fa-mastodon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</footer>
theme/templates/index.html
View file @ 6c58bc97
......@@ -60,6 +60,73 @@
</div>
</div>
</section>
{% include "inc/instances.html" %}
{% include "inc/blogposts.html" %}
<div id="get-started">
<div class="container">
<div class="container content has-text-centered">
<h2 class="title">Get started</h2>
<p>
Sign up on an instance to upload your music library, share it, keep
track of your favourites, and more! Each instance has its own rules and
specificities, but thanks to federation you will be able to share content
with other people regardless of which pod they are using.
</p>
</div>
<div class="level">
<div class="level-item">
<div class="funkwhale card">
<h2 class="title">Join an existing pod</h2>
<p>
The easiest way to start using Funkwhale is to register an
account on one of the many available pods.
</p>
<button class="funkwhale button">Find a pot</button>
</div>
</div>
<div class="level-item">
<div class="funkwhale card">
<h2 class="title">Start your own pod</h2>
<p>
Running your own pod requires some system administration
skills, but will also give you more independence and
control.
</p>
<button class="funkwhale button">Read the docs</button>
</div>
</div>
<div class="level-item">
<div class="funkwhale card">
<h2 class="title">Third-party hosting</h2>
<p>
If you'd prefer to have someone else host your pod for you, here
are a few providers who offer hosted solution.
</p>
<button class="funkwhale button">View providers</button>
</div>
</div>
</div>
</div>
</div>
<div class="support-us">
<div class="block has-text-centered">
<div class="content container">
<h2 class="title">Support Us</h2>
<p>
Funkwhale is a community-driven project maintained by a non-profit
organization called the Funkwhale Collective. We strive at making
Funkwhale better and there are many things you can do to help!
</p>
</div>
<div class="level">
<div class="level-item">
<button class="funkwhale button transparent">Make a donation</button>
</div>
<div class="level-item">
<button class="funkwhale button transparent">Join the Collective</button>
</div>
<div class="level-item">
<button class="funkwhale button transparent">Contribute</button>
</div>
</div>
</div>
</div>
{% 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