From e59da750ab1c5d820a5e689082ba382e7a4b5f9f Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Tue, 16 Jan 2024 14:06:46 -0500
Subject: [PATCH 01/11] Breadcrumbs to match figma

---
 layouts/partials/breadcrumbs.html | 19 ++++++++-----------
 tailwind.config.js                | 24 ++++++++++++++----------
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index c66d60b9d2..d98990c90d 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/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-450 text-sm font-mono font-normal whitespace-nowrap" 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-650" 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-650" href="{{ .p1.RelPermalink }}">
+        <span>Home</span>
         <span class="sr-only">Home</span>
       </a>
     {{ end }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 46637b90d5..2405ba43e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,16 +12,20 @@ module.exports = {
 				display: [ 'Inter Display', ...defaultTheme.fontFamily.sans ],
       },
 	  colors: {
-		midnight: {
-			700: '#161F31',
-		  },
-		'redis-indigo': {
-			500: '#5961ff',
-			600: '#454CD5'
-		},
-        'redis-neutral': {
-			800: '#4E545B'
-		}
+			midnight: {
+				700: '#161F31',
+				},
+			'redis-indigo': {
+				500: '#5961ff',
+				600: '#454CD5'
+			},
+			'redis-pen': {
+				450: '#8A99A0',
+				650: '#5C707A'
+			},
+			'redis-neutral': {
+				800: '#4E545B'
+			}
 	  },
       typography: (theme) => (  {
         DEFAULT: {

From 72afd7d76337c1ce851861901ffe17e70ea34f8a Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Wed, 17 Jan 2024 15:29:08 -0500
Subject: [PATCH 02/11] DocsNav

---
 layouts/develop/list.html      |  2 +-
 layouts/partials/docs-nav.html | 38 ++++++++++++++++------------------
 tailwind.config.js             |  6 ++++++
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/layouts/develop/list.html b/layouts/develop/list.html
index b7dc209899..24a2880111 100644
--- a/layouts/develop/list.html
+++ b/layouts/develop/list.html
@@ -3,7 +3,7 @@
 {{ 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">
       {{ partial "breadcrumbs" . }}
diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 022841e68e..1ad8aecc25 100644
--- a/layouts/partials/docs-nav.html
+++ b/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-650 hover:text-redis-pen-450{{ 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,13 +39,14 @@
   {{- 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>
+<div class="hidden md:block w-64 h-full shrink-0 text-base font-mono font-normal">
+  <nav class="w-64 z-40 bg-white hidden md:block fixed -ml-6 py-6 h-full max-h-[calc(100vh-7rem)] leading-7">
+    {{/*  <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>  */}}
     {{ $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">
+    <ul class="h-full max-h-[calc(100vh-7rem)] overflow-y-auto border border-opacity-50 border-redis-ink-900 rounded-md">
+      <li></li>
       {{ template "li" (dict "page" . "section" $navRoot "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
     </ul>
   </nav>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2405ba43e7..d7dbaffe58 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,12 @@ module.exports = {
 				450: '#8A99A0',
 				650: '#5C707A'
 			},
+			'redis-pencil': {
+				250: '#D9D9D9'
+			},
+			'redis-ink': {
+				900: '#091A23'
+			},
 			'redis-neutral': {
 				800: '#4E545B'
 			}

From 8ebcf56abea0c5c7ccba285c150dbdde6bd6889b Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Wed, 17 Jan 2024 15:46:43 -0500
Subject: [PATCH 03/11] css file

---
 assets/css/index.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 99ab625d09..1e636dfaea 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -195,24 +195,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 {

From 66134a292e8e130813d36b474cd1af82df9f1370 Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Thu, 18 Jan 2024 16:55:18 -0500
Subject: [PATCH 04/11] Fixed to move scroll inside container

---
 layouts/partials/docs-nav.html | 43 +++++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 1ad8aecc25..41ff6d5beb 100644
--- a/layouts/partials/docs-nav.html
+++ b/layouts/partials/docs-nav.html
@@ -39,15 +39,46 @@
   {{- end }}
 {{- end }}
 
-<div class="hidden md:block w-64 h-full shrink-0 text-base font-mono font-normal">
+{{ 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-650 hover:text-redis-pen-450 {{ 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="hidden md:block w-64 h-full shrink-0 text-sm font-mono font-normal">
   <nav class="w-64 z-40 bg-white hidden md:block fixed -ml-6 py-6 h-full max-h-[calc(100vh-7rem)] leading-7">
-    {{/*  <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>  */}}
     {{ $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 border border-opacity-50 border-redis-ink-900 rounded-md">
-      <li></li>
-      {{ template "li" (dict "page" . "section" $navRoot "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
-    </ul>
+    <div class="h-full max-h-[calc(100vh-7rem)] border border-opacity-50 border-redis-ink-900 rounded-md flex flex-col">
+      <div class="px-6 py-4 text-redis-ink-900 border-b border-opacity-50 border-b-redis-ink-900 font-medium"><a href="{{ $navRoot.RelPermalink }}">{{ $navRoot.LinkTitle }}</a></div>
+      <ul class=" overflow-y-auto grow  pr-6">
+        {{/*  {{ 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="w-full py-7 border-t border-opacity-50 border-t-redis-ink-900"></div>
+  </div>
   </nav>
 </div>
\ No newline at end of file

From baa7b544219308836f6700dfd3c0aa3f6abf4dc0 Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Mon, 22 Jan 2024 10:56:32 -0500
Subject: [PATCH 05/11] 'On this page' to match Figma

---
 assets/css/index.css              |  6 +++---
 layouts/partials/breadcrumbs.html |  6 +++---
 layouts/partials/docs-nav.html    |  4 ++--
 layouts/partials/docs-toc.html    |  4 ++--
 layouts/partials/meta-links.html  |  6 +++---
 tailwind.config.js                | 22 +++++++++++++++++++---
 6 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 1e636dfaea..85f922058b 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -81,16 +81,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 */
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index d98990c90d..91ec173441 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/layouts/partials/breadcrumbs.html
@@ -1,5 +1,5 @@
 {{/*  Long page titles cause issue with wrapping  */}}
-<nav class="flex text-redis-pen-450 text-sm font-mono font-normal whitespace-nowrap" aria-label="Breadcrumb"> 
+<nav class="flex text-redis-pen-400 text-sm font-mono font-normal" aria-label="Breadcrumb"> 
   <ol role="list" class="flex items-center">
     {{ template "breadcrumb_navigation" (dict "p1" . "p2" .) }}
   </ol>
@@ -14,11 +14,11 @@
   <li class="flex items-center {{ if eq .p1 .p2 }} pointer-events-none{{ end }}">
     {{ if .p1.Parent }}
       <span class="px-2">→</span>
-      <a class="hover:text-redis-pen-650" href="{{ .p1.RelPermalink }}">
+      <a class="hover:text-redis-pen-600" href="{{ .p1.RelPermalink }}">
         {{ .p1.Title }}
       </a>
     {{ else }}
-      <a class=" hover:text-redis-pen-650" href="{{ .p1.RelPermalink }}">
+      <a class=" hover:text-redis-pen-600" href="{{ .p1.RelPermalink }}">
         <span>Home</span>
         <span class="sr-only">Home</span>
       </a>
diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 41ff6d5beb..8b77ec93b6 100644
--- a/layouts/partials/docs-nav.html
+++ b/layouts/partials/docs-nav.html
@@ -12,7 +12,7 @@
 
   {{ if and $show (not (default false $s.Params.hidden)) }}
     <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-650 hover:text-redis-pen-450{{ end }}" href="{{ $s.RelPermalink }}">
+      <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>
@@ -48,7 +48,7 @@
     {{ $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-650 hover:text-redis-pen-450 {{ end }}" href="{{.RelPermalink}}">
+      <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>
diff --git a/layouts/partials/docs-toc.html b/layouts/partials/docs-toc.html
index 395bef9efb..2821ab33af 100644
--- a/layouts/partials/docs-toc.html
+++ b/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>
diff --git a/layouts/partials/meta-links.html b/layouts/partials/meta-links.html
index f196ec6980..105065ac2f 100644
--- a/layouts/partials/meta-links.html
+++ b/layouts/partials/meta-links.html
@@ -4,14 +4,14 @@
 {{ $editURL := printf "%s/edit/%s/%s" $gh_repo $gh_branch $gh_path }}
 {{ $issuesURL := printf "%s/issues/new?title=%s" $gh_repo (safeURL $.Title )}}
 
-<nav class="flex flex-col gap-1 mb-6 pb-2 border-b-2">
-  <a {{ printf "href=%q" $editURL | safeHTMLAttr }} target="_blank" class="group inline-flex items-center gap-1 text-sm text-slate-700 hover:text-indigo-600 mt-auto self-start">
+<nav class="flex flex-col gap-3 pb-3 w-52 text-redis-pencil-600 border-b border-b-redis-pen-700 border-opacity-50">
+  <a {{ printf "href=%q" $editURL | safeHTMLAttr }} target="_blank" class="group inline-flex items-center gap-1  hover:text-redis-pen-400 mt-auto self-start">
     <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
       <path d="M11 44q-1.2 0-2.1-.9Q8 42.2 8 41V7q0-1.2.9-2.1Q9.8 4 11 4h17l12 12v7.8h-3V18H26V7H11v34h15v3Zm0-3V7v34Zm26.8-11.15 1.4 1.4-8.2 8.2V42h2.55l8.2-8.2 1.4 1.4-8.8 8.8H29v-5.35Zm5.35 5.35-5.35-5.35 3.05-3.05q.45-.45 1.05-.45.6 0 1.05.45l3.25 3.25q.45.45.45 1.05 0 .6-.45 1.05Z" fill="currentColor" />
     </svg>
     Edit this page
   </a>
-  <a {{ printf "href=%q" $issuesURL | safeHTMLAttr }} target="_blank" class="group inline-flex items-center gap-1 text-sm text-slate-700 hover:text-indigo-600 mt-auto self-start">
+  <a {{ printf "href=%q" $issuesURL | safeHTMLAttr }} target="_blank" class="group inline-flex items-center gap-1  hover:text-redis-pen-400 mt-auto self-start">
     <svg class="w-4 h-4" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor" />
     </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index d7dbaffe58..43aa0fcacf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,11 +20,27 @@ module.exports = {
 				600: '#454CD5'
 			},
 			'redis-pen': {
-				450: '#8A99A0',
-				650: '#5C707A'
+				200: '#E8EBEC',
+				300: '#B9C2C6',
+				400: '#8A99A0',
+				600: '#5C707A',
+				700: '#2D4754',
+				800: '#163341'
 			},
 			'redis-pencil': {
-				250: '#D9D9D9'
+				200: '#E5E5E5',
+
+				250: '#D9D9D9',
+
+				300: '#B2B2B2',
+				500: '#808080',
+				600: '#4C4C4C',
+
+				700: '#444444',
+
+				900: '#191919',
+				950: '#000000'
+				
 			},
 			'redis-ink': {
 				900: '#091A23'

From d6daeeb0ee9eedb6b5476ab2e9619938ea893ca0 Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Mon, 22 Jan 2024 16:34:22 -0500
Subject: [PATCH 06/11] Main body page made to look closer to Figma, still
 working on getting inner sections closer

---
 assets/css/index.css              | 23 +++++----
 layouts/develop/list.html         |  4 +-
 layouts/develop/single.html       |  6 +--
 layouts/partials/breadcrumbs.html |  2 +-
 layouts/partials/docs-nav.html    |  4 +-
 layouts/partials/docs-toc.html    |  2 +-
 tailwind.config.js                | 78 +++++++++++++++----------------
 7 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 85f922058b..9b008e608b 100644
--- a/assets/css/index.css
+++ b/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,14 @@
   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;
 }
 
 select {
diff --git a/layouts/develop/list.html b/layouts/develop/list.html
index 24a2880111..86c4f6b419 100644
--- a/layouts/develop/list.html
+++ b/layouts/develop/list.html
@@ -5,9 +5,9 @@
 {{ define "main" }}
   <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 prose-slate 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") }}
diff --git a/layouts/develop/single.html b/layouts/develop/single.html
index cdefefbfe4..eddd06bdca 100644
--- a/layouts/develop/single.html
+++ b/layouts/develop/single.html
@@ -3,11 +3,11 @@
 {{ 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 prose-slate 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") }}
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index 91ec173441..16556bb9d7 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/layouts/partials/breadcrumbs.html
@@ -1,5 +1,5 @@
 {{/*  Long page titles cause issue with wrapping  */}}
-<nav class="flex text-redis-pen-400 text-sm font-mono font-normal" aria-label="Breadcrumb"> 
+<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>
diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 8b77ec93b6..05d6d625d4 100644
--- a/layouts/partials/docs-nav.html
+++ b/layouts/partials/docs-nav.html
@@ -68,11 +68,11 @@
 {{- end }}
 
 <div class="hidden md:block w-64 h-full shrink-0 text-sm font-mono font-normal">
-  <nav class="w-64 z-40 bg-white hidden md:block fixed -ml-6 py-6 h-full max-h-[calc(100vh-7rem)] leading-7">
+  <nav class="w-64 z-40 bg-white hidden md:block fixed -ml-6 py-6 h-full max-h-[calc(100vh-7rem-14rem)] leading-7">
     {{ $navRoot := cond (eq .Site.Home.Type "docs") .Site.Home .FirstSection -}}
     {{ $ulNr := 0 -}}
     {{ $ulShow := 1 -}}
-    <div class="h-full max-h-[calc(100vh-7rem)] border border-opacity-50 border-redis-ink-900 rounded-md flex flex-col">
+    <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 border-b border-opacity-50 border-b-redis-ink-900 font-medium"><a href="{{ $navRoot.RelPermalink }}">{{ $navRoot.LinkTitle }}</a></div>
       <ul class=" overflow-y-auto grow  pr-6">
         {{/*  {{ template "li" (dict "page" . "section" $navRoot "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}  */}}
diff --git a/layouts/partials/docs-toc.html b/layouts/partials/docs-toc.html
index 2821ab33af..1056d74602 100644
--- a/layouts/partials/docs-toc.html
+++ b/layouts/partials/docs-toc.html
@@ -4,7 +4,7 @@
     <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-medium my-3">On This Page</h1>
+        <h1 class="font-medium my-3">On this page</h1>
         <nav class="text-slate-700">
           {{ . }}
         </nav>
diff --git a/tailwind.config.js b/tailwind.config.js
index 43aa0fcacf..c76cd5fe6e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,3 @@
-const { red } = require('tailwindcss/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
 
@@ -11,56 +10,55 @@ module.exports = {
 				mono: [ 'Fira Code', 'SF Mono', ...defaultTheme.fontFamily.mono ],
 				display: [ 'Inter Display', ...defaultTheme.fontFamily.sans ],
       },
-	  colors: {
-			midnight: {
-				700: '#161F31',
+			colors: {
+				midnight: {
+					700: '#161F31',
+					},
+				'redis-red': {
+					500: '#FF4438'
 				},
-			'redis-indigo': {
-				500: '#5961ff',
-				600: '#454CD5'
-			},
-			'redis-pen': {
-				200: '#E8EBEC',
-				300: '#B9C2C6',
-				400: '#8A99A0',
-				600: '#5C707A',
-				700: '#2D4754',
-				800: '#163341'
-			},
-			'redis-pencil': {
-				200: '#E5E5E5',
+				'redis-indigo': {
+					500: '#5961ff',
+					600: '#454CD5'
+				},
+				'redis-pen': {
+					200: '#E8EBEC',
+					300: '#B9C2C6',
+					400: '#8A99A0',
+					600: '#5C707A',
+					700: '#2D4754',
+					800: '#163341'
+				},
+				'redis-pencil': {
+					200: '#E5E5E5',
 
-				250: '#D9D9D9',
+					250: '#D9D9D9',
 
-				300: '#B2B2B2',
-				500: '#808080',
-				600: '#4C4C4C',
+					300: '#B2B2B2',
+					500: '#808080',
+					600: '#4C4C4C',
 
-				700: '#444444',
+					700: '#444444',
 
-				900: '#191919',
-				950: '#000000'
-				
-			},
-			'redis-ink': {
-				900: '#091A23'
+					900: '#191919',
+					950: '#000000'
+					
+				},
+				'redis-ink': {
+					900: '#091A23'
+				},
+				'redis-neutral': {
+					800: '#4E545B'
+				}
 			},
-			'redis-neutral': {
-				800: '#4E545B'
-			}
-	  },
       typography: (theme) => (  {
         DEFAULT: {
           css: {
-            color: theme('colors.slate.600'),
+            color: theme('colors.redis-ink.900'),
             a: {
               transition: '.2s all',
-              color: theme('colors.redis-indigo.500'),
-              textDecorationColor: theme('colors.indigo.300'),
-			  textDecoration: 'none',
-              '&:hover': {
-                color: theme('colors.redis-indigo.600'),
-              },
+			  			textDecoration: 'underline',
+							fontWeight: '400',
             },
             code: {
               fontWeight: '500',

From 568cc3def5d0e75f9c9b14f59ccec003887eb1cb Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Tue, 23 Jan 2024 11:36:57 -0500
Subject: [PATCH 07/11] Rate this page and back to top added - main page made
 to further look like Figma

---
 assets/css/index.css           | 21 ++++++---------------
 layouts/_default/baseof.html   |  2 +-
 layouts/develop/list.html      |  5 +----
 layouts/develop/single.html    |  5 +----
 layouts/partials/feedback.html | 25 +++++++++++++++----------
 tailwind.config.js             |  3 ++-
 6 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 9b008e608b..49e80c51eb 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -72,10 +72,15 @@
 
 .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"] *)) {
+.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 {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
@@ -398,10 +403,6 @@ select {
   color: inherit;
 }
 
-.page-feedback {
-  @apply flex flex-col mx-12;
-}
-
 .feedback-submit {
   @apply grid gap-2;
 }
@@ -599,16 +600,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;
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b24a9537eb..b12f608d65 100644
--- a/layouts/_default/baseof.html
+++ b/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">
diff --git a/layouts/develop/list.html b/layouts/develop/list.html
index 86c4f6b419..ed555c16d7 100644
--- a/layouts/develop/list.html
+++ b/layouts/develop/list.html
@@ -7,11 +7,8 @@
     {{ partial "docs-nav.html" . }}
     <div class="w-full py-12">
       {{ partial "breadcrumbs" . }}
-      <section class="prose prose-slate w-full 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>
 
diff --git a/layouts/develop/single.html b/layouts/develop/single.html
index eddd06bdca..1d15f780b1 100644
--- a/layouts/develop/single.html
+++ b/layouts/develop/single.html
@@ -7,11 +7,8 @@
     {{ partial "docs-nav.html" . }}
     <div class="w-full py-12">
       {{ partial "breadcrumbs" . }}
-      <section class="prose prose-slate w-full 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 }}
         
diff --git a/layouts/partials/feedback.html b/layouts/partials/feedback.html
index b2ef96b3a4..53757c6457 100644
--- a/layouts/partials/feedback.html
+++ b/layouts/partials/feedback.html
@@ -1,14 +1,19 @@
   {{/*  Star rating adapted from https://codepen.io/chris22smith/pen/MJzLJN  */}}
-  <form name="page-feedback" method="POST" data-netlify="true" class="page-feedback">
-    <input name="origin" value="{{ .Permalink }}" class="hidden"/>
-  <div class="grid justify-center mt-10 pt-10 border-t-2">
-    <span class="font-bold font-small">Rate this page</span>
-    <div class="star-rating">
-      {{ range $num := (seq 5 1) }}
-      <input type="radio" id="{{ $num }}-stars" name="rating" value="{{ $num }}" onchange="document.querySelector('#feedback-form').classList.remove('hidden')"/>
-      <label for="{{ $num }}-stars" class="star">&#9733;</label>
-      {{ end }}
+<form name="page-feedback" method="POST" data-netlify="true" class="w-full mt-24 pt-5 border-t border-t-redis-pen-700 border-opacity-50">
+  <input name="origin" value="{{ .Permalink }}" class="hidden"/>
+  <div class="flex flex-row justify-between">
+    <div class="grid justify-center">
+      <span class="font-medium text-lg">Rate this page</span>
+      <div class="star-rating">
+        {{ range $num := (seq 5 1) }}
+        <input type="radio" id="{{ $num }}-stars" name="rating" value="{{ $num }}" onchange="document.querySelector('#feedback-form').classList.remove('hidden')"/>
+        <label for="{{ $num }}-stars" class="star">&#9733;</label>
+        {{ end }}
+      </div>
     </div>  
+    <a href="#" class="font-mono text-sm mt-1">
+      Back to top ↑
+    </a>
   </div>
   <div id="feedback-form" class="hidden">
     <div class="feedback-submit">
@@ -18,7 +23,7 @@
         class="border border-neutral-500 p-2 mt-1 block w-full h-24"
         rows="3"
       ></textarea>
-      <button class="button button-indigo w-min justify-self-end" type="submit">
+      <button class="font-mono button text-redis-ink-900 border border-solid border-transparent bg-redis-red-500 hover:bg-redis-red-600 focus:bg-red-600 focus:ring-red-600; w-min justify-self-end" type="submit">
         Submit
       </button>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index c76cd5fe6e..2607a1d346 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,7 +15,8 @@ module.exports = {
 					700: '#161F31',
 					},
 				'redis-red': {
-					500: '#FF4438'
+					500: '#FF4438',
+					600: '#D52D1F'
 				},
 				'redis-indigo': {
 					500: '#5961ff',

From e2b9701bef25851840f19383da20d559c69a6951 Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Tue, 23 Jan 2024 15:18:38 -0500
Subject: [PATCH 08/11] Fix underline

---
 layouts/partials/feedback.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/feedback.html b/layouts/partials/feedback.html
index 53757c6457..c0c746108a 100644
--- a/layouts/partials/feedback.html
+++ b/layouts/partials/feedback.html
@@ -11,7 +11,7 @@
         {{ end }}
       </div>
     </div>  
-    <a href="#" class="font-mono text-sm mt-1">
+    <a href="#" class="font-mono text-sm mt-1 no-underline">
       Back to top ↑
     </a>
   </div>

From 85c204f817e8e2e7636d9c6050aee593b8ff32f8 Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Wed, 24 Jan 2024 10:46:35 -0500
Subject: [PATCH 09/11] Made docs nav more responsive, looks as expected for
 mobile

---
 assets/icons/chevron.svg            |  3 +++
 layouts/develop/single.html         |  4 ++--
 layouts/partials/docs-nav.html      | 12 ++++++------
 layouts/partials/icons/chevron.html |  4 ++++
 4 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 assets/icons/chevron.svg
 create mode 100644 layouts/partials/icons/chevron.html

diff --git a/assets/icons/chevron.svg b/assets/icons/chevron.svg
new file mode 100644
index 0000000000..9c6e9fc10f
--- /dev/null
+++ b/assets/icons/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 6L0.646484 1.35359L1.35359 0.646484L6.00004 5.29293L10.6465 0.646484L11.3536 1.35359L6.70718 6H5.29289Z" fill="currentColor"/>
+</svg>
diff --git a/layouts/develop/single.html b/layouts/develop/single.html
index 1d15f780b1..9127affad0 100644
--- a/layouts/develop/single.html
+++ b/layouts/develop/single.html
@@ -3,9 +3,9 @@
 {{ end }}
 
 {{ define "main" }}
-  <main class="docs w-full max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-11 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 py-12">
+    <div class="w-full pb-12 md:py-12">
       {{ partial "breadcrumbs" . }}
       <section class="prose w-full py-12">
         <h1>
diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 05d6d625d4..6c16680dda 100644
--- a/layouts/partials/docs-nav.html
+++ b/layouts/partials/docs-nav.html
@@ -67,18 +67,18 @@
   {{- end }}
 {{- end }}
 
-<div class="hidden md:block w-64 h-full shrink-0 text-sm font-mono font-normal">
-  <nav class="w-64 z-40 bg-white hidden md:block fixed -ml-6 py-6 h-full max-h-[calc(100vh-7rem-14rem)] leading-7">
+<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 -}}
     <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 border-b border-opacity-50 border-b-redis-ink-900 font-medium"><a href="{{ $navRoot.RelPermalink }}">{{ $navRoot.LinkTitle }}</a></div>
-      <ul class=" overflow-y-auto grow  pr-6">
+      <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="w-full py-7 border-t border-opacity-50 border-t-redis-ink-900"></div>
-  </div>
+      <div class="hidden md:block w-full py-7"></div>
+    </div>
   </nav>
 </div>
\ No newline at end of file
diff --git a/layouts/partials/icons/chevron.html b/layouts/partials/icons/chevron.html
new file mode 100644
index 0000000000..0860f30967
--- /dev/null
+++ b/layouts/partials/icons/chevron.html
@@ -0,0 +1,4 @@
+<svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 6L0.646484 1.35359L1.35359 0.646484L6.00004 5.29293L10.6465 0.646484L11.3536 1.35359L6.70718 6H5.29289Z" fill="currentColor"/>
+</svg>
+  
\ No newline at end of file

From 3645c7343e00f2a676d3e690f1f09b226398019b Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Wed, 24 Jan 2024 11:52:23 -0500
Subject: [PATCH 10/11] Tip changed to match Figma

---
 layouts/shortcodes/alert.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html
index b0cef3fd5b..fd48f50d57 100644
--- a/layouts/shortcodes/alert.html
+++ b/layouts/shortcodes/alert.html
@@ -1,6 +1,8 @@
-<div class="pl-4 border-l-8">
-{{ with .Get "title" }}
-<div class="font-semibold text-slate-900">{{ . | safeHTML }}</div>
-{{ end }}
-{{- .Inner -}}
+<div class="relative pl-9 text-sm before:content-[''] before:absolute before:left-0 before:top-1.5 before:w-2 before:h-2 before:rounded before:bg-black">
+  <div>
+  {{ with .Get "title" }}
+  <div class="font-medium">{{ . | safeHTML }}</div>
+  {{ end }}
+  {{- .Inner -}}
+  </div>
 </div>
\ No newline at end of file

From 2677ede2034ab12753f17d302cdbff27f23cdda7 Mon Sep 17 00:00:00 2001
From: IsItGreg <gsmelkov@gmail.com>
Date: Wed, 24 Jan 2024 15:03:51 -0500
Subject: [PATCH 11/11] Feedback updates

---
 assets/css/index.css           | 23 ++++++++++++++++-------
 layouts/partials/feedback.html | 10 +++++-----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index 49e80c51eb..b98799bbcf 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -403,10 +403,6 @@ select {
   color: inherit;
 }
 
-.feedback-submit {
-  @apply grid gap-2;
-}
-
 .star-rating {
   @apply flex flex-row-reverse justify-around text-center text-xl items-center; 
 }
@@ -416,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 {
diff --git a/layouts/partials/feedback.html b/layouts/partials/feedback.html
index c0c746108a..be39d05716 100644
--- a/layouts/partials/feedback.html
+++ b/layouts/partials/feedback.html
@@ -1,9 +1,9 @@
   {{/*  Star rating adapted from https://codepen.io/chris22smith/pen/MJzLJN  */}}
-<form name="page-feedback" method="POST" data-netlify="true" class="w-full mt-24 pt-5 border-t border-t-redis-pen-700 border-opacity-50">
+<form name="page-feedback" method="POST" data-netlify="true" class="text-sm w-full mt-24 pt-5 border-t border-t-redis-pen-700 border-opacity-50">
   <input name="origin" value="{{ .Permalink }}" class="hidden"/>
   <div class="flex flex-row justify-between">
     <div class="grid justify-center">
-      <span class="font-medium text-lg">Rate this page</span>
+      <span class="font-mono">RATE THIS PAGE</span>
       <div class="star-rating">
         {{ range $num := (seq 5 1) }}
         <input type="radio" id="{{ $num }}-stars" name="rating" value="{{ $num }}" onchange="document.querySelector('#feedback-form').classList.remove('hidden')"/>
@@ -11,16 +11,16 @@
         {{ end }}
       </div>
     </div>  
-    <a href="#" class="font-mono text-sm mt-1 no-underline">
+    <a href="#" class="font-mono no-underline">
       Back to top ↑
     </a>
   </div>
   <div id="feedback-form" class="hidden">
-    <div class="feedback-submit">
+    <div class="grid gap-2">
       <textarea
         name="comment"
         placeholder="Why did you choose this rating?"
-        class="border border-neutral-500 p-2 mt-1 block w-full h-24"
+        class=" p-2 mt-1 block w-full h-24 border border-opacity-50 border-redis-ink-900 rounded-md"
         rows="3"
       ></textarea>
       <button class="font-mono button text-redis-ink-900 border border-solid border-transparent bg-redis-red-500 hover:bg-redis-red-600 focus:bg-red-600 focus:ring-red-600; w-min justify-self-end" type="submit">