GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-27 14:54:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(styles): Fix sass deprecation warnings

Browse Source 
If you do a little `npm update` (or have quartz as an npm dependency,
like I do), sass will spam 17 quadrillion warnings about how globals
like `map-get` are deprecated.

Fix it, it's just a mechanical change type of deprecation, no biggie
This commit is contained in:
Anton Bulakh 2025-01-23 22:11:48 +02:00
parent 01943ff5a0
commit 51cd0fbd46
No known key found for this signature in database
GPG Key ID: 071FE3E324DD7333
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
quartz/styles/base.scss
View File

@ -1,3 +1,5 @@
@use "sass:map";
@use "./variables.scss" as *;
@use "./syntax.scss";
@use "./callouts.scss";
@ -121,7 +123,7 @@ a {
}
.page {
max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
margin: 0 auto;
& article {
& > h1 {
@ -151,24 +153,25 @@ a {
& > #quartz-body {
display: grid;
grid-template-columns: #{map-get($desktopGrid, templateColumns)};
grid-template-rows: #{map-get($desktopGrid, templateRows)};
column-gap: #{map-get($desktopGrid, columnGap)};
row-gap: #{map-get($desktopGrid, rowGap)};
grid-template-areas: #{map-get($desktopGrid, templateAreas)};
grid-template-columns: #{map.get($desktopGrid, templateColumns)};
grid-template-rows: #{map.get($desktopGrid, templateRows)};
column-gap: #{map.get($desktopGrid, columnGap)};
row-gap: #{map.get($desktopGrid, rowGap)};
grid-template-areas: #{map.get($desktopGrid, templateAreas)};
@media all and ($tablet) {
grid-template-columns: #{map-get($tabletGrid, templateColumns)};
grid-template-rows: #{map-get($tabletGrid, templateRows)};
column-gap: #{map-get($tabletGrid, columnGap)};
row-gap: #{map-get($tabletGrid, rowGap)};
grid-template-areas: #{map-get($tabletGrid, templateAreas)};
grid-template-columns: #{map.get($tabletGrid, templateColumns)};
grid-template-rows: #{map.get($tabletGrid, templateRows)};
column-gap: #{map.get($tabletGrid, columnGap)};
row-gap: #{map.get($tabletGrid, rowGap)};
grid-template-areas: #{map.get($tabletGrid, templateAreas)};
}
@media all and ($mobile) {
grid-template-columns: #{map-get($mobileGrid, templateColumns)};
grid-template-rows: #{map-get($mobileGrid, templateRows)};
column-gap: #{map-get($mobileGrid, columnGap)};
row-gap: #{map-get($mobileGrid, rowGap)};
grid-template-areas: #{map-get($mobileGrid, templateAreas)};
grid-template-columns: #{map.get($mobileGrid, templateColumns)};
grid-template-rows: #{map.get($mobileGrid, templateRows)};
column-gap: #{map.get($mobileGrid, columnGap)};
row-gap: #{map.get($mobileGrid, rowGap)};
grid-template-areas: #{map.get($mobileGrid, templateAreas)};
}
@media all and not ($desktop) {

10
quartz/styles/variables.scss
View File

@ -1,3 +1,5 @@
@use "sass:map";
/**
* Layout breakpoints
* $mobile: screen width below this value will use mobile styles
@ -10,11 +12,11 @@ $breakpoints: (
desktop: 1200px,
);
$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)})";
$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)})";
$pageWidth: #{map-get($breakpoints, mobile)};
$pageWidth: #{map.get($breakpoints, mobile)};
$sidePanelWidth: 320px; //380px;
$topSpacing: 6rem;
$boldWeight: 700;