improved page layout

mariotaku · mariotaku · commit ad327fe94304 · 2024-07-10T12:15:10.000+09:00
diff --git a/src/partials/navbar.html b/src/partials/navbar.html
@@ -9,12 +9,12 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" tabindex="-1" id="navbar-collapse">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+      <ul class="navbar-nav me-auto mb-2 mb-md-0">
         <li class="nav-item d-none d-md-inline-block"><a class="nav-link" href="/">
           <img class="bi" width="32" height="32" src="/img/icon32.svg" alt="webOS Homebrew"/>
         </a></li>
-        <li class="nav-item"><a class="nav-link my-md-1" href="https://repo.webosbrew.org/">Apps</a></li>
-        <li class="nav-item"><a class="nav-link my-md-1" href="/develop">Develop</a></li>
+        <li class="nav-item"><a class="nav-link" href="https://repo.webosbrew.org/">Apps</a></li>
+        <li class="nav-item"><a class="nav-link" href="/develop">Develop</a></li>
       </ul>
     </div>
   </div>
diff --git a/src/partials/page.hbs b/src/partials/page.hbs
@@ -10,15 +10,27 @@
 </head>
 <body data-bs-theme="dark" data-bs-spy="scroll" data-bs-target="#toc-nav">
 {{> navbar }}
-<main class="bg-dark-subtle page">
-  {{#if sidebar}}
-    <aside class="sidebar">
-      {{{sidebar}}}
-    </aside>
-  {{/if}}
-  <article class="page-container container py-4 {{#if toc}}with-toc{{/if}}">
-    {{> @partial-block }}
-  </article>
+<main class="bg-dark-subtle">
+  <div class="page container">
+    {{#if sidebar}}
+      <aside id="page-sidebar" class="sidebar pe-2 offcanvas-lg offcanvas-start">
+        <div class="sidebar-content offcanvas-body">
+          {{{sidebar}}}
+        </div>
+      </aside>
+    {{/if}}
+    <article class="page-container py-4 {{#if toc}}with-toc{{/if}}">
+      {{#if sidebar}}
+        <div class="page-sidebar-toggle d-lg-none">
+          <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="offcanvas"
+                  data-bs-target="#page-sidebar">
+            <i class="bi bi-list"></i> Pages
+          </button>
+        </div>
+      {{/if}}
+      {{> @partial-block }}
+    </article>
+  </div>
 </main>
 {{> footer }}
 </body>
diff --git a/src/scss/page/_index.scss b/src/scss/page/_index.scss
@@ -6,23 +6,40 @@
 @import "bootstrap/scss/utilities";
 
 
-main.page {
+main .page {
   img {
     max-width: 100%;
   }
 
   @import "sidebar";
   @import "toc";
 
+  .hljs {
+    background-color: var(--code-bg);
+    @extend .border;
+    @extend .rounded-3;
+  }
+
+  .tabbed-code-blocks {
+    .hljs {
+      background: none !important;
+      @extend .border-0;
+      @extend .rounded-0;
+    }
+
+    .tab-content {
+      background-color: var(--code-bg) !important;
+    }
+  }
 
   article.page-container {
     width: 100%;
 
     &.with-toc {
       @include media-breakpoint-up(md) {
         display: grid;
-        grid-template-areas: "intro toc" "content toc";
-        grid-template-rows: auto 1fr;
+        grid-template-areas: "sb-toggle toc" "intro toc" "content toc";
+        grid-template-rows: auto auto 1fr;
         grid-template-columns: 3fr 1fr;
 
         .page-intro {
diff --git a/src/scss/page/_sidebar.scss b/src/scss/page/_sidebar.scss
@@ -6,11 +6,12 @@
 @import "bootstrap/scss/utilities";
 
 aside.sidebar {
-  display: none;
-  @extend .mt-md-3;
-  @extend .ms-3;
+  @extend .mt-lg-3;
+  @extend .ms-lg-3;
 
-  > ul, ol {
+  width: min(300px, 80vw);
+
+  .sidebar-content > ul, ol {
 
     > li {
       @extend .fw-semibold;
@@ -67,16 +68,16 @@ aside.sidebar {
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     & {
       display: block;
       width: 25%;
-      height: 100%;
+      height: min-content;
 
       min-width: unset;
 
       position: sticky;
-      top: var(--navbar-height);
+      top: calc(1.5rem + var(--navbar-height));
     }
   }
 }
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
@@ -22,6 +22,7 @@ $primary: #cf0652;
 
 :root {
   --navbar-height: 65px;
+  --code-bg: #111112;
 }
 
 html {
diff --git a/src/views/develop/guides/_sidebar.md b/src/views/develop/guides/_sidebar.md
@@ -8,6 +8,7 @@
     * Startup Script
     * System Mods
 * :bi-bug:Debugging
+    * Inspecting Web App
     * GDB
 * :bi-upload:Publishing
     * Requirements
diff --git a/webpack/remark/tabbed-code-block.js b/webpack/remark/tabbed-code-block.js
@@ -32,28 +32,28 @@ export default function tabbedCodeBlock() {
         const tabs = parent.children.slice(firstTab, index + 1);
         const prefix = `code-${tabs[0].position?.start?.offset}`;
         elem.value = toHtml(html`
-          <div>
+          <div class="tabbed-code-blocks">
             <ul class="nav nav-tabs" role="tablist">
               ${tabs.map((tab, index) => {
                 const tabId = `${prefix}-${tab.tabId}-tab`;
                 const paneId = `${prefix}-${tab.tabId}-pane`;
                 return html`
-                  <li class="nav-item" role="presentation">
+                  <li class="nav-item text-nowrap" role="presentation">
                     <button class="nav-link ${index === 0 ? 'active' : ''}" type="button" role="tab" id=${tabId}
                             data-bs-toggle="tab" data-bs-target="#${paneId}" aria-controls=${paneId}
                             aria-selected="${index === 0}">${tab.tab}
                     </button>
                   </li>`;
               })}
             </ul>
-            <div class="tab-content bg-dark border-start border-end border-bottom rounded-bottom">
+            <div class="tab-content border-start border-end border-bottom rounded-bottom mb-3">
               ${tabs.map((tab, index) => {
                 const tabId = `${prefix}-${tab.tabId}-tab`;
                 const paneId = `${prefix}-${tab.tabId}-pane`;
                 return html`
                   <div class="tab-pane fade ${index === 0 ? 'show active' : ''}" id=${paneId} role="tabpanel"
                        aria-labelledby=${tabId} tabindex="0">
-                    <pre class="p-3 mb-0"><code class="lang-${tab.lang}">${tab.value}</code></pre>
+                    <pre class="m-0"><code class="lang-${tab.lang}">${tab.value}</code></pre>
                   </div>`;
               })}
             </div>

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@ $primary: #cf0652;`
`22`	`22`
`23`	`23`	`:root {`
`24`	`24`	`--navbar-height: 65px;`
	`25`	`+ --code-bg: #111112;`
`25`	`26`	`}`
`26`	`27`
`27`	`28`	`html {`