feat: improve readability

website/docusaurus.config.js

@@ -15,6 +15,7 @@ module.exports = {
       <a href="https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=" target="_blank" rel="noopener">Check it out now!</a>`,
       isCloseable: false,
     },
+    hideableSidebar: true,
     prism: {
       theme: require('prism-react-renderer/themes/github'),
       darkTheme: require('prism-react-renderer/themes/dracula'),
@@ -22,9 +23,10 @@ module.exports = {
     navbar: {
       title: 'Tech Interview Handbook',
       logo: {
-        alt: '',
+        alt: 'Tech Interview Handbook Logo',
         src: 'img/logo.svg',
       },
+      hideOnScroll: true,
       items: [
         {
           label: 'Start reading',
@@ -159,9 +161,6 @@ module.exports = {
       apiKey: 'e12588cbae68d752469921cc46e9cb66',
       indexName: 'techinterviewhandbook',
     },
-    metadata: [
-      {name: 'fo-verify', content: '2cc93525-ece8-402e-a4b8-d1d0853175e8'},
-    ],
   },
   presets: [
     [

website/src/css/custom.css

@@ -57,20 +57,27 @@ html[data-theme='dark'] {
 
 .markdown h1 {
   font-size: 2.25em;
-  margin-top: 1em;
+  margin-top: 0.5em;
 }
 
 .markdown h2 {
   font-size: 1.5em;
   margin-top: 2em;
-  margin-bottom: 1em;
+  margin-bottom: 0.5em;
 }
 
 .markdown h3 {
   font-size: 1.25em;
   font-weight: 600;
+  margin-top: 1.8em;
+  margin-bottom: 0.5em;
+}
+
+.markdown h4 {
+  font-size: 1.2em;
+  font-weight: 600;
   margin-top: 1.6em;
-  margin-bottom: 0.6em;
+  margin-bottom: 0.4em;
 }
 
 .markdown blockquote {
@@ -88,20 +95,21 @@ html[data-theme='dark'] {
   :root {
     --ifm-font-size-base: 16px;
   }
+}
 
-  .markdown h1 {
+.markdown h1 {
-    --ifm-h1-font-size: 1.5rem;
+  --ifm-h1-font-size: 1.5rem;
-  }
+}
 
-  .markdown h2 {
+.markdown h2 {
-    --ifm-h2-font-size: 1.375rem;
+  --ifm-h2-font-size: 1.375rem;
-  }
+}
 
-  .markdown h3 {
+.markdown h3 {
-    --ifm-h3-font-size: 1.25rem;
+  --ifm-h3-font-size: 1.25rem;
-  }
 }
 
+
 div[class^='announcementBar_'] {
   background-color: var(--ifm-color-primary);
   color: #fff;
@@ -112,6 +120,16 @@ div[class^='announcementBar_'] {
   font-size: 0.875rem;
 }
 
+.table-of-contents {
+  font-size: 0.75rem;
+}
+
+@media screen and (min-width: 768px) {
+  .theme-doc-markdown {
+    font-size: 18px;
+  }
+}
+
 .theme-doc-markdown details {
   --ifm-alert-background-color: transparent;
   border: 1px solid var(--ifm-color-primary);