mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
front page layout tweaks
This commit is contained in:
parent
65f04b9f62
commit
8e3c0a62d2
@ -28,10 +28,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: $font-size-h3;
|
font-size: $font-size-h4;
|
||||||
margin-top: $spacer * 2;
|
margin-top: $spacer * 3;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
|
color: $brand-grey-light;
|
||||||
|
|
||||||
@media (min-width: $break-point--small) {
|
@media (min-width: $break-point--small) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -2,17 +2,20 @@
|
|||||||
|
|
||||||
.channel {
|
.channel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: $spacer * 2;
|
|
||||||
|
|
||||||
@media (min-width: $break-point--medium) {
|
@media (min-width: $break-point--medium) {
|
||||||
|
padding-top: $spacer * 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-right: $spacer;
|
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
|
|
||||||
|
@media (min-width: $break-point--medium) {
|
||||||
|
margin-right: $spacer;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@ -27,10 +30,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: $font-size-h4;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ .channel {
|
+ .channel {
|
||||||
border-top: 1px solid $brand-grey-lighter;
|
border-top: 1px solid $brand-grey-lighter;
|
||||||
margin-top: $spacer * 2;
|
margin-top: $spacer * 2;
|
||||||
@ -39,13 +38,20 @@
|
|||||||
|
|
||||||
.channelTitle {
|
.channelTitle {
|
||||||
margin-top: $spacer * 4;
|
margin-top: $spacer * 4;
|
||||||
|
margin-bottom: $spacer / 4;
|
||||||
|
|
||||||
@media (min-width: $break-point--medium) {
|
@media (min-width: $break-point--medium) {
|
||||||
margin-top: -($spacer / 1.5);
|
margin-top: -($spacer / 4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelHeader {
|
.channelHeader {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@media (min-width: $break-point--small) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@ -70,9 +76,9 @@
|
|||||||
|
|
||||||
@media (min-width: $break-point--small) {
|
@media (min-width: $break-point--small) {
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
|
||||||
|
|
||||||
> article {
|
> article {
|
||||||
min-width: calc(18rem + #{$spacer * 2.3});
|
min-width: calc(18rem + #{$spacer * 2.3});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -15,14 +15,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: $font-size-h3;
|
font-size: $font-size-h4;
|
||||||
margin-top: $spacer * 2;
|
margin-top: $spacer * 3;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: $spacer;
|
margin-bottom: $spacer;
|
||||||
|
color: $brand-grey-light;
|
||||||
|
|
||||||
@media (min-width: $break-point--small) {
|
@media (min-width: $break-point--small) {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-bottom: $spacer / 2;
|
margin-bottom: $spacer / $line-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user