Greg breadcrumbs (and other main body stuff) to combined

assets/css/index.css

@@ -20,16 +20,19 @@
 }
 
 .prose h1,
-.prose h2,
 .prose h3,
 .prose h4,
 .prose h5,
 .prose h6 {
-  @apply font-semibold text-midnight-700 tracking-[-0.04em];
+  @apply font-normal;
+}
+
+.prose h2 {
+  @apply text-lg font-medium pb-3 border-b border-b-redis-pen-700 border-opacity-50;
 }
 
 .prose p, .prose ol, .prose ul {
-  @apply text-redis-neutral-800;
+  @apply text-sm;
 }
 
 .prose pre {
@@ -41,7 +44,7 @@
 }
 
 .prose h1 {
-  @apply text-3xl;
+  @apply text-4xl;
 }
 
 .prose h1[id],
@@ -50,7 +53,7 @@
 .prose h4[id],
 .prose h5[id],
 .prose h6[id] {
-  @apply mt-11 scroll-mt-6;
+  @apply mt-16 scroll-mt-6;
 }
 
 .prose p:empty,
@@ -63,12 +66,19 @@
   content: "";
 }
 
-.prose :where(a):not(:where([class~="not-prose"] *)) {
-  @apply text-indigo-500 decoration-transparent;
+.prose :where(a):not(:where([class~="not-prose"] *)):hover {
+  @apply text-redis-red-500;
 }
 
-.prose :where(a):not(:where([class~="not-prose"] *)):hover {
-  @apply text-indigo-700 decoration-indigo-400;
+.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)),
+.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)),
+.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) 
+{
+  @apply my-0;
+}
+
+.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
+  @apply text-redis-ink-900;
 }
 
 select {
@@ -81,16 +91,16 @@ select {
 }
 
 #TableOfContents a {
-  @apply relative block hover:text-indigo-600 py-0.5 pl-4 transition-colors leading-6;
+  @apply relative block text-redis-pen-600 hover:text-redis-pen-300 py-0.5 pl-6 transition-colors leading-6;
 }
 
 #TableOfContents a:before {
   content: '';
-  @apply w-[3px] h-full bg-slate-100 absolute left-0 top-0 rounded-xl transition;
+  @apply w-1 h-full bg-redis-pencil-250 absolute left-0 top-0 rounded-sm transition;
 }
 
 #TableOfContents a.active {
-  @apply text-indigo-600 before:bg-indigo-600 pointer-events-none;
+  @apply text-redis-ink-900 before:bg-redis-ink-900 pointer-events-none;
 }
 
 /* search */
@@ -195,24 +205,24 @@ select {
 
 .child-list:before {
   content: '';
-  @apply w-[3px] h-full bg-slate-300/30 absolute left-0 top-0 rounded-xl transition;
+  @apply w-1 h-full bg-redis-pencil-250 absolute left-0 top-0 rounded-sm transition;
 }
 
-.child-list .child-list {
-  @apply ml-4;
+.child-list {
+  @apply ml-6;
 }
 
 .child-list a {
-  @apply relative flex hover:text-indigo-600 py-0.5 pl-4 transition-colors leading-6;
+  @apply relative flex hover:text-redis-ink-900/30 transition-colors leading-6;
 }
 
 .child-list a:before {
   content: '';
-  @apply w-[3px] h-full bg-transparent absolute left-0 top-0 rounded-xl transition;
+  @apply w-1 h-full bg-transparent absolute left-0 top-0 rounded-xl transition;
 }
 
 .child-list a.active {
-  @apply before:bg-indigo-600 pointer-events-none;
+  @apply before:bg-redis-ink-900 pointer-events-none;
 }
 
 #search-cancel {
@@ -393,14 +403,6 @@ select {
   color: inherit;
 }
 
-.page-feedback {
-  @apply flex flex-col mx-12;
-}
-
-.feedback-submit {
-  @apply grid gap-2;
-}
-
 .star-rating {
   @apply flex flex-row-reverse justify-around text-center text-xl items-center; 
 }
@@ -410,16 +412,29 @@ select {
 }
 
 .star-rating label {
-  @apply cursor-pointer text-neutral-400;
+  @apply cursor-pointer text-white;
+  /* 
+    From  https://owumaro.github.io/text-stroke-generator/ 
+    Currently, there is not great way to text-stroke that works across browsers
+    Alternative is to replace star character with SVG
+  */
+  text-shadow: 
+    rgb(92, 112, 122) 1px 0px 0px, 
+    rgb(92, 112, 122) 0.540302px 0.841471px 0px, 
+    rgb(92, 112, 122) -0.416147px 0.909297px 0px, 
+    rgb(92, 112, 122) -0.989993px 0.14112px 0px, 
+    rgb(92, 112, 122) -0.653644px -0.756803px 0px, 
+    rgb(92, 112, 122) 0.283662px -0.958924px 0px, 
+    rgb(92, 112, 122) 0.96017px -0.279416px 0px;
 }
 
 .star-rating :checked ~ label {
-  @apply text-orange-400;
+  @apply text-redis-pen-600;
 }
 
 .star-rating label:hover,
 .star-rating label:hover ~ label {
-  @apply text-yellow-400;
+  @apply text-redis-red-500;
 }      
 
 .codetabs .label {
@@ -594,16 +609,6 @@ main.download:after {
   @apply w-80 h-80 fixed right-0 bottom-0 z-[-1] bg-contain bg-no-repeat bg-center;
 }
 
-main.docs:before,
-main.download:before {
-  background-image: url("/images/dots.svg");
-}
-
-main.docs:after,
-main.download:after {
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .875), rgba(255, 255, 255, .35));
-}
-
 #alpha-filter-container .active {
   @apply bg-indigo-50 text-indigo-600 border-indigo-200;
 }

