7d7e334976
* Responsive design grid * Addressed PR feedback * Bump Quartz version 4.3.1 => 4.4.0 * Moved page-header into center * Updated docs with new layouts * Sync updated version number with package-lock * Table of Content scrollbar auto * Reset node_modules * Updated layout images * Fixed tablet layout * Finilazed layout images
57 lines
1.5 KiB
SCSS
57 lines
1.5 KiB
SCSS
/**
|
|
* Layout breakpoints
|
|
* $mobile: screen width below this value will use mobile styles
|
|
* $desktop: screen width above this value will use desktop styles
|
|
* Screen width between $mobile and $desktop width will use the tablet layout.
|
|
* assuming mobile < desktop
|
|
*/
|
|
$breakpoints: (
|
|
mobile: 800px,
|
|
desktop: 1200px,
|
|
);
|
|
|
|
$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
|
|
$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
|
|
$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
|
|
|
|
$pageWidth: #{map-get($breakpoints, mobile)};
|
|
$sidePanelWidth: 320px; //380px;
|
|
$topSpacing: 6rem;
|
|
$boldWeight: 700;
|
|
$semiBoldWeight: 600;
|
|
$normalWeight: 400;
|
|
|
|
$mobileGrid: (
|
|
templateRows: "auto auto auto auto auto",
|
|
templateColumns: "auto",
|
|
rowGap: "5px",
|
|
columnGap: "5px",
|
|
templateAreas:
|
|
'"sidebar-left"\
|
|
"page-header"\
|
|
"page-center"\
|
|
"sidebar-right"\
|
|
"page-footer"',
|
|
);
|
|
$tabletGrid: (
|
|
templateRows: "auto auto auto auto",
|
|
templateColumns: "#{$sidePanelWidth} auto",
|
|
rowGap: "5px",
|
|
columnGap: "5px",
|
|
templateAreas:
|
|
'"sidebar-left page-header"\
|
|
"sidebar-left page-center"\
|
|
"sidebar-left sidebar-right"\
|
|
"sidebar-left page-footer"',
|
|
);
|
|
$desktopGrid: (
|
|
templateRows: "auto auto auto",
|
|
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",
|
|
rowGap: "5px",
|
|
columnGap: "5px",
|
|
templateAreas:
|
|
'"sidebar-left page-header sidebar-right"\
|
|
"sidebar-left page-center sidebar-right"\
|
|
"sidebar-left page-footer sidebar-right"',
|
|
);
|