tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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
2 changed files with 25 additions and 20 deletions
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;