layouts/_default/baseof.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}">
+<html lang="{{ .Site.Language.Lang }}" class="scroll-smooth">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

layouts/develop/list.html

@@ -3,15 +3,12 @@
 {{ end }}
 
 {{ define "main" }}
-  <main class="docs w-full max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 md:flex gap-16">
+  <main class="docs w-full max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-11 md:flex gap-16">
     {{ partial "docs-nav.html" . }}
-    <div class="w-full max-w-[47rem] py-12">
+    <div class="w-full py-12">
       {{ partial "breadcrumbs" . }}
-      <section class="prose prose-slate w-full max-w-[47rem] py-12">
+      <section class="prose w-full py-12">
         <h1>
-          {{ if and (isset .Params "stack") (eq .Params.stack true)}}
-          {{ partial "icons/logo-stack.html" (dict "context" . "class" "stack-logo-inline") }}
-          {{ end }}
           {{ .Title }}
         </h1>
 

layouts/develop/single.html

@@ -3,15 +3,12 @@
 {{ end }}
 
 {{ define "main" }}
-  <main class="docs w-full max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 md:flex gap-16">
+  <main class="docs w-full max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-11 flex flex-col md:flex-row md:gap-16">
     {{ partial "docs-nav.html" . }}
-    <div class="w-full max-w-[47rem] py-12">
+    <div class="w-full pb-12 md:py-12">
       {{ partial "breadcrumbs" . }}
-      <section class="prose prose-slate w-full max-w-[47rem] py-12">
+      <section class="prose w-full py-12">
         <h1>
-          {{ if and (isset .Params "stack") (eq .Params.stack true)}}
-          {{ partial "icons/logo-stack.html" (dict "context" . "class" "stack-logo-inline") }}
-          {{ end }}
           {{ .Title }}</h1>
         {{ with .Params.description }}<p class="text-lg -mt-5 mb-10">{{ . | markdownify }}</p>{{ end }}
 

layouts/partials/breadcrumbs.html

@@ -1,5 +1,6 @@
-<nav class="flex" aria-label="Breadcrumb">
-  <ol role="list" class="flex items-center space-x-2">
+{{/*  Long page titles cause issue with wrapping  */}}
+<nav class="flex text-redis-pen-400 text-xs font-mono font-normal" aria-label="Breadcrumb"> 
+  <ol role="list" class="flex items-center">
     {{ template "breadcrumb_navigation" (dict "p1" . "p2" .) }}
   </ol>
 </nav>
@@ -10,19 +11,15 @@
   {{ else if not .p1.IsHome }}
     {{ template "breadcrumb_navigation" (dict "p1" .p1.Site.Home "p2" .p2 )  }}
   {{ end }}
