@import "style.scss"; $sidenote-accommodate-shrink: 10rem; $sidenote-width: 30rem; $sidenote-offset: 1.5rem; $sidenote-padding: 1rem; $sidenote-highlight-border-width: .2rem; @mixin below-two-sidenotes { @media screen and (max-width: $container-width + 2 * ($sidenote-width + 2 * $sidenote-offset)) { @content; } } @mixin below-one-sidenote { @media screen and (max-width: $container-width + ($sidenote-width + 3 * $sidenote-offset)) { @content; } } .sidenote { &:hover { .sidenote-label { background-color: $primary-color; color: white; } .sidenote-content { border: $sidenote-highlight-border-width dashed; padding: $sidenote-padding - ($sidenote-highlight-border-width - $standard-border-width); border-color: $primary-color; } } } .sidenote-label { border-bottom: .2rem solid $primary-color; } .sidenote-checkbox { display: none; } .sidenote-content { display: block; position: absolute; width: $sidenote-width; margin-top: -1.5rem; &.sidenote-right { right: 0; margin-right: -($sidenote-width + $sidenote-offset); } &.sidenote-left { left: 0; margin-left: -($sidenote-width + $sidenote-offset); } @include bordered-block; padding: $sidenote-padding; box-sizing: border-box; text-align: left; } @mixin hidden-sidenote { position: static; margin-top: 1rem; margin-bottom: 1rem; width: 100%; display: none; .sidenote-checkbox:checked ~ & { display: block; } } @include below-two-sidenotes { .sidenote-content.sidenote-left { @include hidden-sidenote; margin-left: 0rem; } .container { position: relative; left: -$sidenote-width/2 } } @include below-one-sidenote { .post-content { max-width: 100%; } .sidenote-content.sidenote-right { @include hidden-sidenote; margin-right: 0rem; } .container { position: initial; } }