1
0
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:
Matthias Kretschmann 2019-05-24 12:00:16 +02:00
parent 65f04b9f62
commit 8e3c0a62d2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 23 additions and 15 deletions

View File

@ -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;

View File

@ -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});
}
} }
} }

View File

@ -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;
} }
} }