495a3b0289
* refactor(WIP): add new SCSS mixin `respond` Theme's stylesheet mixes the use of max-width and min-width for responsive design, and it's horrible. * refactor: update variable.scss to use @mixin respond * refactor(grid): adjust sidebar max-width * refactor(partials/article.scss): use `@include respond` * refactor(layout/article.scss): delete unused SCSS and migrate to `@include respond` * Adjust left sidebar max-width on xl screen * fix: right sidebar not sticky * refactor(breakpoint): simplify `@mixin respond` * refactor(breakpoints): improve warning message * fix(breakpoint): return only the requested breakpoint * fix: add missing padding to .article-details
17 lines
361 B
SCSS
17 lines
361 B
SCSS
$breakpoints: (
|
|
sm: 640px,
|
|
md: 768px,
|
|
lg: 1024px,
|
|
xl: 1280px,
|
|
2xl: 1536px,
|
|
);
|
|
|
|
@mixin respond($breakpoint) {
|
|
@if not map-has-key($breakpoints, $breakpoint) {
|
|
@warn "'#{$breakpoint}' is not a valid breakpoint";
|
|
} @else {
|
|
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|