DibyashanuPati/quartz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(styles): omit sass deprecation warnings (#1737)

Browse source 
update to newer API
This commit is contained in:
Anton Bulakh 2025-01-24 05:19:46 +02:00 • committed by GitHub
parent 01943ff5a0
commit 4e4930ef9c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 "./variables.scss" as *;
@use "./syntax.scss"; @use "./syntax.scss";
@use "./callouts.scss"; @use "./callouts.scss";
@ -121,7 +123,7 @@ a {
} }
.page { .page {
max-width: calc(#{map-get($breakpoints, desktop)} + 300px); max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
margin: 0 auto; margin: 0 auto;
& article { & article {
& > h1 { & > h1 {
@ -151,24 +153,25 @@ a {
& > #quartz-body { & > #quartz-body {
display: grid; display: grid;
grid-template-columns: #{map-get($desktopGrid, templateColumns)}; grid-template-columns: #{map.get($desktopGrid, templateColumns)};
grid-template-rows: #{map-get($desktopGrid, templateRows)}; grid-template-rows: #{map.get($desktopGrid, templateRows)};
column-gap: #{map-get($desktopGrid, columnGap)}; column-gap: #{map.get($desktopGrid, columnGap)};
row-gap: #{map-get($desktopGrid, rowGap)}; row-gap: #{map.get($desktopGrid, rowGap)};
grid-template-areas: #{map-get($desktopGrid, templateAreas)}; grid-template-areas: #{map.get($desktopGrid, templateAreas)};
@media all and ($tablet) { @media all and ($tablet) {
grid-template-columns: #{map-get($tabletGrid, templateColumns)}; grid-template-columns: #{map.get($tabletGrid, templateColumns)};
grid-template-rows: #{map-get($tabletGrid, templateRows)}; grid-template-rows: #{map.get($tabletGrid, templateRows)};
column-gap: #{map-get($tabletGrid, columnGap)}; column-gap: #{map.get($tabletGrid, columnGap)};
row-gap: #{map-get($tabletGrid, rowGap)}; row-gap: #{map.get($tabletGrid, rowGap)};
grid-template-areas: #{map-get($tabletGrid, templateAreas)}; grid-template-areas: #{map.get($tabletGrid, templateAreas)};
} }
@media all and ($mobile) { @media all and ($mobile) {
grid-template-columns: #{map-get($mobileGrid, templateColumns)}; grid-template-columns: #{map.get($mobileGrid, templateColumns)};
grid-template-rows: #{map-get($mobileGrid, templateRows)}; grid-template-rows: #{map.get($mobileGrid, templateRows)};
column-gap: #{map-get($mobileGrid, columnGap)}; column-gap: #{map.get($mobileGrid, columnGap)};
row-gap: #{map-get($mobileGrid, rowGap)}; row-gap: #{map.get($mobileGrid, rowGap)};
grid-template-areas: #{map-get($mobileGrid, templateAreas)}; grid-template-areas: #{map.get($mobileGrid, templateAreas)};
} }
@media all and not ($desktop) { @media all and not ($desktop) {

10
quartz/styles/variables.scss
View file

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