Move to one column for homepage
This commit is contained in:
Chocobozzz
parent
a9bfc47cc1
commit
9f5fa102de
3 changed files with 112 additions and 114 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,52 +93,52 @@
|
||||||
</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>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<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">
|
||||||
<span class="text" v-translate>Discover PeerTube instances</span>
|
<span class="text" v-translate>Discover PeerTube instances</span>
|
||||||
<icon-right></icon-right>
|
<icon-right></icon-right>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="two-columns">
|
|
||||||
<div>
|
|
||||||
<p v-translate>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="citation">
|
|
||||||
<div class="left-bar"></div>
|
|
||||||
|
|
||||||
<div class="text" v-translate>This is just how a <strong>federation</strong> works!</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img :src="buildImgUrl('peertube-federation-2-instances.png')" alt="Funny 2 instances communication schema"/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-translate class="bottom-two-columns">
|
<div class="one-column">
|
||||||
And there's more! PeerTube uses Activity Pub, a federating protocol that <strong>allows you to interact with other software</strong>,
|
<p v-translate>
|
||||||
provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected:
|
You can still watch from your account videos hosted by other instances though
|
||||||
<strong>you can follow a PeerTube user from Mastodon</strong> (the latest videos from the PeerTube account you follow will appear in your feed),
|
if the administrator of your instance had previously connected it with other instances.
|
||||||
<strong>and even comment on a PeerTube-hosted video directly from your Mastodon's account.</strong>
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- TODO: find interesting resource regarding federation-->
|
<div class="citation">
|
||||||
<!-- <div class="bottom-link-wrapper">-->
|
<div class="left-bar"></div>
|
||||||
<!-- <a href="#" class="bottom-link">-->
|
|
||||||
<!-- <span class="text" v-translate>Learn more about the federation</span>-->
|
<div class="text" v-translate>This is just how a <strong>federation</strong> works!</div>
|
||||||
<!-- <icon-right></icon-right>-->
|
</div>
|
||||||
<!-- </a>-->
|
</div>
|
||||||
<!-- </div>-->
|
|
||||||
|
<div class="one-column">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 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,46 +147,44 @@
|
||||||
<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.
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="citation">
|
<div class="citation">
|
||||||
<div class="left-bar"></div>
|
<div class="left-bar"></div>
|
||||||
|
|
||||||
<div class="text" v-translate>
|
<div class="text" v-translate>
|
||||||
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p v-translate>
|
||||||
|
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
|
||||||
|
(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>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="bottom-two-columns" v-translate>
|
<!-- TODO: find interesting resource regarding free softwares -->
|
||||||
Most importantly, <strong>you are a person to PeerTube, not a product in need of profiling so as to be stuck in video
|
<!-- <div class="bottom-link-wrapper">-->
|
||||||
loops.</strong>
|
<!-- <a href="#" class="bottom-link">-->
|
||||||
For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end.
|
<!-- <span class="text" v-translate>Learn more about free/libre software </span>-->
|
||||||
</p>
|
<!-- <icon-right></icon-right>-->
|
||||||
|
<!-- </a>-->
|
||||||
<p class="bottom-two-columns" v-translate>
|
<!-- </div>-->
|
||||||
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
|
|
||||||
(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>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- TODO: find interesting resource regarding free softwares -->
|
|
||||||
<!-- <div class="bottom-link-wrapper">-->
|
|
||||||
<!-- <a href="#" class="bottom-link">-->
|
|
||||||
<!-- <span class="text" v-translate>Learn more about free/libre software </span>-->
|
|
||||||
<!-- <icon-right></icon-right>-->
|
|
||||||
<!-- </a>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="you-are-a-video-maker">
|
<div id="you-are-a-video-maker">
|
||||||
|
|
@ -195,38 +193,36 @@
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="text" v-translate>
|
<div class="text" v-translate>
|
||||||
With PeerTube, chose <strong>your hosting company and the rules you believe in.</strong>
|
With PeerTube, chose <strong>your hosting company and the rules you believe in.</strong>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-translate>
|
|
||||||
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.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="citation bottom-two-columns">
|
<div v-translate>
|
||||||
<div class="left-bar"></div>
|
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.
|
||||||
<div class="text" v-translate>
|
|
||||||
Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company,
|
|
||||||
and <strong>you can nurture a special relationship with your hoster, who distributes your data.</strong>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bottom-two-columns" v-translate>
|
<div class="citation">
|
||||||
With PeerTube, you get to choose your hosting provider according to their terms of use, such as their disk space limit per user,
|
<div class="left-bar"></div>
|
||||||
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...
|
<div class="text" v-translate>
|
||||||
|
Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company,
|
||||||
|
and <strong>you can nurture a special relationship with your hoster, who distributes your data.</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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,
|
||||||
|
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...
|
||||||
|
</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">
|
||||||
|
|
@ -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,20 +247,20 @@
|
||||||
<strong>lowering the load of their hosts.</strong>
|
<strong>lowering the load of their hosts.</strong>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p v-translate>
|
||||||
|
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
|
||||||
|
video to the other viewers.
|
||||||
|
<strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="bottom-two-columns" v-translate>
|
|
||||||
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
|
|
||||||
video to the other viewers.
|
|
||||||
<strong>The server resources are not over-exploited</strong>: the stream is split, the network optimized.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="bottom-two-columns" v-translate>
|
|
||||||
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
|
|
||||||
robust but extremely expensive independent video host.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="your-move">
|
<div id="your-move">
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue