html { font-size: $font-size-base; letter-spacing: 0.33px; scroll-behavior: smooth; } html, body { min-width: $body-min-width; overflow-x: hidden; } body { color: $body-font-color; background: $body-background; font-weight: $body-font-weight; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; * { box-sizing: inherit; } } h1, h2, h3, h4, h5, h6 { font-weight: $body-font-weight; display: flex; align-items: center; } h4, h5, h6 { font-size: 1rem !important; } a { text-decoration: none; color: $color-link; &:hover { text-decoration: underline; } &:visited { color: $color-link-visited; } } img { vertical-align: middle; } .fake-link:hover { background-image: linear-gradient($color-link, $color-link); background-position: 0 100%; background-size: 100% 1px; background-repeat: no-repeat; text-decoration: none; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: $container-max-width; margin: 0 auto; padding: $padding-16; } .icon { display: inline-block; width: 1em; height: 1em; top: 0.125em; stroke-width: 0; stroke: currentColor; fill: currentColor; position: relative; } .gdoc-header { background: $main-color; color: $white; border-bottom: 0.3em solid $second-color; &__link, &__link:visited { color: inherit; } &__link:hover { text-decoration: none; } .icon { width: $font-size-16 * 2; height: $font-size-16 * 2; } } .gdoc-brand { font-size: $font-size-16 * 2; &__img { margin-right: $padding-16; } } .gdoc-nav { flex: 0 0 $menu-width; font-size: $font-size-14; nav { width: $menu-width; padding: $padding-16 $padding-32 $padding-16 0; > ul > li > * { font-weight: normal; } > :first-child { margin-top: 0; } } &__control { display: none; margin: 0; padding: 0; .icon.menu { display: inline-block; } .icon.arrow-back { display: none; } } &__list { padding-left: 1em; margin: 0; padding: 0; list-style: none; ul { padding-left: $padding-16; } li { margin: $padding-8 0; } .icon { margin-right: $padding-4; } } &__entry { flex: 1; color: $body-font-color; &:hover, &.is-active { text-decoration: underline; text-decoration-style: dashed !important; } &:visited { color: $body-font-color; } } &--main > ul > li > span, &--main > ul > li > span > a { font-weight: bold; } &--more { padding-top: $padding-8; } } .gdoc-page { min-width: $body-min-width; flex-grow: 1; padding: $padding-16 0; &__header, &__footer { margin-bottom: $padding-16 * 1.2; .icon { color: $gray-600; } a, a:visited { color: $color-link; } } &__header { background: $gray-100; padding: $padding-8 $padding-16; border-radius: $border-radius; } &__footer { margin-top: $padding-32; a:hover { text-decoration: none; } } &__nav { &:hover { background-image: linear-gradient($color-link, $color-link); background-position: 0 100%; background-size: 100% 1px; background-repeat: no-repeat; } &--prev:before { font-family: GeekdocIcons; content: "\ea13"; } &--next:after { font-family: GeekdocIcons; content: "\ea02"; } } &__anchorwrap { &:hover .gdoc-page__anchor .icon { color: $gray-500; } } &__anchor { min-width: 30px; &--left { position: absolute; margin-left: -25px; text-align: left; } &--right { text-align: right; } .icon { width: 1.4rem; height: 1.4rem; color: transparent; } } } .gdoc-post { word-wrap: break-word; border-top: 1px dashed $gray-600; padding: $padding-32 0; line-height: 1.5; &:first-of-type { padding-top: 0; } &__header { h1 { margin-top: 0; } a, a:visited { color: $body-font-color; text-decoration: none; } a:hover { background: none; text-decoration: underline; color: $body-font-color; } } &__date { margin: 1em 0; .icon { font-size: 1.2em; } } &:first-child { border-top: 0; h1 { margin-top: 0; } } &__readmore { margin: 1.5rem 0 2rem 0; a:after { font-family: GeekdocIcons; content: "\ea02"; } a, a:hover, a:visited { color: $color-link; text-decoration: none !important; } } } .gdoc-footer { background: $second-color; color: $white; &__item { margin-right: 1em; line-height: 2em; } &__link { color: $color-link-footer; &:visited { color: $color-link-footer; } } } .gdoc-search { position: relative; .icon { position: absolute; top: 0.625em; left: $padding-16 * 0.5; color: $gray-600; width: $font-size-16; height: $font-size-16; } .has-hits { border-bottom: 1px dashed $gray-600; } &::after { display: block; content: ""; clear: both; } &__input { width: 100%; padding: $padding-8; padding-left: $padding-32; border: 1px solid $gray-200; border-radius: $border-radius; background: $gray-100; color: $body-font-color; &:required + &__spinner { display: block; } } &__spinner { position: absolute; margin: $padding-8; right: 0; top: 0; width: $padding-16; height: $padding-16; border: $padding-1 solid transparent; border-top-color: $body-font-color; border-radius: 50%; @include spin(1s); } &__list { padding-left: 1em; margin: 0; padding: $padding-8 0; list-style: none; ul { padding-left: $padding-16; } li { margin: $padding-4 0; } .icon { margin-right: $padding-4; } } } .gdoc-error { padding: $padding-16 * 6 $padding-16; margin: 0 auto; max-width: 45em; .icon { width: $font-size-16 * 6; height: $font-size-16 * 6; color: $gray-700; } &__link, &__link:visited { color: $color-link; } &__message { padding-left: $padding-16 * 4; } &__line { padding: $padding-8 0; } &__title { font-size: $font-size-16 * 4; } &__code { font-weight: bolder; } } .gdoc-toc { // Classes to hide nested levels of ToC/Menu &__level--1 ul ul, &__level--2 ul ul ul, &__level--3 ul ul ul ul, &__level--4 ul ul ul ul ul, &__level--5 ul ul ul ul ul ul, &__level--6 ul ul ul ul ul ul ul { display: none; } a, a:visited { color: $color-link; } } // Responsive styles .gdoc-nav nav, .gdoc-page, .markdown { transition: 0.2s ease-in-out; transition-property: transform, margin-left, opacity; will-change: transform, margin-left; }