long menu text bug fix, exampleSite landing page update

README.md

@@ -29,3 +29,7 @@ Your support will be of great help in maintaining the project.
 ## Minimum Hugo version
 
 Hugo version 0.65.0 or higher is required.
+
+## Screenshot
+
+![Hugo Theme Zdoc Screenshot](images/screenshot.png)

assets/sass/components/_menu.scss

@@ -39,23 +39,19 @@
     margin: 0.25rem 0;
 
     &[data-depth="1"] {
-      font-size: 0.925rem;
       margin-left: 1.25rem;
     }
 
     &[data-depth="2"] {
-      font-size: 0.925rem;
-      margin-left: 2.5rem;
+      margin-left: 2rem;
     }
 
     &[data-depth="3"] {
-      font-size: 0.925rem;
-      margin-left: 3.75rem;
+      margin-left: 2.75rem;
     }
 
     &[data-depth="4"] {
-      font-size: 0.925rem;
-      margin-left: 5rem;
+      margin-left: 3.5rem;
     }
 
     @include no-select;
@@ -77,30 +73,26 @@
     &--collapse {
       cursor: pointer;
       word-break: break-word;
-      font-size: 16px;
+      font-size: 0.925rem;
       height: $menu-title-height;
       margin: 0.25rem 0;
 
       &[data-depth="1"] {
-        font-size: 0.925rem;
         margin-left: 1.25rem;
       }
 
       &[data-depth="2"] {
-        font-size: 0.925rem;
-        margin-left: 2.5rem;
+        margin-left: 2rem;
       }
 
       &[data-depth="3"] {
-        font-size: 0.925rem;
-        margin-left: 3.75rem;
+        margin-left: 2.75rem;
       }
 
       &[data-depth="4"] {
-        font-size: 0.925rem;
-        margin-left: 5rem;
+        margin-left: 3.5rem;
       }
-
+      
       @include no-select;
       @include flexbox();
       @include align-items(center);
@@ -123,6 +115,10 @@
           }
         }
       }
+
+      & > span {
+        @include truncate(150px);
+      }
     }
 
     &--icon {
@@ -168,11 +164,37 @@
     @include transition();
 
     li {
-      margin-left: 1.25rem;
+      margin: 0.75rem 0 0.75rem 1.25rem;
+
+      @include truncate(170px);
 
       &.active {
         font-weight: bold;
       }
+
+      a {
+        display: inline;
+      }
+    }
+
+    li.menu__title--collapse {
+      margin: 0.25rem 0 0.25rem 1.25rem;
+
+      &[data-depth="1"] {
+        margin-left: 1.25rem;
+      }
+
+      &[data-depth="2"] {
+        margin-left: 2rem;
+      }
+
+      &[data-depth="3"] {
+        margin-left: 2.75rem;
+      }
+
+      &[data-depth="4"] {
+        margin-left: 3.5rem;
+      }
     }
   }
 

exampleSite/content/en/_index.md

@@ -1,6 +1,6 @@
 ---
-title: Zdoc
-description: Hugo zdoc theme demo site
+title: Z Themes
+description: Hugo zzo, zdoc theme documentation home page
 date: 2020-01-26T04:15:05+09:00
 draft: false
 # updatesBanner: "Banner -   [Hugo ZDoc theme](https://github.com/zzossig/hugo-theme-zdoc)   just arrived"
@@ -8,15 +8,15 @@ landing:
   height: 500
   image: favicon/android-icon-192x192.png
   title:
-    - Zdoc
+    - Z Themes
   text:
-    - Hugo zdoc theme demo site
+    - This is Hugo Z Themes documentation site
   titleColor:
   textColor:
   spaceBetweenTitleText: 25
   buttons:
     - link: docs
-      text: Explore Zdoc
+      text: HUGO THEME ZDOC
       color: primary
   # backgroundImage: 
   #   src: images/landscape.jpg
@@ -58,7 +58,7 @@ footer:
     applySinglePageCss: false
     markdown:
       |
-      ## Zdoc docs
+      ## Zzo docs
       Copyright © 2020. All rights reserved.
 
 sections:

layouts/_default/baseof.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
     {{ partial "head/scripts" . }}
-    {{ partialCached "head/styles" . }}
+    {{ partial "head/styles" . }}
     {{ partial "head/meta" . }}
     {{ partial "head/meta_json_ld" . }}
     {{ partial "head/services" . }}

layouts/partials/main/sections/list-menu.html

@@ -28,8 +28,10 @@
   {{ $active = or $active (in $currentURL $sectionName1) }}
   
   {{ if $ctx.Params.Collapsible }}
-  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}">
-    {{ $ctx.Title }}
+  <li class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}">
+    <span class="menu__title--collapse-text">
+      {{ $ctx.Title }}
+    </span>
     <span
       class="menu__title--icon {{ if $active }}{{ if eq ($root.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
       {{ if eq ($root.Param "languagedir") "rtl" }}
@@ -38,7 +40,7 @@
       {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
       {{ end }}
     </span>
-  </span>
+  </li>
   <ul class="menu__list {{ if $active }}active{{ else if (in $ctx.Permalink (print "/" $sectionName1 "/")) }}{{ end }}"
     data-data={{ print "/" $sectionName1 "/"}} data-link={{ .root.Permalink }}>
     {{ range $ctx.Pages.ByWeight }}

layouts/partials/main/sections/single-menu.html

@@ -28,8 +28,10 @@
   {{ $active = or $active (in $currentURL $sectionName1) }}
   
   {{ if $ctx.Params.Collapsible }}
-  <span class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}" data-permalink="{{ $ctx.Permalink }}">
-    {{ $ctx.Title }}
+  <li class="menu__title--collapse {{ if $active }}active{{ end }}" data-depth="{{ $depth }}" data-permalink="{{ $ctx.Permalink }}">
+    <span class="menu__title--collapse-text">
+      {{ $ctx.Title }}
+    </span>
     <span class="menu__title--icon {{ if $active }}{{ if eq ($root.Param "languagedir") "rtl" }}downrtl{{ else }}down{{ end }}{{ else }}right{{ end }}">
       {{ if eq ($root.Param "languagedir") "rtl" }}
         {{ partial "svgs/arrow-left.svg" (dict "width" 22 "height" 22) }}
@@ -37,7 +39,7 @@
         {{ partial "svgs/arrow-right.svg" (dict "width" 22 "height" 22) }}
       {{ end }}
     </span>
-  </span>
+  </li>
   <ul class="menu__list {{ if $active }}active{{ else if (in $ctx.Permalink (print "/" $sectionName1 "/")) }}{{ end }}" data-data={{ print "/" $sectionName1 "/"}} data-link={{ .root.Permalink }}>
     {{ range $ctx.Pages.ByWeight }}
       {{ if .Params.Collapsible }}