responsive WIP
This commit is contained in:
parent
907604f7a4
commit
24432af454
3 changed files with 27 additions and 3 deletions
|
@ -74,12 +74,24 @@
|
||||||
padding-right: 40px;
|
padding-right: 40px;
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
border-right: 1px solid $grey-alt;
|
border-right: 1px solid $grey-alt;
|
||||||
|
@media (max-width: $break-point-large) {
|
||||||
|
order: 2;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:last-child {
|
&:last-child {
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
border-left: 1px solid $grey-alt;
|
border-left: 1px solid $grey-alt;
|
||||||
|
@media (max-width: $break-point-large) {
|
||||||
|
border: none;
|
||||||
|
padding: 40px 0 0 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p.asset-description {
|
p.asset-description {
|
||||||
|
@ -90,12 +102,19 @@
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
width: 360px;
|
width: 360px;
|
||||||
padding-bottom: 80px;
|
padding-bottom: 80px;
|
||||||
@media (max-width: $break-point-medium) {
|
@media (max-width: $break-point-large) {
|
||||||
padding-bottom: 60px;
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.asset-information {
|
.asset-information {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
|
@media (max-width: $break-point-large) {
|
||||||
|
min-width: 320px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -104,7 +123,7 @@
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
border-top: 1px solid $grey-alt;
|
border-top: 1px solid $grey-alt;
|
||||||
padding-bottom: 80px;
|
padding-bottom: 80px;
|
||||||
@media (max-width: $break-point-medium) {
|
@media (max-width: $break-point-large) {
|
||||||
padding-bottom: 60px;
|
padding-bottom: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -48,6 +48,10 @@ a, a:visited {
|
||||||
stroke: $grey;
|
stroke: $grey;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: $break-point-x-small) {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
.link-text {
|
.link-text {
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
margin: 15px auto 0;
|
margin: 15px auto 0;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
padding: 0;
|
||||||
svg {
|
svg {
|
||||||
stroke: $brand-color;
|
stroke: $brand-color;
|
||||||
&.plus-icon {
|
&.plus-icon {
|
||||||
|
|
Loading…
Reference in a new issue