Skip to content

Commit

Permalink
Several improvements:
Browse files Browse the repository at this point in the history 
Rename info to download
Fix tablet version bugs
Improve tablet design
  • Loading branch information
@TobiGr
TobiGr committed Mar 13, 2018
1 parent 5d16c05 commit e9c4f11
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 65 deletions.
139 changes: 95 additions & 44 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,17 @@ strong.extra {
#features {
background: #f3eff2;
}
#features #features-title {
font-size: 28px;
color: #cd201f;
text-align: center;
margin-bottom: 30px;
}
@media (min-width: 768px) {
#features #features-title {
display: none;
}
}
#features .row.is-flex > [class*='col-'] {
flex: 1 auto;
}
Expand Down Expand Up @@ -459,15 +470,20 @@ strong.extra {
display: flex;
}
#features #features-sidebar .list-group > .active > .list-group-item {
border: 1px solid #BBB;
border-left-color: #d0cdcd;
border-right-width: 0;
border-radius: 0;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 29px;
background: #d0cdcd;
}
@media (min-width: 768px) and (max-width: 991px) {
#features #features-sidebar .list-group .list-group-item {
width: 50%;
float: left;
}
#features #features-sidebar .list-group a:nth-child(2n-1) .list-group-item {
border-right: 4px solid #f3eff2;
}
#features #features-sidebar .list-group a:nth-child(2n) .list-group-item {
border-left: 3px solid #f3eff2;
}
}
@media (min-width: 992px) {
#features #features-sidebar .list-group {
margin-top: 23px;
Expand All @@ -478,6 +494,12 @@ strong.extra {
border-top-width: 0;
}
#features #features-sidebar .list-group > .active > .list-group-item {
border: 1px solid #BBB;
border-left-color: #d0cdcd;
border-right-width: 0;
border-radius: 0;
padding-top: 16px;
padding-bottom: 16px;
margin-left: -1px;
padding-left: 30px;
}
Expand Down Expand Up @@ -757,7 +779,7 @@ strong.extra {
width: 100%;
}
}
@media (min-width: 768px) {
@media (min-width: 992px) {
#tiles .tile.tile-left {
border-right: 7px solid #f3eff2;
}
Expand Down Expand Up @@ -803,6 +825,15 @@ strong.extra {
margin-bottom: 15px;
}
@media (min-width: 768px) {
#tile-opensource .tile-description h4 {
text-align: left;
font-size: 24px;
}
#tile-opensource .button-wrapper {
text-align: left;
}
}
@media (min-width: 992px){
#tile-opensource .tile-media {
max-width: 300px;
margin-bottom: 0;
Expand All @@ -813,17 +844,8 @@ strong.extra {
margin-right: 15px;
float: right;
}
#tile-opensource .tile-description h4 {
text-align: left;
font-size: 24px;
}
#tile-opensource .button-wrapper {
text-align: left;
}
}



#tile-opensource button.action {
margin-right: 15px;
}
Expand Down Expand Up @@ -875,73 +897,101 @@ strong.extra {
display: none;
}

/* Info */
/* Download */

