chore(docs): Improve some docs styling

docs/assets/styles/_markdown.scss

@@ -28,7 +28,6 @@ $block-border-radius: 4px;
 
     h1:first-of-type {
         text-transform: capitalize;
-        font-weight: 500;
         margin-top: 0;
         margin-bottom: 0;
         font-size: 2.8em;
@@ -48,6 +47,7 @@ $block-border-radius: 4px;
         margin-top: 60px;
         margin-bottom: 6px;
         font-size: 1.8em;
+        font-weight: 400;
     }
 
     h3 {
@@ -69,7 +69,6 @@ $block-border-radius: 4px;
     h1, h2, h3, h4, h5 {
         font-family: $brand-font-face;
         letter-spacing: -0.025em;
-        font-weight: bold;
         line-height: 1.25;
 
         &[id]:target {
@@ -90,8 +89,8 @@ $block-border-radius: 4px;
         text-decoration: none;
         color: $color-link;
 
-        &:hover {
-            text-decoration: underline;
+        &:hover, &:visited:hover {
+            color: lighten($color-link, 10%);
         }
 
         &:visited {

docs/assets/styles/_menu.scss

@@ -1,89 +1,92 @@
+@import "mixins";
 nav.book-menu {
-  text-transform: capitalize;
+    @include custom-scrollbar;
+    text-transform: capitalize;
 
-  ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
 
-    li {
-      margin: 1em 0;
-    }
+    ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
 
-    a {
-      display: block;
-    }
+        li {
+            margin: 1em 0;
+        }
 
-    a:hover {
-      opacity: .5;
-    }
+        a {
+            display: block;
+        }
 
-    ul {
-      padding-left: $padding-16;
-    }
-  }
-
-  ul:not(.expanded) > .section {
-    &:nth-of-type(7) {
-      &::before {
-        position: absolute;
-        top: 0;
-        left: -1rem;
-        right: .5rem;
-        content: ' ';
-        border-top: 1px solid $gray-400;
-      }
-
-      padding-top: 1em;
-    }
+        a:hover {
+            opacity: 0.5;
+        }
 
-    &:nth-of-type(n+7) {
-      color: $gray-700;
-    }
-  }
-
-  .section {
-    position: relative;
-
-    .section-link {
-      display: flex;
-      align-items: center;
-
-      .section-icon {
-        width: 12px;
-        height: 12px;
-        transform: rotateZ(90deg);
-        opacity: 0.5;
-        margin-left: -15px;
-        margin-right: 3px;
-        cursor: pointer;
-        transition: opacity 0.2s;
-
-        &:hover {
-          opacity: 0.9;
+        ul {
+            padding-left: $padding-16;
         }
+    }
 
-        &.expanded {
-          transform: rotateZ(180deg);
+    ul:not(.expanded) > .section {
+        &:nth-of-type(7) {
+            &::before {
+                position: absolute;
+                top: 0;
+                left: -1rem;
+                right: 0.5rem;
+                content: ' ';
+                border-top: 1px solid $gray-400;
+            }
+
+            padding-top: 1em;
         }
-      }
 
-      a {
-        flex: 1;
-      }
+        &:nth-of-type(n + 7) {
+            color: $gray-700;
+        }
     }
 
-    > ul {
-      max-height: 0px;
-      overflow: hidden;
+    .section {
+        position: relative;
+
+        .section-link {
+            display: flex;
+            align-items: center;
+
+            .section-icon {
+                width: 12px;
+                height: 12px;
+                transform: rotateZ(90deg);
+                opacity: 0.5;
+                margin-left: -15px;
+                margin-right: 3px;
+                cursor: pointer;
+                transition: opacity 0.2s;
+
+                &:hover {
+                    opacity: 0.9;
+                }
+
+                &.expanded {
+                    transform: rotateZ(180deg);
+                }
+            }
+
+            a {
+                flex: 1;
+            }
+        }
+
+        > ul {
+            max-height: 0px;
+            overflow: hidden;
 
-      &.expanded {
-        max-height: initial;
+            &.expanded {
+                max-height: initial;
 
-        > li:last-child {
-          margin-bottom: 0;
+                > li:last-child {
+                    margin-bottom: 0;
+                }
+            }
         }
-      }
     }
-  }
 }

docs/assets/styles/_mixins.scss

@@ -23,3 +23,30 @@
     color: $gray-400;
     text-transform: uppercase;
 }
+
+@mixin custom-scrollbar {
+
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+    &::-webkit-scrollbar-corner {
+        background-color: hsl(0 0% 90%);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: hsl(0 0% 75%);
+        border: 2px solid hsl(0 0% 90%);
+        border-radius: 10px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background-color: hsl(0 0% 65%);
+    }
+    &::-webkit-scrollbar-track {
+        background-color: hsl(0 0% 90%);
+    }
+}

docs/assets/styles/_toc.scss

@@ -1,6 +1,8 @@
 @import "variables";
+@import "mixins";
 
 aside.book-toc nav {
+    @include custom-scrollbar;
     ul {
         padding: 0;
         margin: 0;

docs/assets/styles/_variables.scss

@@ -8,7 +8,7 @@ $font-size-12: 0.75rem;
 $font-size-14: 0.875rem;
 $font-size-16: 1rem;
 
-$brand-font-face: 'Lexend Deca', sans-serif;
+$brand-font-face: 'Inter', sans-serif;
 
 // Grayscale
 $white: #ffffff;

docs/assets/styles/main.scss

@@ -207,10 +207,30 @@ aside nav,
   }
 }
 
-#partner-levels-table {
-  tr:nth-child(even) {
-    th, td {
-      background-color: #f5f5f5;
-    }
-  }
-}
+
+//.custom-scrollbar {
+//
+//    &::-webkit-scrollbar {
+//        width: 10px;
+//        height: 10px;
+//    }
+//
+//    &::-webkit-scrollbar {
+//        width: 10px;
+//        height: 10px;
+//    }
+//    &::-webkit-scrollbar-corner {
+//        background-color: hsl(0 0% 90%);
+//    }
+//    &::-webkit-scrollbar-thumb {
+//        background-color: hsl(0 0% 75%);
+//        border: 2px solid hsl(0 0% 90%);
+//        border-radius: 10px;
+//    }
+//    &::-webkit-scrollbar-thumb:hover {
+//        background-color: hsl(0 0% 65%);
+//    }
+//    &::-webkit-scrollbar-track {
+//        background-color: hsl(0 0% 90%);
+//    }
+//}

docs/layouts/_default/baseof.html

@@ -11,11 +11,11 @@
 <body>
 
 {{ partial "top-bar" (dict "ctx" . "isDocsPage" true "isLandingPage" false) }}
-<main class="mx-auto lg:max-w-screen-xl lg:grid lg:grid-cols-12 lg:gap-8">
+<main class="mx-auto lg:max-w-screen-2xl lg:grid lg:grid-cols-12 lg:gap-8">
 
     <aside class="lg:relative lg:col-span-3" x-data="Components.popover(true)" x-init="open = window.innerWidth > 1024">
-        <div class="sticky top-0 lg:w-72 flex flex-col lg:h-screen">
-            <div class="flex justify-center items-center px-1 py-2 bg-gray-100">
+        <div class="sticky top-0 flex flex-col lg:h-screen">
+            <div class="flex justify-center items-center px-6 py-4 bg-gray-100">
                 <label for="search" class="sr-only">Search docs (ctrl + k)</label>
                 <input type="text" name="search" id="searchInputTrigger"
                        class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"

docs/layouts/_default/list.html

@@ -1,21 +1,12 @@
 {{ define "main" }}
 <article class="markdown">
-    {{ partial "breadcrumbs" . }}
-    {{- .Content -}}
-
-    {{ if gt (len .Pages) 0 }}
+    {{ partial "breadcrumbs" . }} {{- .Content -}} {{ if gt (len .Pages) 0 }}
     <h3>Contents:</h3>
-    <ul class="contents-list">
+    <div class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
         {{ range .Pages.ByParam "title" }}
-        <li>
-            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
-        </li>
+            <a href="{{ .RelPermalink }}" class="border border-blue-100 rounded p-4 bg-blue-50 hover:bg-blue-100 hover:no-underline">{{ .Title }}</a>
         {{ end}}
-    </ul>
+    </div>
     {{ end }}
 </article>
-{{ end }}
-
-{{ define "toc" }}
-{{ partial "docs/toc" . }}
-{{ end }}
+{{ end }} {{ define "toc" }} {{ partial "docs/toc" . }} {{ end }}

docs/layouts/partials/top-bar.html

@@ -1,27 +1,31 @@
-<div class="z-30 transition-colors top-0"
-     :class="{ 'bg-transparent bg-none absolute w-full': isLandingPage, 'bg-white border-b border-dotted border-blue-200': !isLandingPage }"
-     x-data="{ ...Components.popover(false), isLandingPage: {{ default false .isLandingPage }} }">
-
-    <div :class="{ 'hidden': isLandingPage }"
-         class="absolute w-full h-1 bg-gradient-to-r from-blue-300 via-green-300 to-blue-100"></div>
-    {{ partial "announcement-banner" (dict
-        "content" `
-        🚨 Announcing <a href="/blog/2023/04/announcing-vendure-2.0-beta/" class="text-white font-medium underline">Vendure v2 Beta<span aria-hidden="true">&rarr;</span></a>
-        `) }}
-    <div class="max-w-screen-xl mx-auto px-4 py-4 sm:px-6 md:pr-10">
+<div
+    class="z-30 transition-colors top-0"
+    :class="{ 'bg-transparent bg-none absolute w-full': isLandingPage, 'bg-white border-b border-dotted border-blue-200': !isLandingPage }"
+    x-data="{ ...Components.popover(false), isLandingPage: {{ default false .isLandingPage }} }"
+>
+    <div
+        :class="{ 'hidden': isLandingPage }"
+        class="absolute w-full h-1 bg-gradient-to-r from-blue-300 via-green-300 to-blue-100"
+    ></div>
+    {{ partial "announcement-banner" (dict "content" ` 🚨 Announcing
+    <a href="/blog/2023/04/announcing-vendure-2.0-beta/" class="text-white font-medium underline"
+        >Vendure v2 Beta<span aria-hidden="true">&rarr;</span></a
+    >
+    `) }}
+    <div class="max-w-screen-2xl mx-auto px-4 py-4 sm:px-6 md:pr-10">
         <div class="flex justify-between items-center py-2 md:space-x-10">
-
             <div class="flex justify-start lg:w-0 lg:flex-1">
-                {{ if not .isLandingPage }}
-                <a class="logo flex space-x-4" href="/" title="back to landing page">
-                    <img class="w-10" src="/logo.png" alt="Vendure logo"/>
-                    <div class="font-wordmark font-bold text-blue-500 text-3xl mt-0">vendure</div>
+                <a class="logo flex space-x-4 items-center" href="/" title="back to landing page">
+                    <div>
+                        <img class="w-10" src="/logo.png" alt="Vendure logo" />
+                    </div>
+                    <div>
+                        <div class="font-wordmark font-bold text-blue-500 text-3xl mt-0">vendure</div>
+                        <div class="text-gray-500">documentation</div>
+                    </div>
                 </a>
-                {{ end }}
-            </div>
-            <div class="flex text-gray-500">
-                Documentation
             </div>
+            <div class="flex text-gray-500"></div>
         </div>
     </div>
 </div>