update website's prod

.gitignore

@@ -6,4 +6,7 @@ resources/
 # Link checker
 bin/
 tmp/
-.idea
+.idea
+
+# File generated when running npm install 
+package-lock.json

README.md

@@ -6,7 +6,9 @@ This repo houses the assets used to build the website at https://vitess.io.
 
 ## Running the site locally
 
-To run the website locally, you need to have the [Hugo](https://gohugo.io) static site generator installed (installation instructions [here](https://gohugo.io/getting-started/installing/)). Once Hugo is installed run the following:
+To run the website locally, you need to have the [Hugo](https://gohugo.io) static site generator installed (installation instructions [here](https://gohugo.io/getting-started/installing/)). Installing the Hugo version in [netlify.toml](./netlify.toml) is recommended.
+
+Once Hugo is installed run the following:
 
 ```bash
 hugo server --buildDrafts --buildFuture

assets/sass/docs.sass

@@ -1,5 +1,4 @@
 $docs-sidebar-logo-width: 30%
-$docs-sidebar-margin: 1.75rem
 $docs-sidebar-header-margin-bottom: 2rem
 $tan: #f5993a
 
@@ -12,156 +11,156 @@ html, body
 =h-center
   justify-content: center
 
+// Bit of a hacky full-width container override for the docs page,
+// since bulma.io doesn't appear to have a helper for this.
+.navbar-container-docs
+  max-width: 100%
+  padding: 0 8px 0 24px
+
 .docs-wrapper
   +flex
   flex-direction: row
-  height: 100vh
+  height: calc(100vh - #{$navbar-height})
   align-items: stretch
 
-  .docs-navbar
-    position: sticky
-    top: 0
+.docs-navbar
+  position: sticky
+  top: 0
 
-  .docs-sidebar
-    +flex
-    +h-center
-    background-color: $dark
-    flex: 0 0 15%
-    border-right: 1px solid lighten($dark, 10%)
-    overflow: scroll
+.docs-sidebar
+  +flex
+  +h-center
+  background-color: $dark
+  flex: 0 0 15%
+  border-right: 1px solid lighten($dark, 10%)
+  overflow: auto
 
-    .docs-menu
-      width: 100%
-      margin: $docs-sidebar-margin
+.docs-menu
+  width: 100%
+  margin: 24px 0 24px 0
 
-      .docs-menu-header
-        margin-bottom: $docs-sidebar-header-margin-bottom
+.docs-menu-header
+  margin-bottom: $docs-sidebar-header-margin-bottom
 
-        .docs-menu-logo
-          width: $docs-sidebar-logo-width
-          margin: 0 auto
-          display: block
+.docs-menu-logo
+    margin: 0 auto
+    display: block
 
-      .docs-menu-bar
-        padding-bottom: 5rem
+.docs-menu > .docs-navlist > li > a
+  font-size: 1.2rem
 
-        .docs-section
-          & + .docs-section
-            margin-top: .75rem
+.docs-navlist ul > li
+  border-left: solid 1px rgba(255, 255, 255, 0.1)
+  margin-left: 16px
 
-          .docs-section-title
-            font-size: 1.2rem
-            color: $grey-lighter
-            line-height: 100%
+.docs-navlist li
+  position: relative
 
-            &.is-active
-              color: $primary
+.docs-navlist li a
+  color: $grey-lighter
+  display: block
+  font-size: 0.9rem
+  padding: 8px 24px 8px 16px
 
-          .docs-section-list
-            margin-left: .3rem
-            border-left: 1px solid $grey
+  &:hover
+    background: rgba(255, 255, 255, 0.05)
 
-            ul
-              margin-top: .75rem
+.docs-navlist li.active > a 
+  color: $tan
 
-              li
-                font-size: 1rem
-                margin-left: 1rem
-                line-height: 120%
+.navlist-caret
+  height: 10px
+  margin-top: -5px
+  position: absolute
+  right: 16px
+  top: 22px
+  fill: rgba(255, 255, 255, 0.25)
 
-                a
-                  color: $grey-lighter
+li.expanded > a > .navlist-caret
+  transform: rotate(90deg)
 
-                & + li
-                  margin-top: .8rem
+.docs-article
+  flex: 1 1 auto
+  overflow: auto
 
-                &.is-active
-                  a
-                    color: $tan
+  .docs-content
+    margin: 2rem 2.5rem
 
-  .docs-article
-    flex: 1 1 auto
-    overflow: auto
+    +touch
+      margin: 1.5rem
 
-    .docs-content
-      margin: 2rem 2.5rem
+    padding-bottom: 5rem
 
-      +touch
-        margin: 1.5rem
+    .content
+      +desktop
+        width: 80%
 
-      padding-bottom: 5rem
+      p a, li a
+        font-weight: 700
 
-      .content
-        +desktop
-          width: 80%
+      li .highlight, ol li
+        margin-bottom: 1rem
 
-        p a, li a
-          font-weight: 700
+      h1
+        font-size: 1.802rem
+      h2
+        font-size: 1.602rem
+      h3
+        font-size: 1.424rem
+      h4
+        font-size: 1.266rem
+      h5
+        font-size: 1.125rem
+      h2, h3, h4, h5, h6
+        color: $vitess-orange
 
-        li .highlight, ol li
-          margin-bottom: 1rem
+    .docs-header
+      padding-bottom: 1rem
+      margin-bottom: 2rem
 
-        h1
-          font-size: 1.802rem
-        h2
-          font-size: 1.602rem
-        h3
-          font-size: 1.424rem
-        h4
-          font-size: 1.266rem
-        h5
-          font-size: 1.125rem
-        h2, h3, h4, h5, h6
-          color: $vitess-orange
+    .card-content
+      padding: 0 0 1.5rem 0
 
-      .docs-header
-        padding-bottom: 1rem
-        margin-bottom: 2rem
-        border-bottom: 1px solid $grey-lighter
+.docs-toc
+  flex: 0 0 15%
+  background-color: $white-bis
+  overflow: auto
+  border-left: 1px solid $grey-light
 
-      .card-content
-        padding: 0 0 1.5rem 0
+  &-container
+    margin: 1rem
 
-  .docs-toc
-    flex: 0 0 15%
-    background-color: $white-bis
-    overflow: auto
-    border-left: 1px solid $grey-light
+  &-title
+    color: $dark
+    font-size: 1.25rem
 
-    &-container
-      margin: 1rem
+  &-menu
+    margin: 1.5rem 0
 
-    &-title
+    a
       color: $dark
-      font-size: 1.25rem
-
-    &-menu
-      margin: 1.5rem 0
-
-      a
-        color: $dark
 
-        &:hover
-          color: $primary
+      &:hover
+        color: $primary
 
-      #TableOfContents
-        ul
-          li
-            font-size: 1rem
-            line-height: 1.2rem
+    #TableOfContents
+      ul
+        li
+          font-size: 1rem
+          line-height: 1.2rem
 
-            & + li
-              margin-top: .75rem
+          & + li
+            margin-top: .75rem
 
-            ul
-              margin: .5rem 0 0 1rem
+          ul
+            margin: .5rem 0 0 1rem
 
-              li
-                font-size: 0.8rem
+            li
+              font-size: 0.8rem
 
-                & + li
-                  margin-top: .75rem
-                  line-height: 1.2rem
+              & + li
+                margin-top: .75rem
+                line-height: 1.2rem
 
 
 
@@ -171,4 +170,3 @@ html, body
   margin-left: 30px;
   background-color: #f7f7f7;
   margin-bottom: 10px;
-

assets/sass/style.sass

@@ -53,11 +53,12 @@ figure
 .has-extra-padding
   padding: 2.5rem
 
-.docs-article ul li
+.docs-article .content ul li
   margin-left: -.5rem
   list-style-type: square
 
 .is-blog-container
+  max-width: 100%
   margin: -12rem auto 0 auto
 
   .is-blog-card
@@ -94,6 +95,8 @@ figure
           font-style: normal
           font-weight: 700
 
+.is-blog-container .media-content
+  max-width: 100%
 
 
 .toc-column
@@ -147,8 +150,8 @@ figure
   justify-content: right
 
   .is-user-logo
-    max-height: 1.5rem
-    margin: 1.25rem
+    max-height: 1.7rem
+    margin: 1.1rem
 
 =logo($touch, $tablet)
   +touch
@@ -163,7 +166,7 @@ figure
   +logo(40%, 30%)
 
 .is-cncf-logo
-  +logo(60%, 35%)
+  +logo(55%, 30%)
 
 .is-footer-logo
   +logo(30%, 10%)
@@ -190,3 +193,45 @@ figure
   &.is-active
     position: fixed
 
++until($navbar-breakpoint)
+  #search-bar
+    display: block
+
+  .algolia-autocomplete
+    // Fixes for the DocSearch widget to prevent clipping on mobile.
+    display: block !important
+
+    .ds-dropdown-menu
+      max-width: 100vw !important
+      min-width: fit-content !important
+
++from($navbar-breakpoint)
+	// On mobile (and by default), the search input is displayed at the top of the menu,
+	// whereas on desktop, it's displayed at the right side of the menu bar (i.e., flex-end)
+	.navbar-menu
+		flex-direction: row-reverse
+
+	// Cuddle up the search input + social icons for the full-width navbar  	
+	.navbar-item-search
+		padding-left: 0
+
+.header-link
+  color: $dark
+  opacity: 0.3 
+
+  &:hover
+    opacity: 1
+
+// When jumping to anchor links, we need to account for the height of the sticky navbar.
+// Otherwise, the anchored header will be occluded by the navbar. 
+// See https://css-tricks.com/hash-tag-links-padding/
+$navbar-anchor-offset: calc(#{$navbar-height} + 16px)
+
+h1, h2, h3, h4, h5, h6
+  &.anchored-header[id]:before
+    display: block
+    content: ' '
+    margin-top: calc(-1 * #{$navbar-anchor-offset})
+    height: $navbar-anchor-offset
+    visibility: hidden
+    pointer-events: none