From f0262ee5fcf239c943e7fb01e31fa1a73e9295a1 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 23 Oct 2019 09:42:57 +0200 Subject: [PATCH] Rework homepage according to Angie's remarks --- src/scss/main.scss | 43 +++++- src/views/Home.vue | 366 +++++++++++++++++++++++++-------------------- 2 files changed, 237 insertions(+), 172 deletions(-) diff --git a/src/scss/main.scss b/src/scss/main.scss index 18e4cba..c27df0e 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -135,20 +135,27 @@ main { border-width: 2px; } -.section-title { - font-size: 34px; - font-weight: $font-semibold; - margin: 100px 0; +.section-title, +.subtitle { display: flex; align-items: center; - font-family: 'Proza Libre', sans-serif; .border-title { margin-left: 40px; height: 3px; background-color: $orange; 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 { @@ -178,6 +185,30 @@ main { @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 { display: flex; justify-content: flex-end; diff --git a/src/views/Home.vue b/src/views/Home.vue index 0ef8f01..88d61b4 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -54,7 +54,7 @@
-
+
PeerTube screen
@@ -70,25 +70,32 @@
-
-
A federation of interconnected hosting services
- - Funny federation schema - -
-
- -
- PeerTube is not meant to become a huge platform that would centralize videos from all around the world. - Rather, it is a network of inter-connected small videos hosters. -
+
+
+ A federation of interconnected hosting services +
-

- Anyone with a modicum of technical skills can host a PeerTube server, aka an instance. - Each instance hosts its users and their videos. - In this way, every instance is created, moderated and maintained independently by various administrators. -

+
+ Funny federation schema + +
+
+
+ +
+ PeerTube is not meant to become a huge platform that would centralize videos from all around the world. + Rather, it is a network of inter-connected small videos hosters. +
+
+ +

+ Anyone with a modicum of technical skills can host a PeerTube server, aka an instance. + Each instance hosts its users and their videos. + In this way, every instance is created, moderated and maintained independently by various administrators. +

+
+
@@ -97,28 +104,30 @@
- Funny 2 instances communication schema +
+
+

+ 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. +

-

- 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. -

+
+
-
-
+
This is just how a federation works!
+
-
This is just how a federation works!
+

+ And there's more! PeerTube uses Activity Pub, a federating protocol that allows you to interact with other software, + provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected: + you can follow a PeerTube user from Mastodon (the latest videos from the PeerTube account you follow will appear in your feed), + and even comment on a PeerTube-hosted video directly from your Mastodon's account. +

+
+ + Funny 2 instances communication schema
- Federation with Mastodon funny schema - -

- And there's more! PeerTube uses Activity Pub, a federating protocol that allows you to interact with other software, - provided they also use this protocol. For example, PeerTube and Mastodon -a Twitter alternative- are connected: - you can follow a PeerTube user from Mastodon (the latest videos from the PeerTube account you follow will appear in your feed), - and even comment on a PeerTube-hosted video directly from your Mastodon's account. -

- @@ -128,35 +137,44 @@
-
-
An open-source, free/libre licence code
- - PeerTube is a free software funny schema - -

- 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. -

- -
-
- -
- Peertube is not subject to any corporate monopoly, does not rely on ads and does not track you. -
+
+
+ An open-source, free/libre licence code +
-

- Most importantly, you are a person to PeerTube, not a product in need of profiling so as to be stuck in video loops. - For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end. -

+
+ PeerTube is a free software funny schema -

- 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 guarantees our fundamental freedoms as users and allows many contributors to offer evolutions and new features. -

+
+

+ 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. +

+ +
+
+ +
+ Peertube is not subject to any corporate monopoly, does not rely on ads and does not track you. +
+
+ +

+ Most importantly, you are a person to PeerTube, not a product in need of profiling so as to be stuck in video + loops. + For example, PeerTube doesn't use any biased recommendation algorithms to keep you online for hours on end. +

+ +

+ 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 guarantees our fundamental freedoms as users and allows many contributors to offer evolutions + and new features. +

