nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 Pull requests Releases Wiki Activity

Move to one column for homepage

Browse source
This commit is contained in:
Chocobozzz 2019-10-31 16:42:42 +01:00
parent a9bfc47cc1
commit 9f5fa102de
No known key found for this signature in database
GPG key ID: 583A612D890159BE
3 changed files with 112 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/scss/_mixins.scss
View file

@ -13,7 +13,6 @@
margin: auto; margin: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
img { img {
margin: 30px 0; margin: 30px 0;

4
src/scss/main.scss
View file

@ -192,12 +192,14 @@ p > a {
font-family: 'Proza Libre', sans-serif; font-family: 'Proza Libre', sans-serif;
font-size: 24px; font-size: 24px;
font-weight: $font-semibold; font-weight: $font-semibold;
margin-top: 100px;
white-space: nowrap; white-space: nowrap;
margin: 100px auto 0;
width: 600px;
@media screen and (max-width: $responsive-screen) { @media screen and (max-width: $responsive-screen) {
white-space: normal; white-space: normal;
margin-top: 50px; margin-top: 50px;
width: 100%;
} }
} }

83
src/views/Home.vue
View file

@ -79,7 +79,7 @@
<div class="border-title"></div> <div class="border-title"></div>
</div> </div>
<div class="two-columns"> <div class="one-column">
<img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/> <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Funny federation schema"/>
<div> <div>
@ -93,9 +93,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<p v-translate class="bottom-two-columns"> <p v-translate>
Anyone with a modicum of technical skills can host a PeerTube server, aka an instance. Anyone with a modicum of technical skills can host a PeerTube server, aka an instance.
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>
@ -107,9 +106,9 @@
<icon-right></icon-right> <icon-right></icon-right>
</router-link> </router-link>
</div> </div>
</div>
<div class="two-columns"> <div class="one-column">
<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.
@ -122,23 +121,24 @@
</div> </div>
</div> </div>
<div class="one-column">
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/> <img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
<p v-translate>
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:
<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>
</p>
</div> </div>
<p v-translate class="bottom-two-columns"> <!-- TODO: find interesting resource regarding federation-->
And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>, <!-- <div class="bottom-link-wrapper">-->
provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected: <!-- <a href="#" class="bottom-link">-->
<strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed), <!-- <span class="text" v-translate>Learn more about the federation</span>-->
<strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong> <!-- <icon-right></icon-right>-->
</p> <!-- </a>-->
<!-- </div>-->
<!-- TODO: find interesting resource regarding federation-->
<!-- <div class="bottom-link-wrapper">-->
<!-- <a href="#" class="bottom-link">-->
<!-- <span class="text" v-translate>Learn more about the federation</span>-->
<!-- <icon-right></icon-right>-->
<!-- </a>-->
<!-- </div>-->
</div> </div>
<div class="free-software"> <div class="free-software">
@ -147,10 +147,9 @@
<div class="border-title"></div> <div class="border-title"></div>
</div> </div>
<div class="two-columns"> <div class="one-column">
<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.
@ -163,30 +162,29 @@
Peertube is not subject to any corporate monopoly, does not rely on ads and <strong>does not track you.</strong> Peertube is not subject to any corporate monopoly, does not rely on ads and <strong>does not track you.</strong>
</div> </div>
</div> </div>
</div>
</div>
<p class="bottom-two-columns" 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 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> 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>
<p class="bottom-two-columns" v-translate> <p v-translate>
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 This free/libre license <strong>guarantees our fundamental freedoms as users and allows many contributors to offer evolutions
and new features.</strong> and new features.</strong>
</p> </p>
</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">-->
<!-- <a href="#" class="bottom-link">--> <!-- <a href="#" class="bottom-link">-->
<!-- <span class="text" v-translate>Learn more about free/libre software </span>--> <!-- <span class="text" v-translate>Learn more about free/libre software </span>-->
<!-- <icon-right></icon-right>--> <!-- <icon-right></icon-right>-->
<!-- </a>--> <!-- </a>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
<div id="you-are-a-video-maker"> <div id="you-are-a-video-maker">
@ -195,10 +193,9 @@
<div class="border-title"></div> <div class="border-title"></div>
</div> </div>
<div class="two-columns"> <div class="one-column">
<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>
@ -211,10 +208,8 @@
YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright") YouTube has clearly gone astray: its hoster, Google-Alphabet, can enforce its ContentID system (the infamous "Robocopyright")
or its videos recommendation system, all of which appear to be as obscure as unfair. or its videos recommendation system, all of which appear to be as obscure as unfair.
</div> </div>
</div>
</div>
<div class="citation bottom-two-columns"> <div class="citation">
<div class="left-bar"></div> <div class="left-bar"></div>
<div class="text" v-translate> <div class="text" v-translate>
@ -223,11 +218,12 @@
</div> </div>
</div> </div>
<div class="bottom-two-columns" v-translate> <div v-translate>
With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user, With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user,
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>
<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>
@ -240,7 +236,7 @@
<div class="border-title"></div> <div class="border-title"></div>
</div> </div>
<div class="two-columns"> <div class="one-column">
<img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/> <img :src="buildImgUrl('peertube-p2p.png')" alt="PeerTube P2P illustration"/>
<div class="citation"> <div class="citation">
@ -251,21 +247,21 @@
<strong>lowering the load of their hosts.</strong> <strong>lowering the load of their hosts.</strong>
</div> </div>
</div> </div>
</div>
<p class="bottom-two-columns" v-translate> <p v-translate>
In this way, when you watch a video, your computer contributes to its broadcast. In this way, when you watch a video, your computer contributes to its broadcast.
If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the If a lot of people are watching the same video at the same time, their browser automatically send smalls pieces of the
video to the other viewers. video to the other viewers.
<strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized. <strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
</p> </p>
<p class="bottom-two-columns" v-translate> <p v-translate>
It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer It might not look like it, but thanks to peer-to-peer broadcasting, popular video makers and their videos are no longer
forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a forced to be hosted by big companies, whose infrastructure can stand thousands of views at the same time... or to pay for a
robust but extremely expensive independent video host. robust but extremely expensive independent video host.
</p> </p>
</div> </div>
</div>
<div id="your-move"> <div id="your-move">
<div class="subtitle"> <div class="subtitle">
@ -332,7 +328,8 @@
<p> <p>
<strong v-translate> <strong v-translate>
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>