#info {
#download {
padding: 0 !important;
background: none !important;
}
@media (min-width: 768px) {
#info {
#download {
background: #E2DEE0 !important;
}
}
#info a {
#download a {
color: #cd201f;
}
.info-table {
.download-table {
background: #E2DEE0;
padding: 15px;
}
.info-table > .row.is-flex > [class*="col-"] {
.download-table > .row.is-flex > [class*="col-"] {
display: flex !important;
justify-content: stretch;
}
.info-table h4 {
.download-table h4 {
color: #cd201f;
text-align: center;
margin-top: 15px;
}
.info-version {
.download-version {
text-align: center;
color: #8c8c8c;
font-size: 15px;
}
.info {
.download-info {
flex-grow: 1;
}
.info ul {
.download-info ul {

}
.info ul > li {
.download-info ul > li {

}
.info-action {
.download-action {
text-align: center;
font-size: 25px;
padding: 5px 15px;
}
@media (max-width: 767px) {
.info-table {
@media (max-width: 1199px) {
.download-table {
padding-top: 0;
padding-bottom: 0;
}
.info-table > .row.is-flex > [class*="col-"] {
width: 100%;
border-top: 15px solid #f3eff2;
#download-stable, #download-beta, #download-f-droid {
padding: 15px 30px 0 30px;
}
.info-table > .row.is-flex > [class*="col-"]:first-child {
#download-stable, #download-beta {
border-top-width: 0;
margin-bottom: 0;
}
.info-action {
#download-stable {
border-right: 7px solid #f3eff2;
}
#download-beta {
border-left: 7px solid #f3eff2;
}
#download-f-droid {
border-top: 15px solid #f3eff2;
}
}

@media (max-width: 991px) {
#download-stable, #download-beta {
border-top: 15px solid #f3eff2;
}
.download-action {
padding: 15px;
}
}
@media (min-width: 768px) {
.info-title {

@media (max-width: 767px) {
.download-table > .row.is-flex > [class*="col-"]:first-child {
border-top-width: 0;
}
#download-stable, #download-beta {
border-left-width: 0;
border-right-width: 0;
margin-bottom: 15px;
}
}

@media (min-width: 992px) {
.download-title {
font-size: 24px;
}
}
@media (min-width: 1200px) {
.border-middle {
width: 1px;
height: calc(100% - 35px);
Expand All @@ -956,34 +1006,35 @@ strong.extra {
right: 0;
}
}

/* Carousel */
.info .carousel {
.download-info .carousel {

}
.info .carousel ol.carousel-indicators {
.download-info .carousel ol.carousel-indicators {
position: relative;
bottom: 0;
}
.info .carousel ol.carousel-indicators > li {
.download-info .carousel ol.carousel-indicators > li {
border-color: #000;
background-color: #000;
width: 5px;
height: 5px;
border-radius: 100%;
}
.info .carousel ol.carousel-indicators > li.active {
.download-info .carousel ol.carousel-indicators > li.active {
width: 8px;
height: 8px;
}
.info .carousel .carousel-control {
.download-info .carousel .carousel-control {
display: none;
}
@media (min-width: 768px) {
/* Fixed height to prevent the container
from jumping when the paragraphs have different heights
each line has a height of 24px plus 10px margin-bottom
for the last paragraph. Max number of line: 5 */
.info .carousel .carousel-inner {
.download-info .carousel .carousel-inner {
height: 130px;
}
}
Expand Down
43 changes: 22 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,9 @@ <h3>the lightweight<br>YouTube experience<br>for Android</h3>

<!-- features -->
<div id="features">
<div class="container container-double">
<h3 id="features-title">Main Features</h3>
</div>
<div class="container container-double">
<div class="row is-flex">
<div class="col-md-9 feature-detail" id="lightweight">
Expand Down Expand Up @@ -421,12 +424,12 @@ <h3>Live Stream and 4k</h3>
<div class="container container-double">
<div class="row is-flex">

<div class="col-lg-12">
<div class="col-xs-12">
<hr class="separator hidden-md" />
</div>

<!-- User Voices -->
<div class="col-lg-12 tile" id="user-voices">
<div class="col-xs-12 tile" id="user-voices">
<h3>What other people think</h3>
<div id="user-voices-carousel" class="carousel slide" data-ride="carousel" data-interval="5000">

Expand Down Expand Up @@ -490,51 +493,49 @@ <h3>What other people think</h3>
</div>

<!-- Download -->
<div class="col-lg-12">
<div class="col-xs-12">
<h3 class="title">Download NewPipe</h3>
</div>
<div class="col-lg-12 tile" id="info">
<div class="info-table" id="info-download">
<div class="col-xs-12 tile" id="download">
<div class="download-table">
<div class="row is-flex">
<div class="col-md-4">
<div class="col-xs-12 col-sm-6 col-lg-4" id="download-stable">
<h4>Stable</h4>
<div class="info">
<p class="info-version api-stable-version">0.12.0</p>
<div class="download-info">
<p class="download-version api-stable-version">0.12.0</p>
<p class="text-center"><strong>New</strong></p>
<div class="api-stable-new"></div>
</div>
<p class="info-action">
<p class="download-action">
<a href="https://f-droid.org/packages/org.schabi.newpipe/">
<i class="fa fa-download"></i>
</a>
</p>
</div>

<div class="col-md-4 col-md-push-4">
<div class="col-xs-12 col-sm-6 col-lg-4 col-lg-push-4" id="download-beta">
<h4>Beta</h4>
<div class="info">
<p class="info-version api-beta-version">1.0.0</p>
<div class="download-info">
<p class="download-version api-beta-version">1.0.0</p>
<p class="text-center"><strong>New</strong></p>
<div id="api-beta-new"></div>
</div>
<p class="info-action">
<p class="download-action">
<a href="https://f-droid.org/packages/org.schabi.newpipe.beta/">
<i class="fa fa-download"></i>
</a>
</p>
</div>

<div class="col-md-4 col-md-pull-4">
<div class="col-xs-12 col-lg-4 col-lg-pull-4" id="download-f-droid">

<!-- borders -->
<div class="border-middle left"></div>
<div class="border-middle right"></div>

<!-- color: #1976d2 -->
<h4>F-Droid</h4>
<div class="info">
<p class="info-version" id="table-version"></p>

<div class="download">
<div id="f-droid-carousel" class="carousel slide" data-ride="carousel" data-interval="6000">

<!-- Wrapper for slides -->
Expand Down Expand Up @@ -575,7 +576,7 @@ <h4>F-Droid</h4>

</div>
</div>
<p class="info-action">
<p class="download-action">
<a href="https://f-droid.org/packages/org.fdroid.fdroid/">
<i class="fa fa-download"></i>
</a>
Expand All @@ -587,11 +588,11 @@ <h4>F-Droid</h4>


<!-- Open Source -->
<div class="col-lg-12">
<div class="col-xs-12">
<hr class="separator" />
</div>

<div class="col-lg-12 tile" id="tile-opensource">
<div class="col-xs-12 tile" id="tile-opensource">
<div class="tile-media">
<a href="https://github.com/TeamNewPipe/NewPipe">
<img src="/img/newpipe_on_github.svg" class="img-responsive" />
Expand Down Expand Up @@ -622,7 +623,7 @@ <h4>NewPipe is free and open source</h4>

<!-- Support -->

<div class="col-lg-12">
<div class="col-xs-12">
<h3 class="title">Support NewPipe</h3>
</div>
<div class="col-md-6 tile tile-left" id="tile-free">
Expand Down

0 comments on commit e9c4f11

Please sign in to comment.