diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/_defaults.scss | 5 | ||||
| -rw-r--r-- | assets/_main.scss | 43 | ||||
| -rw-r--r-- | assets/_print.scss | 16 | ||||
| -rw-r--r-- | assets/_shortcodes.scss | 4 | ||||
| -rw-r--r-- | assets/_utils.scss | 6 |
5 files changed, 34 insertions, 40 deletions
diff --git a/assets/_defaults.scss b/assets/_defaults.scss index 354af74..af7aa24 100644 --- a/assets/_defaults.scss +++ b/assets/_defaults.scss @@ -31,15 +31,14 @@ $body-background: white !default; $body-font-color: $gray-800 !default; $body-font-weight: normal !default; -$body-min-width: 20rem !default; +$body-min-width: 25rem !default; $container-max-width: 80rem !default; $header-height: 3.5rem !default; $menu-width: 16rem !default; $toc-width: 16rem !default; -$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default; -$sm-breakpoint: $menu-width + $body-min-width !default; +$mobile-breakpoint: $menu-width + $body-min-width + $toc-width !default; // Hint colors $hint-colors: ( diff --git a/assets/_main.scss b/assets/_main.scss index 03bc298..1be9960 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -47,11 +47,6 @@ img { vertical-align: baseline; } -main { - display: flex; - flex-direction: row-reverse; -} - aside nav ul { padding: 0; margin: 0; @@ -162,8 +157,12 @@ ul.pagination { } .book-header { - margin-bottom: $padding-16; display: none; + margin-bottom: $padding-16; + + label { + line-height: 0; + } } .book-search { @@ -230,7 +229,6 @@ ul.pagination { } .book-footer { - display: flex; padding-top: $padding-16; font-size: $font-size-14; @@ -272,7 +270,7 @@ ul.pagination { } img { - opacity: .1; + opacity: 0.1; } li.active img { @@ -298,46 +296,41 @@ ul.pagination { // Responsive styles aside nav, .book-page, +.book-header aside, .markdown { transition: 0.2s ease-in-out; transition-property: transform, margin, opacity; will-change: transform, margin; } -@media screen and (max-width: $md-breakpoint) { +@media screen and (max-width: $mobile-breakpoint) { .book-menu { margin-left: -$menu-width; font-size: $font-size-base; } + .book-toc { - margin-right: -$toc-width; - font-size: $font-size-base; + display: none; } .book-header { - display: flex; + display: block; } - #menu-control:checked ~ main { - .book-menu #BookMenu, + #menu-control:checked + main { + .book-menu nav, .book-page { transform: translateX($menu-width); } + + .book-header aside, .markdown { opacity: 0.25; } - .book-header #menu-control { - transform: rotate(90deg); - } } - #toc-control:checked ~ main { - aside #TableOfContents, - .book-page { - transform: translateX(-$menu-width); - } - .markdown { - opacity: 0.25; - } + + #toc-control:checked + aside { + display: block; } } diff --git a/assets/_print.scss b/assets/_print.scss index 6acd75e..8ae2901 100644 --- a/assets/_print.scss +++ b/assets/_print.scss @@ -1,19 +1,17 @@ @media print { .book-menu, - .book-footer { + .book-footer, + .book-toc { display: none; } - main { + .book-header, + .book-header aside { display: block; } - .book-toc { - flex: none; - - nav { - position: relative; - width: auto; - } + main { + // Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897 + display: block !important; } } diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss index 451f8b8..97b7dc3 100644 --- a/assets/_shortcodes.scss +++ b/assets/_shortcodes.scss @@ -77,8 +77,7 @@ > div { margin: $padding-16 0; - // max-width: 50%; - min-width: $body-min-width * 0.66; + min-width: $body-min-width / 2; padding: 0 $padding-16; } } @@ -102,7 +101,6 @@ a.book-btn { &.#{$name} { border-left-color: $color; background-color: rgba($color, 0.1); - // background-color: $gray-100; } }; } diff --git a/assets/_utils.scss b/assets/_utils.scss index 175a4ad..6162aba 100644 --- a/assets/_utils.scss +++ b/assets/_utils.scss @@ -46,6 +46,12 @@ display: none; } +.clearfix::after { + content: ""; + display: table; + clear: both; +} + @mixin spin($duration) { animation: spin $duration ease infinite; @keyframes spin { |