website/static/src/scss/_blocks.scss

62 lines
892 B
SCSS

@mixin center-block($width: 85%, $mobile-width: 90%) {
width: $width;
margin: 0 auto;
max-width: $width;
min-width: $width;
@include touch {
max-width: $mobile-width;
min-width: $mobile-width;
width: $mobile-width;
}
}
div.block-image {
figcaption {
font-size: 85%;
margin-top: 5px;
}
figure {
@include center-block;
}
}
.content > div[class^="block-"] {
&:not(:last-child) {
margin-bottom: $content-block-margin-bottom;
}
}
div.block-embed {
lite-youtube {
@include center-block(50%);
}
}
div.block-tangent {
.inner {
margin: math.div($content-block-margin-bottom, 4) 0;
padding-left: 1.5rem;
}
}
div.block-mermaid {
text-align: center;
img {
width: unset;
@include dark-mode {
filter: invert(100%);
}
}
}
div.block-code .highlight {
pre,
span,
& {
@include dark-mode;
}
}