+
+
@@ -167,76 +185,93 @@
-
-
Are you a video maker?
+
+
+ Are you a video maker? +
+
- PeerTube upload illustration +
+ PeerTube upload illustration -
-
+
+
+
-
- With PeerTube, chose your hosting company and the rules you believe in. +
+ With PeerTube, chose your hosting company and the rules you believe in. +
+
+ +
+ 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. +
+ +
+
+ +
+ Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company, + and you can nurture a special relationship with your hoster, who distributes your data. +
+
+ +
+ 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... +
-
- 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. -
- -
-
- -
- Direct contact with a human-scale hoster allows for two things: you no longer are the client of a huge tech company, - and you can nurture a special relationship with your hoster, who distributes your data. -
-
- -
- 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... -
- Browse/discover PeerTube instances
-
-
About peer-to-peer broadcasting and watching
- - PeerTube P2P illustration - -
-
- -
- The PeerTube software can, whenever necessary, use a peer-to-peer protocol (P2P) to broadcast viral videos, - lowering the load of their hosts. -
+
+
+ About peer-to-peer broadcasting and watching +
-

- 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. - The server resources are not over-exploited: the stream is split, the network optimized. -

+
+ PeerTube P2P illustration -

- 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. -

+
+
+
+ +
+ The PeerTube software can, whenever necessary, use a peer-to-peer protocol (P2P) to broadcast viral videos, + lowering the load of their hosts. +
+
+ +

+ 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. + The server resources are not over-exploited: the stream is split, the network optimized. +

+ +

+ 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. +

+
+
-
-
-
Your move!
+
+
+ Your move! +
+
+
PeerTube you play illustration
@@ -256,41 +291,53 @@
+ -
-
Who is behind PeerTube?
+
+
+
+ Who is behind + PeerTube + ? +
+
+
+ +
-

- Peertube is a free/libre software funded by a French non-profit organization: Framasoft -

+
+

+ Peertube is a free/libre software funded by a French non-profit organization: Framasoft +

-

- Our organization started in 2004, and now devotes itself to popular education about digital technology issues. - We are a small structure of less than 40 members and under 10 employees, well-known for the De-google-ify Internet project, - when we offered 34 ethical and alternative online tools. As a public interest organization, over 90% of our funding - comes from donations (tax deductible for French taxpayers). -

+

+ Our organization started in 2004, and now devotes itself to popular education about digital technology issues. + We are a small structure of less than 40 members and under 10 employees, well-known for the De-google-ify Internet project, + when we offered 34 ethical and alternative online tools. As a public interest organization, over 90% of our funding + comes from donations (tax deductible for French taxpayers). +

-

- Thanks to our crowdfunding (from March to July 2018), - Framasoft were able to employ PeerTube's main developer. - After a beta release in March 2018, release 1 came out in November 2018. - Since then, several intermediary releases have brought many features along. - Several collectives have already created PeerTube hosts, laying the foundation for the federation. -

+

+ Thanks to our crowdfunding (from March to July 2018), + Framasoft were able to employ PeerTube's main developer. + After a beta release in March 2018, release 1 came out in November 2018. + Since then, several intermediary releases have brought many features along. + Several collectives have already created PeerTube hosts, laying the foundation for the federation. +

-

- - The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube. - -

- - - Donate to Framasoft - +

+ + The more people use, support, and contribute to PeerTube, the quicker it will become a concrete alternative to platforms like YouTube. + +

+
+ + + Donate to Framasoft +
@@ -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 { .discover-instances { min-width: 420px; + width: fit-content; height: 50px; - margin: 50px 0; + margin: 50px auto; font-size: 20px; } } - #you-play { + #your-move { + .one-column { + margin-top: 50px; + } + .buttons-row { margin-top: 60px; @@ -431,13 +462,16 @@ #behind-peertube { .framasoft-logo { - margin: 100px 0; + flex-basis: auto; + width: 264px; + height: 241px; } .jpt-button { height: 50px; min-width: 420px; - margin: 60px 0; + width: fit-content; + margin: 60px auto; font-size: 20px; } }