keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-07-01 16:27:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'v4' into jpg

Browse Source
This commit is contained in:
Théo Marchal
2025-06-29 17:21:25 +02:00
parent cd5ce9642d 52a5196f38
commit af4b26f0e2
210 changed files with 15145 additions and 5512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
quartz/styles/variables.scss
View File

@ -1,10 +1,59 @@
$pageWidth: 750px;
$mobileBreakpoint: 600px;
$tabletBreakpoint: 1000px;
$sidePanelWidth: 380px;
$topSpacing: 2rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$maxFullPageWidth: $fullPageWidth + 250px;
@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
* Screen width between $mobile and $desktop width will use the tablet layout.
* assuming mobile < desktop
*/
$breakpoints: (
mobile: 1200px,
desktop: 1201px,
);
$mobile: "(max-width: #{map.get($breakpoints, mobile)})";
$tablet: "(min-width: #{map.get($breakpoints, mobile)}) and (max-width: #{map.get($breakpoints, desktop)})";
$desktop: "(min-width: #{map.get($breakpoints, desktop)})";
$maxDesktop: "(min-width: 1500px)";
$pageWidth: #{map.get($breakpoints, mobile)};
$sidePanelWidth: 320px;
$topSpacing: 6rem;
$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"',
);
$tabletGrid: (
templateRows: "auto auto auto auto",
templateColumns: "#{$sidePanelWidth} auto",
rowGap: "5px",
columnGap: "5px",
templateAreas:
'"grid-sidebar-left grid-header"\
"grid-sidebar-left grid-center"\
"grid-sidebar-left grid-sidebar-right"\
"grid-sidebar-left 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"',
);