mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-21 21:45:42 -05:00
45 lines
1.1 KiB
SCSS
45 lines
1.1 KiB
SCSS
@use "sass:map";
|
|
|
|
/**
|
|
* Layout breakpoints
|
|
* $mobile: screen width below this value will use mobile styles
|
|
* $desktop: screen width above this value will use desktop styles
|
|
*/
|
|
$breakpoints: (
|
|
mobile: 800px,
|
|
desktop: 1200px,
|
|
);
|
|
|
|
$mobile: "(max-width: #{map.get($breakpoints, mobile)})";
|
|
$desktop: "(min-width: #{map.get($breakpoints, mobile) + 1px})";
|
|
|
|
$pageWidth: #{map.get($breakpoints, mobile)};
|
|
$sidePanelWidth: 320px; //380px;
|
|
$topSpacing: 2rem;
|
|
$boldWeight: 700;
|
|
$semiBoldWeight: 600;
|
|
$normalWeight: 400;
|
|
|
|
$mobileGrid: (
|
|
templateRows: "auto auto auto auto auto",
|
|
templateColumns: "auto",
|
|
rowGap: "5px",
|
|
columnGap: "5px",
|
|
templateAreas:
|
|
'"grid-sidebar-left"\
|
|
"grid-header"\
|
|
"grid-center"\
|
|
"grid-sidebar-right"\
|
|
"grid-footer"',
|
|
);
|
|
$desktopGrid: (
|
|
templateRows: "auto auto auto",
|
|
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
|
|
rowGap: "5px",
|
|
columnGap: "5px",
|
|
templateAreas:
|
|
'"grid-sidebar-left grid-header grid-sidebar-right"\
|
|
"grid-sidebar-left grid-center grid-sidebar-right"\
|
|
"grid-sidebar-left grid-footer grid-sidebar-right"',
|
|
);
|