-  <li class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700{{ if eq .p1 .p2 }} pointer-events-none{{ end }}">
+  <li class="flex items-center {{ if eq .p1 .p2 }} pointer-events-none{{ end }}">
     {{ if .p1.Parent }}
-      <svg class="flex-shrink-0 h-5 w-5 mr-2 text-slate-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-      </svg>
-      <a class="" href="{{ .p1.RelPermalink }}">
+      <span class="px-2">→</span>
+      <a class="hover:text-redis-pen-600" href="{{ .p1.RelPermalink }}">
         {{ .p1.Title }}
       </a>
     {{ else }}
-      <a class="text-gray-400 hover:text-gray-500" href="{{ .p1.RelPermalink }}">
-        <svg class="flex-shrink-0 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
-        </svg>
+      <a class=" hover:text-redis-pen-600" href="{{ .p1.RelPermalink }}">
+        <span>Home</span>
         <span class="sr-only">Home</span>
       </a>
     {{ end }}

layouts/partials/docs-nav.html

@@ -1,7 +1,6 @@
 {{ define "li" -}}
   {{ $s := .section -}}
   {{ $p := .page -}}
-  {{ $treeRoot := cond (eq .ulNr 0) true false -}}
   {{ $ulNr := .ulNr -}}
   {{ $ulShow := .ulShow -}}
   {{ $active := eq $s $p -}}
@@ -12,25 +11,23 @@
   {{ $rootDir := lt $ulNr 1 -}}
 
   {{ if and $show (not (default false $s.Params.hidden)) }}
-    <li>
-      <a class="flex justify-between items-center truncate{{- if $rootDir}} font-semibold text-slate-900{{- else if and ($active) (not $rootDir) }} active text-indigo-600{{- else }} text-slate-600 hover:text-indigo-600{{- end }}" href="{{ $s.RelPermalink }}">
-          <span>{{ $s.LinkTitle }}</span>
-          {{ if and (isset $s.Params "stack") (eq $s.Params.stack true)}}
-          {{ partial "icons/logo-stack.html" (dict "context" . "class" "stack-logo-inline") }}
-          {{ end }}
-
-          {{ if and $ulNr $withChild }}
-            {{ if or $active $activePath }}
-            {{/*  TODO: why can't I add the rotate-%s class?  */}}
-            {{ partial "icons/docs-nested-section" (dict "class" "shrink-0 h-[1.0rem] w-[1.0rem] stroke-slate-400 rotate-90") }}
-            {{ else }}
-            {{ partial "icons/docs-nested-section" (dict "class" "shrink-0 h-[1.0rem] w-[1.0rem] stroke-slate-400") }}
-            {{ end }}
+    <li class="">
+      <a class="flex justify-start items-center pl-6 py-1.5 {{ if $rootDir}} mb-3 py-4 text-redis-ink-900 border-b border-opacity-50 border-b-redis-ink-900 font-medium {{ else if and ($active) (not $rootDir) }} active text-redis-ink-900{{ else }} text-redis-pen-600 hover:text-redis-pen-400{{ end }}" href="{{ $s.RelPermalink }}">
+        {{ if and $ulNr $withChild }}
+          {{ if or $active $activePath }}
+            <span class="pr-3">↓</span>
+          {{ else }}
+            <span class="pr-3">→</span>
           {{ end }}
+        {{ end }}  
+        <span class="">{{ $s.LinkTitle }}</span>
+          {{/*  {{ if and (isset $s.Params "stack") (eq $s.Params.stack true)}}
+            {{ partial "icons/logo-stack.html" (dict "context" . "class" "stack-logo-inline") }}
+          {{ end }}  */}}
       </a>
       {{- if $withChild }}
         {{- $ulNr := add $ulNr 1 }}
-        <ul class="{{- if gt $ulNr 1}}child-list{{- end }}">
+        <ul class="{{ if gt $ulNr 1}}child-list{{ end }}">
           {{ range $pages -}}
             {{ if (not (eq $s $p.Site.Home)) -}}
               {{ template "li" (dict "page" $p "section" . "ulNr" $ulNr "ulShow" $ulShow) }}
