Add new download section

TeamNewPipe · Jun 20, 2020 · fb46744 · fb46744
1 parent 79e79af
commit fb46744
Show file tree

Hide file tree

Showing 5 changed files with 726 additions and 87 deletions.
diff --git a/_includes/release_data.html 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 -%}
+<ul>
+    <li>Fixed Android 10 storage access</li>
+    <li>Fixed kiosks not opened correctly</li>
+    <li>Fixed parsing of long stream duration</li>
+</ul>
+{%- endcapture -%}
+
+{%- capture releasePostUrl -%}
+
+{%- endcapture -%}
diff --git a/css/home.css 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 */
+    /* <bad code> */
+    #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;
+    }
+    /* </bad code> */
+}
+
+@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
@@ -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) */