From fb46744b0a8503eefac23fd98bce5f75c15ab99f Mon Sep 17 00:00:00 2001 From: TobiGr Date: Sat, 20 Jun 2020 19:11:30 +0200 Subject: [PATCH] Add new download section --- _includes/release_data.html | 21 +++ css/home.css | 217 +++++++++++++++++++++++++ css/style.css | 3 + img/fdroid-logo.svg | 310 ++++++++++++++++++++++++++++++++++++ index.html | 262 ++++++++++++++++++++---------- 5 files changed, 726 insertions(+), 87 deletions(-) create mode 100644 _includes/release_data.html create mode 100644 css/home.css create mode 100644 img/fdroid-logo.svg diff --git a/_includes/release_data.html b/_includes/release_data.html new file mode 100644 index 00000000..bb6ad24b --- /dev/null +++ b/_includes/release_data.html @@ -0,0 +1,21 @@ +{{ +# We cannot use a data file for two reasons: +# 1. We'd need to escape every single '>' in the changelog +# 2. We cannot use Liquid tags to generate the post URL and therefore would be required to put in an absolute URL +# +# releaseChangelog should contain the release highlights of the latest NewPipe release +# releasePostUrl should contain the URL to the corresponding blog post. If there is no blog post for this release, +# leave the inner of the capture group empty. When accessing this field, ensure to check if +# releasePostUrl is empty: releasePostUrl != empty +}} +{%- capture releaseChangelog -%} + +{%- endcapture -%} + +{%- capture releasePostUrl -%} + +{%- endcapture -%} diff --git a/css/home.css b/css/home.css new file mode 100644 index 00000000..cea780bb --- /dev/null +++ b/css/home.css @@ -0,0 +1,217 @@ +.tile.tile-bordered { + padding: 0 15px; + background: none; +} + +.tile.tile-bordered > .row > [class^="col-"], +.tile.tile-bordered > .row.is-flex > [class^="col-"] { + margin-bottom: 0; + background: #E2DEE0; + padding: 10px; + border-top: 1px solid #BBB; + border-left: 1px solid #BBB; +} + +.tile.tile-bordered > .row > [class^="col-"] { + border-right: 1px solid #BBB; +} +.tile.tile-bordered > .row > .col-sm-6:nth-child(2n+1) { + border-right: 0; +} + +.tile.tile-bordered > .row:last-child > [class^="col-"] { + border-bottom: 1px solid #BBB; +} + +.tile.tile-bordered > .row > .col-md-8 { + padding: 30px 30px 15px 30px; +} + +.download-version-container { + text-align: center; + padding: 15px; +} + +.download-version-container .download-version-icon { + margin-bottom: 15px; +} + +.download-version-container .download-version-icon img { + width: 100%; + max-height: 10em; + max-width: 10em; + margin-left: auto; + margin-right: auto; +} + +.download-version-container .download-version-requirements { + font-size: small; +} + +#download-info-carousel-container { + height: 100%; +} + +#download1 .carousel { + height: calc(100% - 24px); /* height of indicators */ +} + +#download1 .carousel .carousel-inner { + height: 100%; +} + +#download1 .carousel .carousel-inner .item { + padding: 10px 10px 0 10px; +} + +#download1 .carousel .carousel-inner .item .col-lg-6 { + margin-bottom: 0; +} + +#download1 .carousel .carousel-control.left, +#download1 .carousel .carousel-control.right { + display: none; + color: black; + opacity: 1; +} + +#download1 .carousel:hover .carousel-control.left { + background: linear-gradient(to right, rgba(226,222,224,1) 0%, rgba(226,222,224,0.5) 75%, rgba(226,222,224,0) 100%); + display: initial; +} + +#download1 .carousel:hover .carousel-control.right { + background: linear-gradient(to left, rgba(226,222,224,1) 0%, rgba(226,222,224,0.5) 75%, rgba(226,222,224,0) 100%); + display: initial; +} + +#download1 .carousel .carousel-control.left:hover { + background: linear-gradient(to right, rgba(226,222,224,1) 0%, rgba(226,222,224,0.8) 75%, rgba(226,222,224,0.5) 100%); +} + +#download1 .carousel .carousel-control.right:hover { + background: linear-gradient(to left, rgba(226,222,224,1) 0%, rgba(226,222,224,0.8) 75%, rgba(226,222,224,0.5) 100%); +} + +#download1 .carousel .carousel-indicators { + position: relative; + bottom: 0; + margin-bottom: 0; +} + +#download1 .carousel .carousel-indicators > li { + border-color: #333; + background-color: #333; + width: 8px; + height: 8px; +} +#download1 .carousel .carousel-indicators > li.active { + width: 10px; + height: 10px; +} +#download-newpipe-qr-code-container-col { + display: none; +} +#download-newpipe-qr-code-container { + width: 100%; +} + +@media (max-width: 991px) { + #download1 .row.is-flex > [class^="col-"]:nth-child(n+3) { + border-top-width: 0; + } +} + +@media (min-width: 768px) { + /* align "read more" button with "download NewPipe Legacy" button */ + /* */ + #download1 .download-info-container { + /* 100% - height of heading - padding bottom of .download-version-container */ + height: calc(100% - 29.8px - 15px); + } + #download1 .download-info-content { + height: 100%; + } + #download1 .download-info-content .button-small { + margin-bottom: 5px; + } + #download-info-changelog, + #download-info-help { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + /* */ +} + +@media (min-width: 992px) { + #download-newpipe-qr-code-container-col { + display: block; + } + #download-newpipe-qr-code-container img { + width: 100%; + max-width: 12.5em; + } + + /* Re-order grid on medium and larger devices */ + /* Just as a British Speaker used to call in a very honourable house:Oooooorder! */ + #download1 .row.is-flex > [class^="col-"]:nth-child(1) { + order: 1; + border-bottom: none; + } + #download1 .row.is-flex > [class^="col-"]:nth-child(2) { + order: 3; + border-right: none; + } + #download1 .row.is-flex > [class^="col-"]:nth-child(3) { + order: 2; + border-right: 1px solid #BBB; + border-bottom: 0; + } + #download1 .row.is-flex > [class^="col-"]:nth-child(4) { + order: 4; + border-right: none; + } + #download1 .row.is-flex > [class^="col-"]:nth-child(5) { + order: 5; + } +} + +#get-started .row > [class^="col-"] { + padding: 10px 30px; +} +#get-started .row.is-flex > [class^="col-"] { + padding: 30px; +} +#get-started .row.is-flex > a[class^="col-"] { + padding-top: 10px; + padding-bottom: 10px; +} + +@media (min-width: 992px) { + #get-started .row.is-flex > div.col-md-4:not(:last-of-type), + #get-started .row.is-flex > a.col-md-4:not(:last-of-type), + #get-started .row.text-center > [class^="col-"]:not(:last-of-type) { + border-right-width: 0; + } + /* Re-order grid on medium and larger devices */ + #get-started .row.is-flex > [class^="col-"]:nth-child(1) { + order: 1; + } + #get-started .row.is-flex > [class^="col-"]:nth-child(2) { + order: 4; + } + #get-started .row.is-flex > [class^="col-"]:nth-child(3) { + order: 2; + } + #get-started .row.is-flex > [class^="col-"]:nth-child(4) { + order: 5; + } + #get-started .row.is-flex > [class^="col-"]:nth-child(5) { + order: 3; + } + #get-started .row.is-flex > [class^="col-"]:nth-child(6) { + order: 6; + } +} diff --git a/css/style.css b/css/style.css index 8971aa3f..94166c50 100644 --- a/css/style.css +++ b/css/style.css @@ -73,6 +73,9 @@ body.modal-open { .text-justify-md { text-align: justify; } + .text-left-md { + text-align: left; + } } /* Large devices (large desktops, 1200px and up) */ diff --git a/img/fdroid-logo.svg b/img/fdroid-logo.svg new file mode 100644 index 00000000..0746785c --- /dev/null +++ b/img/fdroid-logo.svg @@ -0,0 +1,310 @@ + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 135adf2d..2216a8aa 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,11 @@ --- --- +{%- include release_data.html -%} + {%- include head.html bodyID = "main-page" + extraCSS = "home.css" page = "False" %} @@ -475,109 +478,185 @@

What other people think

-

Download NewPipe

+

Get NewPipe

-
-
-
-
-

F-Droid

-
- -

Latest version on F-Droid

- -
- - - get it on F-Droid - -
+ +
+
+
+
+
+ NewPipe icon +
+
+ Android 4.4+
-

- - +

+ + NewPipe -

+
- -
-

GitHub

-
-

Latest version on Github

- -
- - - GitHub logo - -
+
+
+
+
+ NewPipe legacy icon
-

- - +

+ Android 4.1+ +
+
+ + NewPipe legacy -

+
- -
- - -
-
- - -

F-Droid

-
- +
@@ -599,14 +678,14 @@

NewPipe is free and open source

  • Dozens of people bring NewPipe forward and translate it into 60+ languages.
  • You can check the source code on GitHub and contribute to NewPipe.
  • NewPipe is covered by the GPL 3.0 license.
    • -
  • Get NewPipe from F-Droid and we guarantee that it is generated from the source code.
    • +
  • Get NewPipe from F-Droid and discover more FOSS apps.
  • NewPipe is available for free

    • Contribute 8000+ Translate - Improve this site + Improve this site

    @@ -696,6 +775,15 @@

    Support our developers

    }); downloadFdroidSwiper.run(); } + + // collapse qr-code + $(document).ready(function () { + let $qrCodeToggled = $('.f-droid-qr-code-toggled'); + $('#f-droid-qr-code-toggle').click(function () { + $qrCodeToggled.toggleClass('shown'); + $qrCodeToggled.toggleClass('hidden'); + }); + });