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:
parent
0f66a8cc99
commit
497a7cebcc
@ -48,7 +48,7 @@ module.exports = {
|
||||
{
|
||||
resolve: 'gatsby-remark-images',
|
||||
options: {
|
||||
maxWidth: 640,
|
||||
maxWidth: 666,
|
||||
quality: 80,
|
||||
withWebp: true,
|
||||
linkImagesToOriginal: false,
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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%;
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user