.documentationContent {
margin-bottom: 8em; display: flex; width: 100%; justify-content: space-between; @media screen and (max-width: 740px) { margin-bottom: 4em; display: block; }
}
.inner-content {
flex: 1; max-width: 720px; @media screen and (max-width: 740px) { margin-right: 0; } & > h1:first-child { margin-top: 1em; } blockquote { padding: 0.5em 1em 0.5em 0.5em; margin: 1em 0; background-color: rgba(204, 122, 111, 0.05); border-left: 5px solid rgba(191, 87, 73, 0.1); h4 { margin-top: 0; } p { margin-bottom: 0; &:first-child { margin-top: 0; } } } img { max-width: 100%; } .highlight { position: relative; box-shadow: inset 0 1px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.08), inset -1px 0 0 rgba(0,0,0,0.08), inset 4px 0 0 rgba(0,0,0,0.08); border-radius: 3px; .line-highlight { background-color: lighten(desaturate($rhodamine-color, 50%), 50%); left: 0; line-height: inherit; margin-top: 5px; pointer-events: none; position: absolute; right: 0; z-index: -1; } @media print { text-shadow: none; } } .highlight + .highlight { margin-top: -15px; } // Code blocks pre.highlight { padding: 7px 14px; margin: 1em -4px; overflow: auto; }
}
.read-next {
display: inline-block; margin: 4em -1em 0; @media screen and (max-width: 1119px) { margin-left: 0; } border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); padding: 0.7em 1.5em 0.5em 1em; &:hover, &:focus, &:active { background: $rhodamine-color; text-decoration: none; .read-next-continue, .read-next-title { color: white; } } .read-next-continue { @include body-font($size: 13px, $color: $rhodamine-color); display: block; } .read-next-title { @include body-font($size: 26px, $color: $text-color); display: block; }
}
.nav-docs {
@include body-font($size: 13px); margin: 1em 0 4em; width: 195px; padding-left: 20px; @media screen and (max-width: 740px) { width: auto; padding-left: 0; } h3 { @include body-font($size: 13px); text-transform: uppercase; margin: 3em 0 1.5em; } ul { list-style: none; margin: 0; li { margin: 0; line-height: 32px; ul { margin-bottom: 18px; li { line-height: 21px; } } } } a { color: #666; display: block; &:hover, &:focus, &.active { text-decoration: none; color: $rhodamine-color; } }
}