1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00

visual hierarchy styling

This commit is contained in:
Matthias Kretschmann 2018-11-10 01:08:20 +01:00
parent 0f66a8cc99
commit 497a7cebcc
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 27 additions and 12 deletions

View File

@ -48,7 +48,7 @@ module.exports = {
{ {
resolve: 'gatsby-remark-images', resolve: 'gatsby-remark-images',
options: { options: {
maxWidth: 640, maxWidth: 666,
quality: 80, quality: 80,
withWebp: true, withWebp: true,
linkImagesToOriginal: false, linkImagesToOriginal: false,

View File

@ -1,7 +1,11 @@
@import 'variables'; @import 'variables';
.content { .content {
padding: 0 $spacer; padding: 0 $spacer / 2;
max-width: $break-point--large; max-width: $break-point--large;
margin: auto; margin: auto;
@media (min-width: $break-point--small) {
padding: 0 $spacer;
}
} }

View File

@ -2,10 +2,7 @@
.footer { .footer {
margin-top: $spacer; margin-top: $spacer;
padding-top: $spacer;
margin-bottom: $spacer; margin-bottom: $spacer;
padding-bottom: $spacer;
border-top: .1rem solid $brand-grey-lighter;
font-size: $font-size-small; font-size: $font-size-small;
text-align: center; text-align: center;

View File

@ -3,6 +3,7 @@
.repository { .repository {
padding: $spacer / $line-height; padding: $spacer / $line-height;
border: 1px solid $brand-grey-lighter; border: 1px solid $brand-grey-lighter;
background: $brand-white;
border-radius: $border-radius; border-radius: $border-radius;
margin-bottom: 4%; margin-bottom: 4%;

View File

@ -28,14 +28,14 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: $spacer $spacer * $line-height; padding: $spacer $spacer * $line-height;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: rgba($brand-black, .15) 0px 9px 18px; box-shadow: rgba($brand-black, .1) 0px 9px 18px;
color: $brand-grey; color: $brand-grey;
background: $brand-white; background: $brand-white;
height: 100%; height: 100%;
&:hover, &:hover,
&:focus { &:focus {
box-shadow: rgba($brand-black, .15) 0px 12px 20px; box-shadow: rgba($brand-black, .1) 0px 12px 20px;
svg { svg {
transform: translate3d(.2rem, 0, 0); transform: translate3d(.2rem, 0, 0);

View File

@ -17,7 +17,7 @@ body {
font-family: $font-family-base; font-family: $font-family-base;
font-weight: $font-weight-base; font-weight: $font-weight-base;
line-height: $line-height; line-height: $line-height;
background: $brand-white; background: darken($brand-white, 1%);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;

View File

@ -7,17 +7,30 @@
} }
.sidebar { .sidebar {
flex: 0 0 30%; flex: 0 0 27%;
padding-right: $spacer * 2; padding-right: $spacer;
margin-top: $spacer / 2; margin-top: $spacer / 2;
position: sticky;
top: $spacer;
+ .main { + .main {
flex: 0 0 70%; flex: 0 0 73%;
max-width: $break-point--small; }
}
.main {
background: $brand-white;
padding: 0 $spacer;
border: 1px solid $brand-grey-lighter;
@media (min-width: $break-point--medium) {
padding: 0 $spacer * 2;
border-top: 0;
} }
} }
.mainSingle { .mainSingle {
composes: main;
max-width: $break-point--small; max-width: $break-point--small;
margin: auto; margin: auto;
} }