Merge pull request #4393 from platformsh/4389-docs-improvments---css

Kemi-Elizabeth · web-flow · commit 6b2cd8ebea24 · 2025-02-14T13:52:31.000Z
4389 docs improvments css
diff --git a/sites/upsun/static/scripts/xss/src/containers/Search.js b/sites/upsun/static/scripts/xss/src/containers/Search.js
@@ -131,9 +131,9 @@ const Search = ({ fullPage }) => {
           <input
             id={`searchwicon-${fullPage ? 'fullpage' : 'header'}`}
             value={query}
-            placeholder="What are you looking for?"
+            placeholder="Can we help you find something?"
             onChange={handleInputChange}
-            className={`bg-no-repeat bg-[length:15px_15px] bg-left-4 h-16 w-full pl-12 text-slate border-none focus-visible:outline-none ${fullPage ? 'bg-grey' : ''}`}
+            className={`bg-no-repeat bg-[length:15px_15px] bg-left-4 h-16 w-full pl-12 text-slate rounded border-none focus-visible:outline-none ${fullPage ? 'bg-grey' : ''}`}
             style={{ 'background-image': 'url(/images/svg/search-solid.svg)' }}
             autoComplete="off"
           />
diff --git a/themes/psh-docs/layouts/_default/_markup/render-codeblock.html b/themes/psh-docs/layouts/_default/_markup/render-codeblock.html
@@ -10,6 +10,7 @@
 {{ $configFiles := .Page.Site.Params.vendor.config.files }}
 {{ $configDir := .Page.Site.Params.vendor.config.dir }}
 
+<div class="relative">
 {{ with $location }}
     {{ $fullFile := . }}
     {{ $prefixLen := len $prefixdir }}
@@ -18,15 +19,21 @@
     {{ else if gt $prefixLen 0 }}
         {{ $fullFile = delimit ( slice $prefixdir . ) "/" }}
     {{ end }}
-<div class="bg-stone px-4 pt-2 rounded-t-lg inline-block text-base pb-1">{{ $fullFile }}</div>
+<div class="bg-stone px-4 pt-2 rounded-t-lg inline-block text-base relative">
+    <span class="relative z-10">{{ $fullFile }}</span>
+    <div class="absolute bottom-[-0.5rem] left-0 w-full h-4 bg-stone"></div>
+</div>
 {{ end }}
 {{ with $configFile }}
     {{ $fullFile := index $configFiles . }}
     {{ $prefixLen := len $prefixdir }}
     {{ if gt $prefixLen 0 }}
         {{ $fullFile = delimit ( slice $prefixdir (index $configFiles .) ) "/" }}
     {{ end }}
-<div class="bg-stone px-4 pt-2 rounded-t-lg inline-block text-base pb-1">{{ $fullFile }}</div>
+<div class="bg-stone px-4 pt-2 rounded-t-lg inline-block text-base relative">
+    <span class="relative z-10">{{ $fullFile }}</span>
+    <div class="absolute bottom-[-0.5rem] left-0 w-full h-4 bg-stone"></div>
+</div>
 {{ end }}
 {{ if transform.CanHighlight $lang }}
 {{ $content := .Inner | safeHTML }}
@@ -45,5 +52,6 @@
 {{ else }}
 <pre><code>{{ .Inner }}</code></pre>
 {{ end }}
+</div>
 
 {{ end }}
diff --git a/themes/psh-docs/layouts/_default/baseof.html b/themes/psh-docs/layouts/_default/baseof.html
@@ -39,7 +39,7 @@
       {{ partial "sidebar/sidebar" . }}
 
       <!-- Main content block -->
-      <main class="md:col-span-8 xl:max-w-[120ch] xl:text-lg px-4 md:px-8 pt-4 pb-12 print:border-none print:max-w-full xl:print:max-w-full print:text-sm xl:print:text-sm">
+      <main class="md:col-span-8 xl:max-w-[120ch] xl:text-lg px-4 md:pr-0 md:pl-8 pt-4 pb-12 print:border-none print:max-w-full xl:print:max-w-full print:text-sm xl:print:text-sm">
                 
         {{- block "main" . }}{{- end }}
       </main>
diff --git a/themes/psh-docs/layouts/partials/editpagebutton.html b/themes/psh-docs/layouts/partials/editpagebutton.html
@@ -1,7 +1,11 @@
 <!-- Edit page button link -->
-<div class="mb-6">
+<div class="hidden md:block mb-6 mr-2 text-right">
   {{ $editLocation := printf "%sedit/main/%s/src/%s" site.Params.repo site.Params.folder .File.Path }}
-  <a href="{{ $editLocation }}" rel="noopener" class="print:hidden text-sm {{ partial "pink-button-styles" }}">
-    Edit page <img class="inline" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+  <a href="{{ $editLocation }}" rel="noopener" class="print:hidden font-semibold bg-gray-400 text-white hover:bg-ebony focus:bg-ebony pl-4 pr-3 py-2 font-['Space_Grotesk'] text-xs rounded-full inline-flex items-center gap-2">
+    
+    Edit page<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline">
+      <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
+      <path d="m15 5 4 4"/>
+    </svg>
   </a>
 </div>
diff --git a/themes/psh-docs/layouts/partials/feedback/form.html b/themes/psh-docs/layouts/partials/feedback/form.html
@@ -1,11 +1,15 @@
 <div class="p-4" x-data="FeedbackForm()">
   <h3 class="pt-4 pb-2 font-light">Is this page helpful?</h3>
   <div class="text-sm">
-    <button x-show="!feedbackSubmitted" @click="handleClick" title="Yes" class="py-4 px-4 hover:bg-skye-light text-xl">
-      👍️
+    <button x-show="!feedbackSubmitted" @click="handleClick" title="Yes" class="py-2 px-4 hover:bg-skye-light text-xl">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
+      </svg>
     </button>
-    <button x-show="!feedbackSubmitted" @click="handleClick" title="No" class="py-4 px-4 hover:bg-skye-light text-xl">
-      👎️
+    <button x-show="!feedbackSubmitted" @click="handleClick" title="No" class="py-2 px-4 hover:bg-skye-light text-xl">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"/>
+      </svg>
     </button>
     <div
       x-show="feedbackSubmitted && feedback === 'positive'"
@@ -48,7 +52,9 @@ <h3 class="pt-4 pb-2 font-light">Is this page helpful?</h3>
         "&title=%F0%9F%90%9B%20Issue%20on%20the%20page%20" +
         document.title.replace({{ printf " · %s Documentation" .Site.Params.vendor.name }}, ""),
       handleClick(event) {
-        const title = event.target.getAttribute("title");
+        // Get the closest button element from the click target
+        const button = event.target.closest('button');
+        const title = button ? button.getAttribute("title") : null;
 
         if (title === "Yes") this.feedback = "positive";
         else if (title === "No") this.feedback = "negative";
diff --git a/themes/psh-docs/layouts/partials/note.html b/themes/psh-docs/layouts/partials/note.html
@@ -13,7 +13,7 @@
     {{- $bg = "skye-light" -}}
   {{- end -}}
 {{- end -}}
-<div class="bg-{{ $bg }} p-4 mb-4 [&>p:last-child]:mb-0 [&>h3]:mt-0" role="alert" {{if eq .theme "info-sticky"}}style="position: sticky; top: 6rem;"{{ end }}>
+<div class="bg-{{ $bg }} p-4 mb-4 [&>p:last-child]:mb-0 [&>h3]:mt-0 rounded-lg" role="alert" {{if eq .theme "info-sticky"}}style="position: sticky; top: 6rem;"{{ end }}>
   {{- if ne $title "none" -}}
   <h3 class="font-bold text-base">{{ $title }}</h3>
   {{- end -}}
diff --git a/themes/psh-docs/layouts/partials/page-content.html b/themes/psh-docs/layouts/partials/page-content.html
@@ -27,12 +27,12 @@
 <h1 class="font-black text-2xl mb-8 xl:text-4xl">{{ .context.Title | .context.RenderString }}</h1>
 {{ end }}
 
-<div class="grid md:grid-cols-80-20 md:gap-4 print:block">
+<div class="grid md:grid-cols-[minmax(0,1fr),270px] md:gap-4 md:pr-4 print:block">
 
-  <div class="print:hidden max-w-[92vw] md:max-w-none md:order-2 md:top-24 md:sticky md:max-h-fullv md:overflow-y-auto border-t border-stone">
+  <div class="print:hidden max-w-[92vw] md:max-w-none md:order-2 md:top-24 md:sticky md:h-[calc(100vh-6rem)] md:overflow-y-auto border-t border-stone">
     <!-- Table of contents -->
     {{ if and (ne .context.Params.toc false) (ne .context.TableOfContents "<nav id=\"TableOfContents\"></nav>") }}
-      <div class="border border-stone border-t-0 px-6 pt-1 pb-4 mb-8 md:mb-0 text-sm [&_a]:text-skye-dark hover:[&_a]:underline focus:[&_a]:underline [&_ul_ul]:pl-4">
+      <div class="border border-stone border-t-0 px-6 pt-1 pb-4 mb-8 md:mb-0 text-sm [&_a]:text-skye-dark hover:[&_a]:underline focus:[&_a]:underline [&_ul_ul]:pl-4 [&_nav_ul>li]:mb-2 [&_nav_ul_ul>li]:mt-2">
 
         {{ if not .context.Page.IsHome }}
         <h3 class="pt-4 pb-2 font-light text-base text-slate"><a href="/">Back to home</a></h3>
@@ -57,7 +57,7 @@ <h3 class="pt-4 pb-2 font-light text-base text-slate">On this page</h3>
       {{ end }}
 
     <div
-      class="bg-gradient-to-b from-[#FF4A11] from-0% via-[#ED49F0] via-45% to-[#DDF933] to-100% rounded-2xl p-[1px] my-1">
+      class="bg-gradient-to-b from-[#FF4A11] from-0% via-[#ED49F0] via-45% to-[#DDF933] to-100% rounded-2xl p-[1px] mt-1 mb-4">
       <div class="rounded-2xl p-5 bg-[#f9f9f9] flex-col justify-start items-start gap-4 inline-flex">
         {{ $recruitment := .context.Site.Params.vendor.recruit }}
         {{ $vendorName := .context.Site.Params.vendor.name }}
@@ -89,21 +89,22 @@ <h3 class="pt-4 pb-2 font-light text-base text-slate">On this page</h3>
             <div class="cta-body">
               {{ index $recruitment "description"}}
             </div>
-            <div class="cta-terms">
-              {{ index $recruitment "fine" }}
-            </div>
+            
           </div>
         </div>
         <a href="{{ index $recruitment "link" }}" class="px-6 py-2 bg-[#6046FF] hover:!bg-[#4D38CC] rounded-3xl text-white text-center text-sm font-semibold">
           {{ index $recruitment "cta" }}
         </a>
+        <div class="cta-terms">
+          {{ index $recruitment "fine" }}
+        </div>
       </div>
     </div>
     {{ end }}
 
   </div>
 
-  <div class="prose xl:prose-lg max-w-[96vw] md:max-w-none prose-code:!mb-0 prose-h2:text-xl prose-h3:text-xl prose-h4:text-lg">
+  <div class="prose xl:prose-lg max-w-[96vw] md:max-w-full w-full prose-code:!mb-0 prose-h2:text-xl prose-h3:text-xl prose-h4:text-lg">
     <!-- Add the stack picker for Get started section -->
     {{ if and ( eq .context.Section "get-started" ) ( ne .context.Title "Introduction" ) }}
       {{ if eq $.Site.Params.vendor.name "Platform.sh" }}
@@ -116,12 +117,18 @@ <h3 class="pt-4 pb-2 font-light text-base text-slate">On this page</h3>
 
     <!-- If the page is a list page, add section cards -->
     {{ if .isList }}
-      {{ range .context.Pages }}
-        <button onclick="location.href = '{{ .RelPermalink }}';" class="block text-left mb-7 p-8 text-primary-darker border-l-4 border-skye-dark hover:no-underline bg-stone hover:bg-skye-dark hover:text-white focus:bg-skye-dark focus:text-white hover:cursor-pointer [&:hover_a]:text-snow [&:focus_a]:text-snow [&:hover_a]:font-extrabold [&:focus_a]:font-extrabold">
-          <span class="block font-bold mb-4">{{ if isset .Params "sidebartitle" }}{{ .Params.sidebarTitle | .RenderString }}{{ else }}{{ .Title | .RenderString }}{{ end }}</span>
-          <span class="block">{{ .Params.description | .RenderString }}</span>
-        </button>
-      {{ end }}
+      <div class="space-y-4 not-prose">
+        {{ range .context.Pages }}
+          <a href="{{ .RelPermalink }}" class="block p-[2px] bg-stone hover:bg-skye-dark rounded-xl transition-all">
+            <div class="p-8 bg-white rounded-xl h-full hover:shadow-lg">
+              <h3 class="text-xl font-medium mb-2 text-gray-900">
+                {{ if isset .Params "sidebartitle" }}{{ .Params.sidebarTitle | .RenderString }}{{ else }}{{ .Title | .RenderString }}{{ end }}
+              </h3>
+              <p class="text-gray-600 m-0">{{ .Params.description | .RenderString }}</p>
+            </div>
+          </a>
+        {{ end }}
+      </div>
     {{ end }}
 
     {{ if .context.Params.related }}
diff --git a/themes/psh-docs/layouts/shortcodes/guide-buttons.html b/themes/psh-docs/layouts/shortcodes/guide-buttons.html
@@ -36,30 +36,30 @@
 
   {{ if $prevLink }}
   <!-- Back button -->
-  <a href="{{ ref . $prevLink }}" type="button" class="p-2 text-ebony hover:no-underline font-mono">
-    <img class="inline rotate-180" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+  <a href="{{ ref . $prevLink }}" type="button" class="font-semibold text-sm xl:text-base pr-4 pl-2 py-2 rounded-full text-white hover:bg-skye-light focus:bg-skye-light">
+    <svg class="inline rotate-90" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">{{ readFile "layouts/shortcodes/icon-paths/chevron.html" | safeHTML }}</svg>
     {{ if $previous }}{{ $previous }}{{ else }}{{ .Page.NextInSection.LinkTitle }}{{ end }}
   </a>
   {{ else if or (.Page.NextInSection) ($previous) }}
     <!-- Back button -->
-    <a href="{{ if .Page.NextInSection }}{{ .Page.NextInSection.RelPermalink }}{{ else }}{{ .Page.CurrentSection.RelPermalink }}{{ end }}" type="button" class="p-2 text-ebony hover:no-underline font-mono">
-      <img class="inline rotate-180" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+    <a href="{{ if .Page.NextInSection }}{{ .Page.NextInSection.RelPermalink }}{{ else }}{{ .Page.CurrentSection.RelPermalink }}{{ end }}" type="button" class="font-semibold text-sm xl:text-base pr-4 pl-2 py-2 rounded-full text-white hover:bg-skye-light focus:bg-skye-light">
+      <svg class="inline rotate-90" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">{{ readFile "layouts/shortcodes/icon-paths/chevron.html" | safeHTML }}</svg>
       {{ if $previous }}{{ $previous }}{{ else }}{{ .Page.NextInSection.LinkTitle }}{{ end }}
     </a>
   {{ end }}
 
   {{ if $nextLink }}
     <!-- Next button -->
-    <a href="{{ ref . $nextLink }}" type="button" class="{{ partial "pink-button-styles" }}">
+    <a href="{{ ref . $nextLink }}" class="font-semibold text-sm xl:text-base pl-4 pr-2 py-2 bg-[#6046FF] hover:!bg-[#4D38CC] rounded-full !text-white hover:!text-white inline-flex items-center gap-2">
       {{ if $next }}{{ $next }}{{ else }}{{ .Page.PrevInSection.LinkTitle }}{{ end }}
-    <img class="inline" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+      <svg class="inline -rotate-90" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">{{ readFile "layouts/shortcodes/icon-paths/chevron.html" | safeHTML }}</svg>
     </a>
 
   {{ else if .Page.PrevInSection }}
     <!-- Next button -->
-    <a href="{{ if .Page.PrevInSection }}{{ .Page.PrevInSection.RelPermalink }}{{ else }}{{ .Page.CurrentSection.RelPermalink }}{{ end }}" type="button" class="{{ partial "pink-button-styles" }}">
+    <a href="{{ if .Page.PrevInSection }}{{ .Page.PrevInSection.RelPermalink }}{{ else }}{{ .Page.CurrentSection.RelPermalink }}{{ end }}" class="font-semibold text-sm xl:text-base pl-4 pr-2 py-2 bg-[#6046FF] hover:!bg-[#4D38CC] rounded-full !text-white hover:!text-white inline-flex items-center gap-2">
       {{ if $next }}{{ $next }}{{ else }}{{ .Page.PrevInSection.LinkTitle }}{{ end }}
-      <img class="inline" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+      <svg class="inline -rotate-90" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">{{ readFile "layouts/shortcodes/icon-paths/chevron.html" | safeHTML }}</svg>
     </a>
   {{ end }}
 
@@ -68,8 +68,8 @@
 
   <!-- Only contains a back button -->
   {{ if eq $navType "last" }}
-  <a href="{{ if .Page.NextInSection }}{{ .Page.NextInSection.RelPermalink }}{{ else }}{{ .Page.CurrentSection.RelPermalink }}{{ end }}" type="button" class="p-2 text-ebony hover:no-underline font-mono">
-    <img class="inline rotate-180" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+  <a href="{{ if .Page.NextInSection }}{{ .Page.NextInSection.RelPermalink }}{{ else }}{{ .Page.CurrentSection.RelPermalink }}{{ end }}" type="button" class="font-semibold text-sm xl:text-base px-4 py-2 rounded text-white hover:bg-skye-light focus:bg-skye-light">
+    <svg class="inline rotate-90" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">{{ readFile "layouts/shortcodes/icon-paths/chevron.html" | safeHTML }}</svg>
     Back
   </a>
 
@@ -83,9 +83,9 @@
           {{ $loop = 1}}
         {{ end }}
       {{ end }}
-      <a href="{{ $firstPageInSection.RelPermalink }}" type="button" class="{{ partial "pink-button-styles" }}">
+      <a href="{{ $firstPageInSection.RelPermalink }}" class="font-semibold text-sm xl:text-base px-4 py-2 bg-skye rounded !text-white hover:!text-white hover:!bg-skye-dark focus:!bg-skye-dark inline-flex items-center gap-2">
         {{ with .Get "next" }}{{ . | $pageContext.RenderString }}{{ end }}
-        <img class="inline" aria-hidden="true" alt="" src="/images/icons/chevrons.svg" />
+        <svg class="inline -rotate-90" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">{{ readFile "layouts/shortcodes/icon-paths/chevron.html" | safeHTML }}</svg>
       </a>
   {{ end }}
 
