From 80a82be50fb49830dd3dcc4f51575e99a9029845 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Sun, 22 May 2022 20:32:44 +0900
Subject: [PATCH] feat: adjust overall layout

---
 .../theme-default/components/VPContent.vue    | 13 +--
 src/client/theme-default/components/VPDoc.vue | 95 ++++++++++++-------
 .../theme-default/components/VPDocOutline.vue | 15 ++-
 .../theme-default/components/VPNavBar.vue     |  2 +-
 .../theme-default/components/VPSidebar.vue    |  4 +-
 .../theme-default/composables/outline.ts      | 16 +++-
 .../styles/components/custom-block.css        | 24 +++++
 .../styles/components/vp-doc.css              | 17 +++-
 src/client/theme-default/styles/vars.css      | 10 +-
 9 files changed, 139 insertions(+), 57 deletions(-)

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index ac30460c..802cf9e7 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -31,16 +31,16 @@ const { hasSidebar } = useSidebar()
       <template #home-features-after><slot name="home-features-after" /></template>
     </VPHome>
 
-    <VPDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+    <VPDoc v-else />
   </div>
 </template>
 
 <style scoped>
 .VPContent {
   flex-grow: 1;
+  flex-shrink: 0;
   margin: 0 auto;
   width: 100%;
-  max-width: var(--vp-layout-max-width);
 }
 
 .VPContent.is-home {
@@ -48,12 +48,6 @@ const { hasSidebar } = useSidebar()
   max-width: 100%;
 }
 