@@ -42,14 +39,46 @@
   {{- end }}
 {{- end }}
 
-<div class="hidden md:block w-60 h-full shrink-0">
-  <nav class="w-60 z-40 bg-white hidden md:block fixed top-28 pb-16 h-full max-h-[calc(100vh-7rem)] text-[0.8125rem] leading-7 font">
-    <div class="absolute right-0 -top-28 z-[-1] h-screen border-r border-slate-200/50 bg-gradient-to-bl from-slate-50 via-slate-50 to-indigo-100 w-[17rem] xl:w-[calc(50vw-23rem)]"></div>
+{{ define "li2" -}}
+  {{ $page := .page -}}
+  {{ $pages := .pages -}}
+
+  {{ range $pages -}}
+    {{ $isActive := eq $page . -}}
+    {{ $isActivePath := $page.IsDescendant . -}}
+    {{ $childPages := (union .Pages .Sections).ByWeight -}}
+    <li class="my-2">
+      <a class="pl-6 flex {{ if $isActive }} active text-redis-ink-900 {{ else }} text-redis-pen-600 hover:text-redis-pen-400 {{ end }}" href="{{.RelPermalink}}">
+        {{ if gt (len $childPages) 0 }}
+          {{ if or $isActive $isActivePath -}}
+            <span class="pr-3">↓</span>
+          {{ else -}}
+            <span class="pr-3">→</span>
+          {{ end -}}
+        {{ end -}}
+        <span>{{.LinkTitle}}</span>
+      </a>
+    </li>
+    {{ if and (gt (len $childPages) 0) (or $isActive $isActivePath)}}
+      <ul class="child-list">
+        {{ template "li2" (dict "page" $page "pages" $childPages) }}
+      </ul>
+    {{ end }}
+  {{- end }}
+{{- end }}
+
+<div class="w-full md:w-64 h-fit md:h-full shrink-0 text-sm font-mono font-normal py-6">
+  <nav class="w-full md:w-64 z-40 bg-white md:fixed md:-ml-6 md:pt-6 h-fit md:h-full max-h-[calc(100vh-7rem-14rem)] leading-7">
     {{ $navRoot := cond (eq .Site.Home.Type "docs") .Site.Home .FirstSection -}}
     {{ $ulNr := 0 -}}
     {{ $ulShow := 1 -}}
-    <ul class="h-full max-h-[calc(100vh-7rem)] overflow-y-auto pr-6">
-      {{ template "li" (dict "page" . "section" $navRoot "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
-    </ul>
+    <div class="max-h-[calc(100vh-7rem-14rem)] border border-opacity-50 border-redis-ink-900 rounded-md flex flex-col">
+      <div class="px-6 py-4 text-redis-ink-900 font-medium flex justify-between cursor-pointer md:cursor-default"><a href="{{ $navRoot.RelPermalink }}">{{ $navRoot.LinkTitle }}</a><span class="md:hidden self-center">{{ partial "icons/chevron.html" }}</span></div>
+      <ul class="hidden md:block overflow-y-auto grow pr-6 border-y border-opacity-50 border-y-redis-ink-900">
+        {{/*  {{ template "li" (dict "page" . "section" $navRoot "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}  */}}
+        {{ template "li2" (dict "page" . "pages" (union $navRoot.Pages $navRoot.Sections).ByWeight) }}
+      </ul>
+      <div class="hidden md:block w-full py-7"></div>
+    </div>
   </nav>
 </div>

layouts/partials/docs-toc.html

@@ -1,10 +1,10 @@
 {{ $this := . }}
 {{ with .TableOfContents }}
   <section class="hidden xl:block w-60 h-full shrink-0">
-    <div class="w-60 z-40 hidden bg-white/75 md:block overflow-auto fixed top-28 h-full max-h-[calc(100vh-15rem)] text-[0.8125rem]">
+    <div class="w-60 z-40 overflow-auto fixed top-28 h-full max-h-[calc(100vh-15rem)] text-sm">
       {{ partial "meta-links.html" $this }}
       {{ if gt (len .) 32 }}
-        <h1 class="font-semibold my-3">On This Page</h1>
+        <h1 class="font-medium my-3">On this page</h1>
         <nav class="text-slate-700">
           {{ . }}
         </nav>