diff options
Diffstat (limited to 'assets/_main.scss')
| -rw-r--r-- | assets/_main.scss | 288 |
1 files changed, 288 insertions, 0 deletions
diff --git a/assets/_main.scss b/assets/_main.scss new file mode 100644 index 0000000..7fb47c4 --- /dev/null +++ b/assets/_main.scss @@ -0,0 +1,288 @@ +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 { + font-weight: $body-font-weight; +} + +a { + text-decoration: none; + color: $color-link; + + &:visited { + color: $color-visited-link; + } +} + +img { + vertical-align: baseline; +} + +aside nav ul { + padding: 0; + margin: 0; + list-style: none; + + li { + margin: 1em 0; + } + + a { + display: block; + } + + a:hover { + opacity: 0.5; + } + + ul { + padding-left: $padding-16; + } +} + +ul.pagination { + display: flex; + justify-content: center; + list-style-type: none; + + .page-item a { + padding: $padding-16; + } +} + +.container { + max-width: $container-max-width; + margin: 0 auto; +} + +.book-brand { + margin-top: 0; + + img { + height: 1.5em; + width: auto; + vertical-align: middle; + margin-right: $padding-8; + } +} + +.book-menu { + flex: 0 0 $menu-width; + font-size: $font-size-14; + + nav { + width: $menu-width; + padding: $padding-16; + + @include fixed; + } + + @include dark-links; +} + +.book-section-flat { + margin-bottom: $padding-16 * 2; + + &:not(:first-child) { + margin-top: $padding-16 * 2; + } + + > a, + > span { + font-weight: bolder; + } + + > ul { + padding-left: 0; + } +} + +.book-page { + min-width: $body-min-width; + flex-grow: 1; + padding: $padding-16; +} + +.book-header { + margin-bottom: $padding-16; + display: none; +} + +.book-search { + position: relative; + margin: $padding-16 0; + border-bottom: 1px solid transparent; + + &::after { + display: block; + content: ""; + clear: both; + } + + input { + width: 100%; + padding: $padding-8; + + border: 0; + border-radius: $padding-4; + + background: $gray-100; + + &:required + .book-search-spinner { + display: block; + } + } + + .book-search-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); + } +} + +.book-toc { + flex: 0 0 $toc-width; + font-size: $font-size-12; + + nav { + width: $toc-width; + padding: $padding-16; + + @include fixed; + } + + img { + height: 1em; + } + + nav > ul > li:first-child { + margin-top: 0; + } + + // Classes to hide nested levels of ToC (can be replaced by @for, but it's more clear like this) + &.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; + } +} + +.book-footer { + display: flex; + padding-top: $padding-16; + font-size: $font-size-14; + + img { + height: 1em; + } +} + +.book-posts { + min-width: $body-min-width; + max-width: $body-min-width * 2; + flex-grow: 1; + padding: $padding-16; + + article { + padding-bottom: $padding-16; + } +} + +.book-home { + padding: $padding-16; +} + +// Responsive styles +aside nav, +.book-page, +.book-posts, +.markdown { + transition: 0.2s ease-in-out; + transition-property: transform, margin-left, opacity; + will-change: transform, margin-left; +} + +@media screen and (max-width: $md-breakpoint) { + .book-toc { + display: none; + } +} + +@media screen and (max-width: $sm-breakpoint) { + .book-menu { + margin-left: -$menu-width; + font-size: $font-size-base; + } + + .book-header { + display: flex; + } + + #menu-control:checked + main { + .book-menu nav, + .book-page, + .book-posts { + transform: translateX($menu-width); + } + + .book-header label { + transform: rotate(90deg); + } + + .markdown { + opacity: 0.25; + } + } +} + +// Extra space for big screens +@media screen and (min-width: $container-max-width) { + .book-page, + .book-posts, + .book-menu nav, + .book-toc nav { + padding: $padding-16 * 2 $padding-16; + } +} |