-@media (max-width: 768px) {
-  .VPContent {
-    overflow-x: hidden;
-  }
-}
-
 @media (min-width: 960px) {
   .VPContent {
     padding-top: var(--vp-nav-height);
@@ -62,14 +56,13 @@ const { hasSidebar } = useSidebar()
   .VPContent.has-sidebar {
     margin: 0;
     padding-left: var(--vp-sidebar-width);
-    max-width: 100%;
   }
 }
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index 98830b8a..cd53d906 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
 import VPDocOutline from './VPDocOutline.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { page } = useData()
+const { hasSidebar } = useSidebar()
 
 const pageName = computed(() => {
   return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
@@ -12,7 +14,7 @@ const pageName = computed(() => {
 </script>
 
 <template>
-  <div class="VPDoc has-aside">
+  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
     <div class="container">
       <div class="aside">
         <div class="aside-container">
@@ -24,11 +26,13 @@ const pageName = computed(() => {
       </div>
 
       <div class="content">
-        <main class="main">
-          <Content class="vp-doc" :class="pageName" />
-        </main>
+        <div class="content-container">
+          <main class="main">
+            <Content class="vp-doc" :class="pageName" />
+          </main>
 
-        <VPDocFooter />
+          <VPDocFooter />
+        </div>
       </div>
     </div>
   </div>
@@ -48,60 +52,63 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .VPDoc {
-    padding: 32px 64px 96px;
+    padding: 32px 32px 128px;
   }
-}
 
-@media (min-width: 1280px) {
-  .VPDoc {
-    padding: 32px 0 128px 64px;
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
   }
 
-  .VPDoc:not(.has-sidebar.has-aside) {
-    padding-left: calc((100vw - 688px) / 2);
+  .VPDoc:not(.has-sidebar) .aside {
+    display: block;
   }
 
-  .VPDoc.has-aside:not(.has-sidebar) {
-    padding-left: calc((100vw - 688px - 320px) / 2);
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
   }
 
-  .VPDoc:not(.has-aside) .content {
-    min-width: 688px;
+  .VPDoc .aside {
+    display: block;
   }
 }
 
 @media (min-width: 1440px) {
-  .VPDoc {
-    padding: 32px 0 128px 96px;
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 784px;
   }
-}
 
-@media (min-width: 1280px) {
-  .container {
-    display: flex;
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1104px;
   }
 }
 
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
 .aside {
   position: relative;
   display: none;
   order: 2;
-  flex-shrink: 0;
   flex-grow: 1;
-  padding-left: 64px;
-  padding-right: 32px;
-  min-width: 320px;
-}
-
-@media (min-width: 1280px) {
-  .aside {
-    display: block;
-  }
+  flex-shrink: 0;
+  padding-left: 32px;
+  min-width: 240px;
 }
 
 @media (min-width: 1440px) {
   .aside {
-    padding-left: 96px;
+    padding-left: 64px;
   }
 }
 
@@ -110,7 +117,7 @@ const pageName = computed(() => {
   top: var(--vp-nav-height-desktop);
   bottom: 0;
   padding-top: 32px;
-  width: 224px;
+  width: 208px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -141,17 +148,33 @@ const pageName = computed(() => {
 .content {
   position: relative;
   margin: 0 auto;
-  max-width: 688px;
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px;
+  }
 }
 
 @media (min-width: 1280px) {
   .content {
     order: 1;
     margin: 0;
-    min-width: 632px;
+    min-width: 640px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .content {
+    padding-left: 64px;
   }
 }
 
+.content-container {
+  margin: 0 auto;
+  max-width: 688px;
+}
+
 .edit-link {
   margin: 0 0 32px;
 }
diff --git a/src/client/theme-default/components/VPDocOutline.vue b/src/client/theme-default/components/VPDocOutline.vue
index bf3a6379..6c617002 100644
--- a/src/client/theme-default/components/VPDocOutline.vue
+++ b/src/client/theme-default/components/VPDocOutline.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useData } from 'vitepress'
-import { resolveHeaders, useActiveAnchor } from '../composables/outline'
+import {
+  resolveHeaders,
+  useOutline,
+  useActiveAnchor
+} from '../composables/outline'
 
 const { page, frontmatter } = useData()
 
+const { hasOutline } = useOutline()
+
 const container = ref()
 const marker = ref()
 
@@ -22,7 +28,7 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div class="VPDocOutline" ref="container">
+  <div class="VPDocOutline" :class="{ 'has-outline': hasOutline }" ref="container">
     <div class="outline-marker" ref="marker" />
 
     <div class="outline-title">On this page</div>
@@ -56,12 +62,17 @@ function handleClick({ target: el }: Event) {
 <style scoped>
 .VPDocOutline {
   position: relative;
+  display: none;
   border-left: 1px solid var(--vp-c-divider-light);
   padding-left: 16px;
   font-size: 13px;
   font-weight: 500;
 }
 
+.VPDocOutline.has-outline {
+  display: block;
+}
+
 .outline-marker {
   position: absolute;
   top: 32px;
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 7f8a15c3..4cc4d847 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -66,7 +66,7 @@ defineEmits<{
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: var(--vp-layout-max-width);
+  max-width: calc(var(--vp-layout-max-width) - 64px);
 }
 
 .content {
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 166d90da..1e127cbd 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -91,8 +91,8 @@ watchPostEffect(async () => {
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2);
-    width: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
 
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
index 460e5ca8..e134e680 100644
--- a/src/client/theme-default/composables/outline.ts
+++ b/src/client/theme-default/composables/outline.ts
@@ -1,5 +1,5 @@
-import { Ref, onMounted, onUpdated, onUnmounted } from 'vue'
-import { Header } from 'vitepress'
+import { Ref, computed, onMounted, onUpdated, onUnmounted } from 'vue'
+import { Header, useData } from 'vitepress'
 import { useMediaQuery } from '@vueuse/core'
 import { throttleAndDebounce } from '../support/utils'
 
@@ -18,6 +18,18 @@ interface MenuItemWithLinkAndChildren {
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56
 
+export function useOutline() {
+  const { page } = useData()
+
+  const hasOutline = computed(() => {
+    return page.value.headers.length > 0
+  })
+
+  return {
+    hasOutline
+  }
+}
+
 export function resolveHeaders(headers: Header[]) {
   return mapHeaders(groupHeaders(headers))
 }
diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css
index 0239b2b5..08157e55 100644
--- a/src/client/theme-default/styles/components/custom-block.css
+++ b/src/client/theme-default/styles/components/custom-block.css
@@ -13,30 +13,50 @@
   background-color: var(--vp-custom-block-info-bg);
 }
 
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
 .custom-block.tip {
   border-color: var(--vp-custom-block-tip-border);
   color: var(--vp-custom-block-tip-text);
   background-color: var(--vp-custom-block-tip-bg);
 }
 
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
 .custom-block.warning {
   border-color: var(--vp-custom-block-warning-border);
   color: var(--vp-custom-block-warning-text);
   background-color: var(--vp-custom-block-warning-bg);
 }
 
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
 .custom-block.danger {
   border-color: var(--vp-custom-block-danger-border);
   color: var(--vp-custom-block-danger-text);
   background-color: var(--vp-custom-block-danger-bg);
 }
 
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
 .custom-block.details {
   border-color: var(--vp-custom-block-details-border);
   color: var(--vp-custom-block-details-text);
   background-color: var(--vp-custom-block-details-bg);
 }
 
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
 .custom-block-title {
   font-weight: 700;
 }
@@ -64,3 +84,7 @@
 .custom-block a:hover {
   opacity: 0.6;
 }
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index cfcfbc6d..c0c76615 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -214,10 +214,21 @@
   opacity: 0.6;
 }
 
+.vp-doc .custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+  font-weight: 600;
+  color: inherit;
+}
+
 .vp-doc .custom-block div[class*='language-'] {
   margin: 8px 0;
 }
 
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: var(--vp-code-block-bg);
+}
+
 /**
  * Code
  * -------------------------------------------------------------------------- */
@@ -247,7 +258,7 @@
 
 .vp-doc div[class*='language-'] {
   position: relative;
-  margin: 20px -24px;
+  margin: 16px -24px;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
@@ -256,7 +267,7 @@
 @media (min-width: 640px) {
   .vp-doc div[class*='language-'] {
     border-radius: 8px;
-    margin: 24px 0;
+    margin: 16px 0;
   }
 }
 
@@ -269,7 +280,7 @@
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -12px;
+  margin-top: -8px;
 }
 
 .vp-doc [class*='language-'] pre,
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 0fa023e4..74292c22 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -176,7 +176,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-layout-max-width: 1376px;
+  --vp-layout-max-width: 1440px;
 }
 
 /**
@@ -261,30 +261,38 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --vp-custom-block-code-font-size: 13px;
+
   --vp-custom-block-info-border: var(--vp-c-divider-light);
   --vp-custom-block-info-text: var(--vp-c-text-2);
   --vp-custom-block-info-bg: var(--vp-c-white-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
 
   --vp-custom-block-tip-border: var(--vp-c-green);
   --vp-custom-block-tip-text: var(--vp-c-green-darker);
   --vp-custom-block-tip-bg: var(--vp-c-green-dimm);
+  --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
 
   --vp-custom-block-warning-border: var(--vp-c-yellow);
   --vp-custom-block-warning-text: var(--vp-c-yellow-darker);
   --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm);
+  --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
 
   --vp-custom-block-danger-border: var(--vp-c-red);
   --vp-custom-block-danger-text: var(--vp-c-red-darker);
   --vp-custom-block-danger-bg: var(--vp-c-red-dimm);
+  --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
 
   --vp-custom-block-details-border: var(--vp-custom-block-info-border);
   --vp-custom-block-details-text: var(--vp-custom-block-info-text);
   --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
 }
 
 .dark {
   --vp-custom-block-info-border: var(--vp-c-divider-light);
   --vp-custom-block-info-bg: var(--vp-c-black-mute);
+  --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
 
   --vp-custom-block-tip-text: var(--vp-c-green);