fix(ui): fix cotent area shrinking issue (#355)

* fix(ui): fix cotent area shrinking issue Signed-off-by: Dipak Parmar <hi@dipak.tech> * docs(changeset): Fixed page content area shrinking issue --------- Signed-off-by: Dipak Parmar <hi@dipak.tech>
dipakparmar · Mar 14, 2024 · b529dd0 · b529dd0
1 parent a778578
commit b529dd0
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 19 deletions.
diff --git a/.changeset/tall-flies-applaud.md b/.changeset/tall-flies-applaud.md
@@ -0,0 +1,5 @@
+---
+"docs-diary": patch
+---
+
+Fixed page content area shrinking issue
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -14,8 +14,18 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
     sans-serif;
 
   --ifm-heading-font-family: inherit;
@@ -26,7 +36,8 @@
   --ifm-color-primary-light: #905501;
   --ifm-color-primary-lighter: #975901;
   --ifm-color-primary-lightest: #aa6401;
-  /* --ifm-code-font-size: 95%; */
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
   /* slate-x from Tailwind v3 */
   --ifm-color-gray-50: #f8fafc;
@@ -70,18 +81,16 @@
   --ifm-alert-padding-vertical: 14px;
 }
 
-html[data-theme='dark'] {
-  /*
-    Use Tailwind v3 purple-400 as base
-    in https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima
-  */
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
   --ifm-color-primary: #f4c27c;
   --ifm-color-primary-dark: #f1b25a;
   --ifm-color-primary-darker: #f0aa49;
   --ifm-color-primary-darkest: #eb9316;
   --ifm-color-primary-light: #f7d29e;
   --ifm-color-primary-lighter: #f8daaf;
   --ifm-color-primary-lightest: #fdf1e2;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
   --ifm-code-background: var(--ifm-color-gray-800);
   --ifm-background-color: #070c15;
@@ -110,28 +119,59 @@ html[data-theme='dark'] {
 .main-wrapper > div {
   max-width: 1440px;
   margin: 0 auto;
+  width: 100%;
 }
 
 /* Heading */
 div.markdown > h1 {
   font-size: 2.25rem;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
     sans-serif;
   margin-bottom: 8px !important;
 }
 div.markdown > h2 {
   font-size: 1.5em;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
     sans-serif;
   margin: 32px 0 16px;
   padding-top: 20px;
 }
 div.markdown > h3 {
   font-size: 1.25em;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
     sans-serif;
   margin: 28px 0 12px;
   padding-top: 20px;
@@ -140,11 +180,23 @@ div.markdown > h4,
 div.markdown > h5,
 div.markdown > h6 {
   font-size: 1em;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family:
+    'Inter',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
     sans-serif;
   margin-bottom: 12px;
 }
+
+/* Heading */
 div.markdown > h1 + p {
   font-size: 1.125rem;
   margin-bottom: 32px;
@@ -189,9 +241,11 @@ code {
 .theme-doc-sidebar-item-category .menu__list li.menu__list-item {
   margin: 8px 0;
 }
-/* .theme-doc-sidebar-item-category .menu__list li.menu__list-item svg {
+
+.theme-doc-sidebar-item-category .menu__list li.menu__list-item svg {
   opacity: 0;
-} */
+}
+
 .theme-doc-sidebar-menu .menu__list-item > a.menu__link {
   border-left: 1px solid transparent;
   margin-left: -1px;
@@ -225,7 +279,7 @@ code {
 .cardLink:hover .arrow {
   opacity: 1;
 }
-/* CI Card: end *
+/* CI Card: end */
 
 /* Navbar */
 nav.navbar:not(.navbar-sidebar--show) {