Add tablet layout

quartz.layout.ts

@@ -27,6 +27,8 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
+    Component.TabletOnly(Component.TableOfContents()),
+    Component.TabletOnly(Component.Explorer()),
     Component.DesktopOnly(Component.Explorer()),
   ],
   right: [
@@ -44,6 +46,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
+    Component.TabletOnly(Component.Explorer()),
     Component.DesktopOnly(Component.Explorer()),
   ],
   right: [],

quartz/components/TabletOnly.tsx

@@ -0,0 +1,18 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default ((component?: QuartzComponent) => {
+  if (component) {
+    const Component = component
+    const TabletOnly: QuartzComponent = (props: QuartzComponentProps) => {
+      return <Component displayClass="tablet-only" {...props} />
+    }
+
+    TabletOnly.displayName = component.displayName
+    TabletOnly.afterDOMLoaded = component?.afterDOMLoaded
+    TabletOnly.beforeDOMLoaded = component?.beforeDOMLoaded
+    TabletOnly.css = component?.css
+    return TabletOnly
+  } else {
+    return () => <></>
+  }
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -16,6 +16,7 @@ import Backlinks from "./Backlinks"
 import Search from "./Search"
 import Footer from "./Footer"
 import DesktopOnly from "./DesktopOnly"
+import TabletOnly from "./TabletOnly"
 import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
@@ -39,6 +40,7 @@ export {
   Search,
   Footer,
   DesktopOnly,
+  TabletOnly,
   MobileOnly,
   RecentNotes,
   NotFound,

quartz/components/types.ts

@@ -13,7 +13,7 @@ export type QuartzComponentProps = {
   children: (QuartzComponent | JSX.Element)[]
   tree: Node
   allFiles: QuartzPluginData[]
-  displayClass?: "mobile-only" | "desktop-only"
+  displayClass?: "mobile-only" | "tablet-only" | "desktop-only"
 } & JSX.IntrinsicAttributes & {
     [key: string]: any
   }

quartz/styles/base.scss

@@ -109,13 +109,15 @@ a {
 
 .desktop-only {
   display: initial;
-  @media all and ($mobile) {
+  @media all and ($desktop) {
     display: none;
   }
-  &.toc {
+}
-    @media all and ($tablet) {
+
-      display: none;
+.tablet-only {
-    }
+  display: none;
+  @media all and ($desktop) and (not ($mobile)) {
+    display: initial;
   }
 }
 
@@ -124,11 +126,6 @@ a {
   @media all and ($mobile) {
     display: initial;
   }
-  &.toc {
-    @media all and ($tablet) {
-      display: initial;
-    }
-  }
 }
 
 .page {