Skip to content
Snippets Groups Projects
Commit 8fb65491 authored by Georg Krause's avatar Georg Krause
Browse files

feat: Make background take full width on huge screens

parent 21a3475d
No related branches found
No related tags found
1 merge request!64Start migration to pelican
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);
......
......@@ -68,6 +68,7 @@
}
}
</style>
<div class="background-wrapper">
<div class="feature">
<div class="content">
<h2 class="title">{% trans %}Your music and podcasts, anywhere{% endtrans %}</h2>
......@@ -108,4 +109,5 @@
<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>
</div>
</section>
......@@ -39,6 +39,7 @@
margin: 50px 5% 0;
}
</style>
<div class="background-wrapper">
<div class="columns">
<div class="column">
<h2 class="title">About</h2>
......@@ -114,4 +115,5 @@
</a>
</div>
</div>
</div>
</footer>
......@@ -38,6 +38,7 @@
}
</style>
<div class="background-wrapper">
<div class="content">
<h2 class="title" id="get-started">{% trans %}Get started{% endtrans %}</h2>
<p>
......@@ -75,4 +76,5 @@
</div>
</div>
</div>
</div>
</section>
<div class="background-wrapper">
<section class="hero">
<div class="hero-box">
<h1>{% trans %}A platform for all your audio{% endtrans %}</h1>
......@@ -12,3 +13,4 @@
src="{{ main_siteurl }}/theme/images/screenshot.png"/>
</div>
</section>
</div>
......@@ -66,8 +66,16 @@
padding: 10px 0;
}
}
@media only screen and (min-width: 1600px) {
nav.navbar {
padding-left: 0;
padding-right: 0;
}
}
</style>
{% endblock header %}
<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."
......@@ -99,3 +107,4 @@
</li>
</ul>
</nav>
</div>
......@@ -27,6 +27,7 @@
}
}
</style>
<div class="background-wrapper">
<div class="block">
<div class="content container">
<h2 class="title">{% trans %}Support Us{% endtrans %}</h2>
......@@ -40,3 +41,4 @@
</div>
</div>
</div>
</div>
{% 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,7 +18,7 @@
background-color: #fff;
}
</style>
{% endblock header %}
<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."
......@@ -54,3 +57,5 @@
</p>
</div>
</div>
</div>
</section>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment