1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-06-29 00:58:02 +02: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',
options: {
maxWidth: 640,
maxWidth: 666,
quality: 80,
withWebp: true,
linkImagesToOriginal: false,

View File

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

View File

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

View File

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

View File

@ -28,14 +28,14 @@
flex-wrap: wrap;
padding: $spacer $spacer * $line-height;
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;
background: $brand-white;
height: 100%;
&:hover,
&:focus {
box-shadow: rgba($brand-black, .15) 0px 12px 20px;
box-shadow: rgba($brand-black, .1) 0px 12px 20px;
svg {
transform: translate3d(.2rem, 0, 0);

View File

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

View File

@ -7,17 +7,30 @@
}
.sidebar {
flex: 0 0 30%;
padding-right: $spacer * 2;
flex: 0 0 27%;
padding-right: $spacer;
margin-top: $spacer / 2;
position: sticky;
top: $spacer;
+ .main {
flex: 0 0 70%;
max-width: $break-point--small;
flex: 0 0 73%;
}
}
.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 {
composes: main;
max-width: $break-point--small;
margin: auto;
}