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 1 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)};
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) {
grid-template-columns: #{map.get($mobileGrid, templateColumns)};
grid-template-rows: #{map.get($mobileGrid, templateRows)};
@ -211,7 +204,7 @@ a {
grid-template-areas: #{map.get($mobileGrid, templateAreas)};
}
@media all and not ($desktop) {
@media all and ($mobile) {
padding: 0 1rem;
}
@media all and ($mobile) {
@ -253,7 +246,7 @@ a {
margin-left: inherit;
margin-right: inherit;
}
@media all and not ($desktop) {
@media all and ($mobile) {
position: initial;
height: unset;
width: 100%;
@ -296,9 +289,6 @@ a {
min-width: 100%;
margin-left: auto;
margin-right: auto;
@media all and ($tablet) {
margin-right: 0;
}
@media all and ($mobile) {
margin-right: 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
@media (min-width: 1200px) {
@media (min-width: 801px) {
.right.sidebar {
text-align: left;
display: flex !important;
@ -58,4 +38,3 @@
}
}
}

16
quartz/styles/variables.scss
View File

@ -4,8 +4,6 @@
* 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: 800px,
@ -13,8 +11,7 @@ $breakpoints: (
);
$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)})";
$desktop: "(min-width: #{map.get($breakpoints, mobile) + 1px})";
$pageWidth: #{map.get($breakpoints, mobile)};
$sidePanelWidth: 320px; //380px;
@ -35,17 +32,6 @@ $mobileGrid: (
"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}",