style: toc for dev-mode

gnolang · Jan 21, 2025 · 719a733 · 719a733
1 parent 3141710
commit 719a733
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/gno.land/pkg/gnoweb/components/layouts/base.gohtml b/gno.land/pkg/gnoweb/components/layouts/base.gohtml
@@ -9,7 +9,7 @@
         <div class="sticky top-14 lg:pt-2 has-[ul:empty]:hidden">
             <div id="sidebar-summary" class="max-h-screen overflow-scroll no-scrollbar bg-gray-50 lg:bg-transparent rounded-sm">
                 {{ template "ui/expend_label" "On this page"}}
-                <nav class="hidden lg:block text-100 mt-2 lg:mt-0 pb-6 lg:pb-28 px-4 py-2 lg:px-0 *:pl-0">
+                <nav class="toc-nav hidden lg:block text-100 mt-2 lg:mt-0 pb-6 lg:pb-28 px-4 py-2 lg:px-0 *:pl-0">
                    {{ . }} 
                 </nav>
             </div>

diff --git a/gno.land/pkg/gnoweb/components/layouts/index.gohtml b/gno.land/pkg/gnoweb/components/layouts/index.gohtml
@@ -9,7 +9,7 @@
         {{ template "layouts/header" .HeaderData }}
 
         <!-- main -->
-        <main class="w-full grow-[2] {{ if .ContentData.IsDevmodView }}bg-gray-50{{ else }}bg-light{{end}}">
+        <main class="w-full grow-[2] {{ if .ContentData.IsDevmodView }}dev-mode bg-gray-50{{ else }}bg-light{{end}}">
             <section class="max-w-screen-max mx-auto grid grid-flow-dense items-start min-h-full {{ if eq .ContentData.Layout "sidebar" }}px-4 md:px-10 grid-cols-1 lg:grid-cols-10 xl:grid-cols-10 gap-x-20 xxl:gap-x-32{{ else }} px-10 grid-cols-1 gap-8 xxl:gap-20{{ end }} {{ if .ContentData.View }}js-{{ .ContentData.View }}{{ end }}">
                 {{ .Body }}
             </section>

diff --git a/gno.land/pkg/gnoweb/frontend/css/input.css b/gno.land/pkg/gnoweb/frontend/css/input.css
@@ -301,6 +301,16 @@
   main :is(.realm-content, .source-code) > pre .chroma-ln {
     @apply scroll-mt-24;
   }
+
+  .dev-mode .toc-expend-btn {
+    @apply bg-gray-100 hover:bg-gray-50 cursor-pointer border lg:border-none lg:bg-transparent;
+  }
+  .dev-mode #sidebar-summary {
+    @apply bg-light lg:bg-transparent;
+  }
+  .dev-mode .toc-nav {
+    @apply font-mono;
+  }
 }
 
 @layer utilities {