CSS Edited according to new Navbar Wrapper Component

Author: PrathameshDhande22

quartz.layout.ts

@@ -5,16 +5,20 @@ import * as Component from "./quartz/components"
 export const sharedPageComponents: SharedLayout = {
   navbar: [
     Component.PageTitle(),
-    Component.MobileOnly(Component.Spacer()),
-    Component.NavigationLinks({
-      links: {
-        Blogs: "/blogs",
-        Github: "https://github.com/PrathameshDhande22/Java-Tutorial",
-        "About Me": "https://github.com/PrathameshDhande22"
-      }
-    }),
-    Component.Darkmode(),
-    Component.Search()
+    Component.NavbarWrapper({
+      components: [
+        Component.MobileOnly(Component.Spacer()),
+        Component.NavigationLinks({
+          links: {
+            Blogs: "/blogs",
+            Github: "https://github.com/PrathameshDhande22/Java-Tutorial",
+            "About Me": "https://github.com/PrathameshDhande22"
+          }
+        }),
+        Component.Search(),
+        Component.Darkmode()
+      ]
+    })
   ],
   head: Component.Head(),
   header: [Component.MobileOnly(

quartz/components/styles/navbar.scss

@@ -6,7 +6,6 @@
     top: 0px;
     padding-top: 5px;
     width: 100%;
-    display: flex;
     background-color: var(--light);
     z-index: 100;
 
@@ -21,27 +20,20 @@
         min-width: 95%;
         justify-content: space-between;
         align-items: center;
+        padding: 0px 10px;
 
         @media all and ($mobile) {
             width: 90%;
             gap: 10px;
-            justify-content: flex-end;
         }
 
-        @media all and ($tablet) {
-            width: 90%;
+        @media all and (max-width:443px){
+            justify-content: center;
+            margin-bottom: 6px;
         }
 
-        & .explorer.mobile-only {
-            position: relative;
-            top: 15px;
-            left: -20px;
+        @media all and ($tablet) {
+            width: 90%;
         }
     }
 }
-
-.left.sidebar {
-    & > .search {
-        padding: 1rem 0 8px;
-    }
-}

quartz/components/styles/navigationlinks.scss

@@ -1,17 +1,9 @@
 @use "../../styles/variables.scss" as *;
 
 .nav-links {
-    position: absolute;
-    right: 9%;
     display: flex;
-    justify-content: center;
     align-items: center;
 
-    @media all and ($mobile) {
-        position: relative;
-        right: 0;
-    }
-
     & .menu-btn {
         display: none;
         padding-top: 5px;

quartz/components/types.ts

@@ -1,5 +1,5 @@
 import { ComponentType, JSX } from "preact"
-import { StaticResources } from "../util/resources"
+import { StaticResources, StringResource } from "../util/resources"
 import { QuartzPluginData } from "../plugins/vfile"
 import { GlobalConfiguration } from "../cfg"
 import { Node } from "hast"
@@ -15,13 +15,13 @@ export type QuartzComponentProps = {
   allFiles: QuartzPluginData[]
   displayClass?: "mobile-only" | "desktop-only"
 } & JSX.IntrinsicAttributes & {
-    [key: string]: any
-  }
+  [key: string]: any
+}
 
 export type QuartzComponent = ComponentType<QuartzComponentProps> & {
-  css?: string
-  beforeDOMLoaded?: string
-  afterDOMLoaded?: string
+  css?: StringResource
+  beforeDOMLoaded?: StringResource
+  afterDOMLoaded?: StringResource
 }
 
 export type QuartzComponentConstructor<Options extends object | undefined = undefined> = (

quartz/styles/custom.scss

@@ -15,8 +15,8 @@ ul.overflow > li:last-of-type {
     margin: 1rem 0 0;
 }
 
-.page-title{
-   @media all and ($mobile){
-    font-size: 1.3rem;
-   }
-}
+.page-title {
+    @media all and ($mobile) {
+        font-size: 1.5rem;
+    }
+}

quartz/styles/variables.scss

@@ -18,7 +18,7 @@ $desktop: "(min-width: #{map.get($breakpoints, desktop)})";
 
 $pageWidth: #{map.get($breakpoints, mobile)};
 $sidePanelWidth: 320px; //380px;
-$topSpacing: 5rem;
+$topSpacing: 6rem;
 $boldWeight: 700;
 $semiBoldWeight: 600;
 $normalWeight: 400;