GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-21 21:45:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove tablet-specific layout

Browse Source
This commit is contained in:
riceset 2026-03-18 18:54:11 +09:00
parent 4baa8452a7
commit 53fe8361a4
3 changed files with 9 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
quartz/styles/base.scss
View File

@ -196,13 +196,6 @@ a {
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) {
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) { @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)};
@ -211,7 +204,7 @@ a {
grid-template-areas: #{map.get($mobileGrid, templateAreas)}; grid-template-areas: #{map.get($mobileGrid, templateAreas)};
} }
@media all and not ($desktop) { @media all and ($mobile) {
padding: 0 1rem; padding: 0 1rem;
} }
@media all and ($mobile) { @media all and ($mobile) {
@ -253,7 +246,7 @@ a {
margin-left: inherit; margin-left: inherit;
margin-right: inherit; margin-right: inherit;
} }
@media all and not ($desktop) { @media all and ($mobile) {
position: initial; position: initial;
height: unset; height: unset;
width: 100%; width: 100%;
@ -296,9 +289,6 @@ a {
min-width: 100%; min-width: 100%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@media all and ($tablet) {
margin-right: 0;
}
@media all and ($mobile) { @media all and ($mobile) {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;

23
quartz/styles/custom.scss
View File

@ -21,28 +21,8 @@
} }
} }
// Hide right sidebar on tablet view (801px to 1199px)
@media (min-width: 801px) and (max-width: 1199px) {
#quartz-body {
.sidebar.right {
display: none !important;
}
}
// Also hide if it appears as a direct child
.right.sidebar {
display: none !important;
}
// Target any element with grid-area set to grid-sidebar-right
[style*="grid-area: grid-sidebar-right"],
*[class*="right"] {
display: none !important;
}
}
// Keep everything left-aligned on desktop // Keep everything left-aligned on desktop
@media (min-width: 1200px) { @media (min-width: 801px) {
.right.sidebar { .right.sidebar {
text-align: left; text-align: left;
display: flex !important; display: flex !important;
@ -58,4 +38,3 @@
} }
} }
} }

16
quartz/styles/variables.scss
View File

@ -4,8 +4,6 @@
* Layout breakpoints * Layout breakpoints
* $mobile: screen width below this value will use mobile styles * $mobile: screen width below this value will use mobile styles
* $desktop: screen width above this value will use desktop 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: ( $breakpoints: (
mobile: 800px, mobile: 800px,
@ -13,8 +11,7 @@ $breakpoints: (
); );
$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)})"; $desktop: "(min-width: #{map.get($breakpoints, mobile) + 1px})";
$desktop: "(min-width: #{map.get($breakpoints, desktop)})";
$pageWidth: #{map.get($breakpoints, mobile)}; $pageWidth: #{map.get($breakpoints, mobile)};
$sidePanelWidth: 320px; //380px; $sidePanelWidth: 320px; //380px;
@ -35,17 +32,6 @@ $mobileGrid: (
"grid-sidebar-right"\ "grid-sidebar-right"\
"grid-footer"', "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: ( $desktopGrid: (
templateRows: "auto auto auto", templateRows: "auto auto auto",
templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}", templateColumns: "#{$sidePanelWidth} auto #{$sidePanelWidth}",