Rework homepage according to Angie's remarks
This commit is contained in:
Chocobozzz
parent
c7435f7fc1
commit
f0262ee5fc
2 changed files with 237 additions and 172 deletions
|
|
@ -135,20 +135,27 @@ main {
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title,
|
||||||
font-size: 34px;
|
.subtitle {
|
||||||
font-weight: $font-semibold;
|
|
||||||
margin: 100px 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-family: 'Proza Libre', sans-serif;
|
|
||||||
|
|
||||||
.border-title {
|
.border-title {
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background-color: $orange;
|
background-color: $orange;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin-top: 6px;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: $font-semibold;
|
||||||
|
margin: 100px 0;
|
||||||
|
font-family: 'Proza Libre', sans-serif;
|
||||||
|
|
||||||
|
.border-title {
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-title {
|
.brand-title {
|
||||||
|
|
@ -178,6 +185,30 @@ main {
|
||||||
@include one-column;
|
@include one-column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.two-columns {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
& > img,
|
||||||
|
& > div {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > *:first-child {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 231px;
|
||||||
|
width: 416px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $responsive-screen) {
|
||||||
|
@include one-column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.bottom-link-wrapper {
|
.bottom-link-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
<div class="border-title"></div>
|
<div class="border-title"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ambition">
|
<div class="two-columns">
|
||||||
<img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>
|
<img :src="buildImgUrl('peertube-interface.png')" alt="PeerTube screen"/>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -70,11 +70,16 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="federation one-column">
|
<div class="federation">
|
||||||
<div class="subtitle" v-translate>A federation of interconnected hosting services</div>
|
<div class="subtitle" v-translate>
|
||||||
|
A federation of interconnected hosting services
|
||||||
|
<div class="border-title"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="two-columns">
|
||||||
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
|
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
|
||||||
|
|
||||||
|
<div>
|
||||||
<div class="citation">
|
<div class="citation">
|
||||||
<div class="left-bar"></div>
|
<div class="left-bar"></div>
|
||||||
|
|
||||||
|
|
@ -89,6 +94,8 @@
|
||||||
Each instance hosts its users and their videos.
|
Each instance hosts its users and their videos.
|
||||||
In this way, <strong>every instance is created, moderated and maintained independently by various administrators.</strong>
|
In this way, <strong>every instance is created, moderated and maintained independently by various administrators.</strong>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bottom-link-wrapper">
|
<div class="bottom-link-wrapper">
|
||||||
<router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
|
<router-link :to="{ path: '/instances', hash: 'instances-list' }" class="bottom-link">
|
||||||
|
|
@ -97,8 +104,8 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
|
<div class="two-columns">
|
||||||
|
<div>
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
You can still watch from your account videos hosted by other instances though
|
You can still watch from your account videos hosted by other instances though
|
||||||
if the administrator of your instance had previously connected it with other instances.
|
if the administrator of your instance had previously connected it with other instances.
|
||||||
|
|
@ -110,14 +117,16 @@
|
||||||
<div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
|
<div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img :src="buildImgUrl('peertube-mastodon-federation.png')" alt="Federation with Mastodon funny schema"/>
|
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
|
And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
|
||||||
provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
|
provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
|
||||||
<strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
|
<strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
|
||||||
<strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
|
<strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- TODO: find interesting resource regarding federation-->
|
<!-- TODO: find interesting resource regarding federation-->
|
||||||
<!-- <div class="bottom-link-wrapper">-->
|
<!-- <div class="bottom-link-wrapper">-->
|
||||||
|
|
@ -128,11 +137,16 @@
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="free-software one-column">
|
<div class="free-software">
|
||||||
<div class="subtitle" v-translate>An open-source, free/libre licence code</div>
|
<div class="subtitle" v-translate>
|
||||||
|
An open-source, free/libre licence code
|
||||||
|
<div class="border-title"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="two-columns">
|
||||||
<img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/>
|
<img :src="buildImgUrl('peertube-free-software.png')" alt="PeerTube is a free software funny schema"/>
|
||||||
|
|
||||||
|
<div>
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
Mainstream online video broadcasting services make money off of your data by analyzing your interactions
|
Mainstream online video broadcasting services make money off of your data by analyzing your interactions
|
||||||
so that they can then bombard your with targeted advertising.
|
so that they can then bombard your with targeted advertising.
|
||||||
|
|
@ -147,7 +161,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video loops.</strong>
|
Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video
|
||||||
|
loops.</strong>
|
||||||
For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
|
For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
@ -155,8 +170,11 @@
|
||||||
All of this is made possible by Peertube's free/libre license (GNU-AGPL).
|
All of this is made possible by Peertube's free/libre license (GNU-AGPL).
|
||||||
Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google
|
Its code is a digital "common", that belongs to everybody, instead of a secret formula that belongs to Google
|
||||||
(in the case of Youtube) or to Vivendi/Bolloré (Dailymotion).
|
(in the case of Youtube) or to Vivendi/Bolloré (Dailymotion).
|
||||||
This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions and new features.</strong>
|
This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions
|
||||||
|
and new features.</strong>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- TODO: find interesting resource regarding free softwares -->
|
<!-- TODO: find interesting resource regarding free softwares -->
|
||||||
<!-- <div class="bottom-link-wrapper">-->
|
<!-- <div class="bottom-link-wrapper">-->
|
||||||
|
|
@ -167,11 +185,16 @@
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="you-are-a-video-maker" class="one-column">
|
<div id="you-are-a-video-maker">
|
||||||
<div class="subtitle" v-translate>Are you a video maker?</div>
|
<div class="subtitle" v-translate>
|
||||||
|
Are you a video maker?
|
||||||
|
<div class="border-title"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="two-columns">
|
||||||
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/>
|
<img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration"/>
|
||||||
|
|
||||||
|
<div>
|
||||||
<div class="citation">
|
<div class="citation">
|
||||||
<div class="left-bar"></div>
|
<div class="left-bar"></div>
|
||||||
|
|
||||||
|
|
@ -199,17 +222,24 @@
|
||||||
their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can
|
their moderation policy, who they chose to federate with... You are not speaking with a huge tech company, so you can
|
||||||
talk it out in case of any issue, need, desire...
|
talk it out in case of any issue, need, desire...
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances">
|
<router-link :to="{ path: '/instances', hash: 'instances-list' }" class="jpt-button discover-instances">
|
||||||
<translate>Browse/discover PeerTube instances</translate>
|
<translate>Browse/discover PeerTube instances</translate>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p2p one-column">
|
<div class="p2p">
|
||||||
<div class="subtitle" v-translate>About peer-to-peer broadcasting and watching</div>
|
<div class="subtitle" v-translate>
|
||||||
|
About peer-to-peer broadcasting and watching
|
||||||
|
<div class="border-title"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="two-columns">
|
||||||
<img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
|
<img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
|
||||||
|
|
||||||
|
<div>
|
||||||
<div class="citation">
|
<div class="citation">
|
||||||
<div class="left-bar"></div>
|
<div class="left-bar"></div>
|
||||||
|
|
||||||
|
|
@ -232,11 +262,16 @@
|
||||||
robust but extremely expensive independent video host.
|
robust but extremely expensive independent video host.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="your-move">
|
||||||
|
<div class="subtitle" v-translate>
|
||||||
|
Your move!
|
||||||
|
<div class="border-title"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="you-play">
|
|
||||||
<div class="one-column">
|
<div class="one-column">
|
||||||
<div class="subtitle" v-translate>Your move!</div>
|
|
||||||
|
|
||||||
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/>
|
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="PeerTube you play illustration"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -256,12 +291,23 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div id="behind-peertube" class="one-column">
|
<section id="behind-peertube">
|
||||||
<div class="subtitle" v-translate>Who is behind PeerTube?</div>
|
<div class="section-title">
|
||||||
|
<div v-translate>
|
||||||
|
Who is behind
|
||||||
|
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
|
||||||
|
?
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-title"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="two-columns">
|
||||||
<img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/>
|
<img class="framasoft-logo" :src="buildImgUrl('framasoft-big-logo.png')" alt="Framasoft logo"/>
|
||||||
|
|
||||||
|
<div>
|
||||||
<p v-translate>
|
<p v-translate>
|
||||||
Peertube is a <strong>free/libre software funded by a French non-profit organization</strong>: Framasoft
|
Peertube is a <strong>free/libre software funded by a French non-profit organization</strong>: Framasoft
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -286,11 +332,12 @@
|
||||||
The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube.
|
The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube.
|
||||||
</strong>
|
</strong>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<a href="https://framasoft.org/#soutenir" target="_blank" rel="noopener noreferrer" class="jpt-button">
|
<a href="https://framasoft.org/#soutenir" target="_blank" rel="noopener noreferrer" class="jpt-button">
|
||||||
<span v-translate>Donate to Framasoft</span>
|
<span v-translate>Donate to Framasoft</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -389,37 +436,21 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#what-is-peertube {
|
|
||||||
.ambition {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
@media screen and (max-width: $responsive-screen) {
|
|
||||||
@include one-column;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > img,
|
|
||||||
& > div {
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-right: 30px;
|
|
||||||
height: 231px;
|
|
||||||
width: 416px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#you-are-a-video-maker {
|
#you-are-a-video-maker {
|
||||||
.discover-instances {
|
.discover-instances {
|
||||||
min-width: 420px;
|
min-width: 420px;
|
||||||
|
width: fit-content;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
margin: 50px 0;
|
margin: 50px auto;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#you-play {
|
#your-move {
|
||||||
|
.one-column {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
.buttons-row {
|
.buttons-row {
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
|
|
||||||
|
|
@ -431,13 +462,16 @@
|
||||||
|
|
||||||
#behind-peertube {
|
#behind-peertube {
|
||||||
.framasoft-logo {
|
.framasoft-logo {
|
||||||
margin: 100px 0;
|
flex-basis: auto;
|
||||||
|
width: 264px;
|
||||||
|
height: 241px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jpt-button {
|
.jpt-button {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
min-width: 420px;
|
min-width: 420px;
|
||||||
margin: 60px 0;
|
width: fit-content;
|
||||||
|
margin: 60px auto;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue