enhances templates/CSS

Cecilapp · Feb 1, 2024 · 167f957 · 167f957
1 parent 73485ea
commit 167f957
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 60 deletions.
diff --git a/assets/styles.css b/assets/styles.css
@@ -1344,6 +1344,12 @@ video {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -1784,7 +1790,7 @@ main details a {
 
 /* Sidebar */
 
-#sidebar h3 {
+#sidebar div.group-title {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 600;
@@ -1793,7 +1799,7 @@ main details a {
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
-:is(.dark #sidebar h3) {
+:is(.dark #sidebar div.group-title) {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity));
 }
@@ -1890,8 +1896,6 @@ main details a {
   border-radius: 0.25rem !important;
   --tw-bg-opacity: 1 !important;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity)) !important;
-  padding-left: 0.75rem !important;
-  padding-right: 0.75rem !important;
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05) !important;
@@ -1906,20 +1910,15 @@ main details a {
   outline-offset: 2px !important;
 }
 
-@media (min-width: 768px) {
-  .DocSearch.DocSearch-Button {
-    width: 16rem !important;
-  }
-}
-
 @media (min-width: 1024px) {
   .DocSearch.DocSearch-Button {
+    width: 12rem !important;
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
 }
 
-@media not all and (min-width: 768px) {
+@media not all and (min-width: 1024px) {
   .DocSearch.DocSearch-Button {
     background-color: transparent !important;
     --tw-shadow: 0 0 #0000 !important;
@@ -2325,18 +2324,10 @@ main details a {
 }
 
 @media (min-width: 768px) {
-  .md\:block {
-    display: block;
-  }
-
   .md\:inline-block {
     display: inline-block;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:w-2\/4 {
     width: 50%;
   }

diff --git a/composer.json b/composer.json
@@ -12,7 +12,7 @@
     }
   ],
   "require": {
-    "cecil/theme-docs": "^2.8",
+    "cecil/theme-docs": "^2.9",
     "cecil/theme-pwa": "^2.1"
   },
   "scripts": {

diff --git a/composer.lock b/composer.lock
diff --git a/config.yml b/config.yml
@@ -19,6 +19,22 @@ languages:
     config:
       baseline: Une documentation efficace
       description: Créer et gérer une documentation efficace.
+      menus:
+        main:
+          - id: index
+            enabled: false
+          - id: docs
+            name: Docs
+            url: docs/introduction/getting-started
+            weight: -1
+menus:
+  main:
+    - id: index
+      enabled: false
+    - id: docs
+      name: Docs
+      url: docs/introduction/getting-started
+      weight: -1
 sidebar:
   - Introduction
   - Guides

diff --git a/pages/about.md b/pages/about.md
@@ -0,0 +1,7 @@
+---
+title: About
+menu: main
+---
+# About
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/themes/docs/assets/styles.css b/themes/docs/assets/styles.css
@@ -1344,6 +1344,12 @@ video {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
@@ -1784,7 +1790,7 @@ main details a {
 
 /* Sidebar */
 
-#sidebar h3 {
+#sidebar div.group-title {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 600;
@@ -1793,7 +1799,7 @@ main details a {
   color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
-:is(.dark #sidebar h3) {
+:is(.dark #sidebar div.group-title) {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity));
 }
@@ -1890,8 +1896,6 @@ main details a {
   border-radius: 0.25rem !important;
   --tw-bg-opacity: 1 !important;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity)) !important;
-  padding-left: 0.75rem !important;
-  padding-right: 0.75rem !important;
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05) !important;
@@ -1906,20 +1910,15 @@ main details a {
   outline-offset: 2px !important;
 }
 
-@media (min-width: 768px) {
-  .DocSearch.DocSearch-Button {
-    width: 16rem !important;
-  }
-}
-
 @media (min-width: 1024px) {
   .DocSearch.DocSearch-Button {
+    width: 12rem !important;
     padding-left: 1rem !important;
     padding-right: 1rem !important;
   }
 }
 
-@media not all and (min-width: 768px) {
+@media not all and (min-width: 1024px) {
   .DocSearch.DocSearch-Button {
     background-color: transparent !important;
     --tw-shadow: 0 0 #0000 !important;
@@ -2325,18 +2324,10 @@ main details a {
 }
 
 @media (min-width: 768px) {
-  .md\:block {
-    display: block;
-  }
-
   .md\:inline-block {
     display: inline-block;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:w-2\/4 {
     width: 50%;
   }

diff --git a/themes/docs/layouts/_default/page.html.twig b/themes/docs/layouts/_default/page.html.twig
@@ -13,19 +13,24 @@
   </head>
   <body class="font-sans antialiased bg-primary-50 dark:bg-primary-950 text-primary-950 dark:text-secondary-100">
     {#- sidebar ~#}
-    {%- if page.section == 'docs' ~%}
     {{- include('partials/sidebar.html.twig') ~}}
-    {%- endif ~%}
     <div id="cloudy-wrapper" class="hidden fixed top-0 z-40 w-full h-full bg-black opacity-25" onclick="toggleMenu()"></div>
-    <header class="fixed top-0 inset-x-0 z-30 flex space-x-3 space-x-reverse items-center h-14 pl-4 pr-1 lg:pl-6 lg:pr-2 py-3 bg-primary-700 dark:bg-primary-900 text-primary-100 hover:text-primary-50 shadow-md">
+    <header class="fixed top-0 inset-x-0 z-30 flex space-x-3 space-x-reverse items-center h-14 pl-4 pr-1 lg:pr-2 py-3 bg-primary-700 dark:bg-primary-900 text-primary-100 hover:text-primary-50 shadow-md">
       <div class="hidden"></div>
       {{- include('partials/menu-title.html.twig') ~}}
-      <div class="md:hidden grow"></div>
+      {#- menu ~#}
+      <div class="hidden lg:flex flex-row space-x-4">
+        {%- for entry in site.menus.main|sort_by_weight ~%}
+        <a class="hidden md:inline-block" href="{{ url(entry.url) }}" data-weight="{{ entry.weight }}">
+          {{ entry.name }}
+        </a>
+        {%- endfor -%}
+      </div>
+      <div class="grow"></div>
       {#- DocSearch ~#}
       {%- if site.docsearch.enabled ?? false ~%}
       <div id="search-container" class="md:inline-block py-2"></div>
       {%- endif ~%}
-      <div class="hidden md:block grow"></div>
       {#- GitHub link -#}
       {%- if site.github.repo|default ~%}
       <a href="{{ site.github.repo }}" title="{{ site.title }} on GitHub" class="flex no-underline hover:no-underline py-2 items-center">
@@ -41,7 +46,7 @@
         <div class="hidden sm:block">
           {{- include('partials/theme-selector.html.twig') ~}}
         </div>
-        <div class="hidden sm:block">
+        <div>
           {{- include('partials/language-selector.html.twig') ~}}
         </div>
       </div>

diff --git a/themes/docs/layouts/docs/page.html.twig b/themes/docs/layouts/docs/page.html.twig
@@ -40,7 +40,7 @@
       {#- "On this page" navigation ~#}
       <div>
         <nav id="on-this-page" class="hidden xl:block py-6 w-64 text-secondary-500 dark:text-secondary-300 sticky top-[80px]">
-          <h3 class="mb-2 font-semibold text-sm uppercase tracking-wider">{% trans %}On this page{% endtrans %}</h3>
+          <div class="mb-2 font-semibold text-sm uppercase tracking-wider">{% trans %}On this page{% endtrans %}</div>
           <div id="on-this-page-toc">
             {{ page.body|toc }}
           </div>

diff --git a/themes/docs/layouts/partials/menu-title.html.twig b/themes/docs/layouts/partials/menu-title.html.twig
@@ -1,5 +1,4 @@
       {#- sidebar mobile button ~#}
-      {%- if page.section == 'docs' ~%}
       <button class="flex lg:hidden items-center" onclick="toggleMenu()">
         <svg id="sidebar-svg1" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7">
           <title>{% trans %}Open menu{% endtrans %}</title><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
@@ -8,7 +7,6 @@
           <title>{% trans %}Close menu{% endtrans %}</title><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
         </svg>
       </button>
-      {%- endif ~%}
       {#- site title ~#}
       <div class="w-[15.75rem]">
         <a href="{{ url(site.home) }}" title="{{ site.title }}" class="text-xl text-inherit hover:text-inherit no-underline hover:no-underline py-2">{{ site.title }}</a>

diff --git a/themes/docs/layouts/partials/sidebar.html.twig b/themes/docs/layouts/partials/sidebar.html.twig
@@ -1,17 +1,18 @@
       {#- sidebar ~#}
-      <div id="sidebar" class="fixed z-50 lg:z-0 top-0 lg:top-auto lg:flex lg:flex-col w-auto lg:min-w-72 h-screen overflow-auto bg-primary-100 dark:bg-primary-900 shadow-md lg:shadow-none -translate-x-full lg:translate-x-0 transition-all duration-200 ease-out">
+      <div id="sidebar" class="fixed z-50 lg:z-0 top-0 lg:top-auto lg:flex lg:flex-col w-auto lg:min-w-72 h-screen overflow-auto bg-primary-100 dark:bg-primary-900 shadow-md lg:shadow-none -translate-x-full {% if page.type != 'homepage' %}lg:translate-x-0{% endif %} transition-all duration-200 ease-out">
         <div class="lg:hidden flex space-x-3 space-x-reverse items-center h-14 pl-4 pr-1 lg:pl-6 lg:pr-2 py-3">
           <div class="hidden"></div>
           {{- include('partials/menu-title.html.twig') ~}}
         </div>
         <nav class="px-4 py-3">
+          {%- block navigation ~%}
           {%- for group in site.sidebar ~%}
             {%- if site.page('docs/' ~ group|slugify) ~%}
               {%- set group_title = site.page('docs/' ~ group|slugify).title ~%}
             {%- else ~%}
               {%- set group_title = group ~%}
             {%- endif ~%}
-          <h3>{{ group_title|trans }}</h3>
+          <div class="group-title">{{ group_title|trans }}</div>
           <ul>
             {#-{%- for p in site.pages.showable|filter(p => p.path matches '{^docs/' ~ group|slugify ~ '}') ~%}~#}
             {%- for p in site.pages.showable|filter(p => p.folder == 'docs/' ~ group|slugify) ~%}
@@ -21,6 +22,7 @@
             {%- endfor ~%}
           </ul>
           {%- endfor ~%}
+          {%- endblock ~%}
           <div class="lg:hidden mt-4 pt-4 flex flex-col space-y-1 border-t border-t-secondary-400">
             {{- include('partials/theme-selector.html.twig', {'label': true}) ~}}
             {{- include('partials/language-selector.html.twig', {'label': true}) ~}}

diff --git a/themes/docs/tailwind.css b/themes/docs/tailwind.css
@@ -41,7 +41,7 @@ main details a {
 }
 
 /* Sidebar */
-#sidebar h3 {
+#sidebar div.group-title {
   @apply uppercase font-semibold text-sm text-secondary-500 dark:text-secondary-200;
 }
 #sidebar ul {
@@ -86,9 +86,9 @@ main details a {
 
 /* DocSearch */
 .DocSearch.DocSearch-Button {
-  @apply w-full md:w-64 rounded m-0 px-3 lg:px-4 py-2 bg-primary-800 focus:outline-none focus:bg-primary-700 shadow-inner cursor-pointer !important;
-  @apply max-md:bg-transparent !important;
-  @apply max-md:shadow-none !important;
+  @apply w-full lg:w-48 rounded m-0 lg:px-4 py-2 bg-primary-800 focus:outline-none focus:bg-primary-700 shadow-inner cursor-pointer !important;
+  @apply max-lg:bg-transparent !important;
+  @apply max-lg:shadow-none !important;
 }
 .DocSearch .DocSearch-Button-Placeholder {
   @apply text-primary-100 font-light !important;