From 277c0a2ce6f46df35bd03ef59ca0f3a99eac5887 Mon Sep 17 00:00:00 2001 From: Danila Fedorin Date: Wed, 15 Jul 2020 13:13:47 -0700 Subject: [PATCH] Rework sidenote spacing and TOC. --- themes/vanilla/assets/scss/margin.scss | 15 +++--- themes/vanilla/assets/scss/mixins.scss | 2 +- themes/vanilla/assets/scss/sidenotes.scss | 2 - themes/vanilla/assets/scss/style.scss | 58 ++------------------ themes/vanilla/assets/scss/toc.scss | 66 +++++++++++++++++++++++ themes/vanilla/assets/scss/variables.scss | 6 +-- 6 files changed, 83 insertions(+), 66 deletions(-) create mode 100644 themes/vanilla/assets/scss/toc.scss diff --git a/themes/vanilla/assets/scss/margin.scss b/themes/vanilla/assets/scss/margin.scss index 48d470f..26c62be 100644 --- a/themes/vanilla/assets/scss/margin.scss +++ b/themes/vanilla/assets/scss/margin.scss @@ -2,20 +2,21 @@ @import "mixins.scss"; $margin-width: 30rem; -$margin-offset: 1.5rem; +$margin-inner-offset: 0rem; +$margin-outer-offset: 1.5rem; @mixin below-two-margins { @media screen and - (max-width: $container-width + - 2 * ($margin-width + 2 * $margin-offset)) { + (max-width: $container-width-threshold + + 2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) { @content; } } @mixin below-one-margin { @media screen and - (max-width: $container-width + - ($margin-width + 3 * $margin-offset)) { + (max-width: $container-width-threshold + + ($margin-width + $margin-inner-offset + $margin-outer-offset)) { @content; } } @@ -29,7 +30,7 @@ $margin-offset: 1.5rem; @mixin margin-content-left { left: 0; - margin-left: -($margin-width + $margin-offset); + margin-left: -($margin-width + $container-min-padding + $margin-inner-offset); @include below-two-margins { display: none; @@ -38,7 +39,7 @@ $margin-offset: 1.5rem; @mixin margin-content-right { right: 0; - margin-right: -($margin-width + $margin-offset); + margin-right: -($margin-width + $container-min-padding + $margin-inner-offset); @include below-one-margin { display: none; diff --git a/themes/vanilla/assets/scss/mixins.scss b/themes/vanilla/assets/scss/mixins.scss index 43f355a..ee4f75d 100644 --- a/themes/vanilla/assets/scss/mixins.scss +++ b/themes/vanilla/assets/scss/mixins.scss @@ -6,7 +6,7 @@ } @mixin below-container-width { - @media screen and (max-width: $container-width){ + @media screen and (max-width: $container-width-threshold){ @content; } } diff --git a/themes/vanilla/assets/scss/sidenotes.scss b/themes/vanilla/assets/scss/sidenotes.scss index ef46365..7939998 100644 --- a/themes/vanilla/assets/scss/sidenotes.scss +++ b/themes/vanilla/assets/scss/sidenotes.scss @@ -2,8 +2,6 @@ @import "mixins.scss"; @import "margin.scss"; -$sidenote-width: 30rem; -$sidenote-offset: 1.5rem; $sidenote-padding: 1rem; $sidenote-highlight-border-width: .2rem; diff --git a/themes/vanilla/assets/scss/style.scss b/themes/vanilla/assets/scss/style.scss index 3b259d6..0da3003 100755 --- a/themes/vanilla/assets/scss/style.scss +++ b/themes/vanilla/assets/scss/style.scss @@ -1,6 +1,7 @@ @import "variables.scss"; @import "mixins.scss"; @import "margin.scss"; +@import "toc.scss"; body { font-family: $font-body; @@ -62,11 +63,13 @@ div.highlight table { box-sizing: border-box; @include below-container-width { - padding: 0rem 1rem 0rem 1rem; + padding: 0 $container-min-padding 0 $container-min-padding; + margin: 0; + max-width: $container-width + 2*$container-min-padding; } @include below-two-margins { - left: -($margin-width + $margin-offset)/2; + left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2; } @include below-one-margin { @@ -239,54 +242,3 @@ figure { text-align: center; } } - -.table-of-contents { - @include margin-content; - @include margin-content-left; - display: flex; - flex-direction: column; - align-items: end; - - em { - font-style: normal; - font-weight: bold; - font-size: 1.2em; - display: block; - margin-bottom: 1rem; - } - - #TableOfContents > ul { - padding-left: 0; - } - - nav { - width: auto; - margin: 0px; - } - - ul { - position: relative; - list-style: none; - padding-left: 2rem; - margin: 0px; - } - - li { - position: relative; - } - - a { - padding: 0; - } - - div.wrapper { - @include bordered-block; - padding: 1rem; - background-color: $toc-color; - border-color: $toc-border-color; - - @include below-two-margins { - width: auto; - } - } -} diff --git a/themes/vanilla/assets/scss/toc.scss b/themes/vanilla/assets/scss/toc.scss new file mode 100644 index 0000000..344884e --- /dev/null +++ b/themes/vanilla/assets/scss/toc.scss @@ -0,0 +1,66 @@ +@import "variables.scss"; +@import "mixins.scss"; + +$toc-color: $code-color; +$toc-border-color: $code-border-color; +$toc-float-max-width: 20rem; + +@mixin below-max-toc-width { + @media screen and (max-width: 2.5rem + 1.5 * $toc-float-max-width + 2 * $container-min-padding){ + @content; + } +} + +.table-of-contents { + @include margin-content; + @include margin-content-left; + display: flex; + flex-direction: column; + align-items: end; + margin-bottom: 1rem; + + em { + font-style: normal; + font-weight: bold; + font-size: 1.2em; + display: block; + margin-bottom: 1rem; + } + + #TableOfContents > ul { + padding-left: 0; + } + + nav { + width: auto; + margin: 0px; + } + + ul { + position: relative; + list-style: none; + padding-left: 2rem; + margin: 0px; + } + + li { + position: relative; + } + + a { + padding: 0; + vertical-align: top; + overflow-x: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + div.wrapper { + @include bordered-block; + padding: 1rem; + background-color: $toc-color; + border-color: $toc-border-color; + box-sizing: border-box; + max-width: 100%; + } +} diff --git a/themes/vanilla/assets/scss/variables.scss b/themes/vanilla/assets/scss/variables.scss index 8f8e377..b1e3f67 100644 --- a/themes/vanilla/assets/scss/variables.scss +++ b/themes/vanilla/assets/scss/variables.scss @@ -1,16 +1,16 @@ $container-width: 45rem; +$container-min-padding: 1.5rem; +$container-width-threshold: $container-width + 2 * $container-min-padding; $standard-border-width: .075rem; $primary-color: #36e281; $border-color: #bfbfbf; $code-color: #f0f0f0; $code-border-color: darken($code-color, 10%); -$toc-color: $code-color; -$toc-border-color: $code-border-color; $font-heading: "Lora", serif; $font-body: "Raleway", serif; $font-code: "Inconsolata", monospace; $standard-border: $standard-border-width solid $border-color; -$code-border: 0.0375rem solid $code-border-color; +$code-border: $standard-border-width solid $code-border-color;