LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Responsive tidy up

Browse source
This commit is contained in:
Minesh Mitha 2018-10-22 21:26:19 +01:00
parent 24432af454
commit 33ed0e8f59
5 changed files with 34 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/scss/asset-display/_asset-display.scss
View file

@ -42,6 +42,9 @@
max-height: 100%;
object-fit: contain;
object-position: center;
@media (max-width: $break-point-small) {
max-width: calc(100% - 30px);
}
}
.asset-video {
border: 1px solid #d0d0d0;
@ -65,6 +68,15 @@
.asset-information-wrap {
max-width: 800px;
@media (max-width: $break-point-tablet) {
max-width: 100%;
margin: 0px auto;
width: calc(100% - 80px);
}
@media (max-width: $break-point-phone) {
width: calc(100% - 30px);
}
.horizontal-split {
justify-content: center;
@ -74,7 +86,7 @@
padding-right: 40px;
margin-right: -1px;
border-right: 1px solid $grey-alt;
@media (max-width: $break-point-large) {
@media (max-width: $break-point-tablet) {
order: 2;
border: none;
padding: 0;
@ -84,7 +96,7 @@
&:last-child {
padding-left: 60px;
border-left: 1px solid $grey-alt;
@media (max-width: $break-point-large) {
@media (max-width: $break-point-tablet) {
border: none;
padding: 40px 0 0 0;
margin: 0;
@ -102,7 +114,7 @@
line-height: 18px;
width: 360px;
padding-bottom: 80px;
@media (max-width: $break-point-large) {
@media (max-width: $break-point-tablet) {
padding: 0;
width: 100%;
margin-bottom: 60px;
@ -110,9 +122,10 @@
}
.asset-information {
width: 320px;
@media (max-width: $break-point-large) {
min-width: 320px;
@media (max-width: $break-point-tablet) {
min-width: 100%;
width: 100%;
margin-bottom: 60px;
}
}
@ -123,7 +136,7 @@
padding-top: 30px;
border-top: 1px solid $grey-alt;
padding-bottom: 80px;
@media (max-width: $break-point-large) {
padding-bottom: 60px;
@media (max-width: $break-point-tablet) {
padding: 0;
}
}

2
client/scss/horizontal-split/_horizontal-split.scss
View file

@ -10,7 +10,7 @@
@media (max-width: $break-point-large ) {
@media (max-width: $break-point-tablet) {
.horizontal-split {
display : flex;

5
client/scss/share-buttons/_share-buttons.scss
View file

@ -1,7 +1,6 @@
.share-buttons {
display: flex;
align-items: center;
margin: 0 -7px;
a {
display: block;
width: 30px;
@ -40,6 +39,10 @@
}
}
&:first-child{
margin-left: 0px;
}
&:hover {
background: $brand-color;
}

2
client/scss/variables/_variables.scss
View file

@ -36,7 +36,9 @@ $text-x-small: small;
$break-point-xx-large: 1400px;
$break-point-x-large: 1290px;
$break-point-large: 1000px;
$break-point-tablet: 900px;
$break-point-medium: 800px;
$break-point-phone: 640px;
$break-point-small: 500px;
$break-point-x-small: 400px;

7
client/scss/vertical-split/_vertical-split.scss
View file

@ -6,6 +6,13 @@
align-items : center;
};
.collapse-content {
@media (max-width: $break-point-tablet) {
max-width: 100%;
width: 100%;
}
}
.collapse-content.closed{
display: none;
}