make h3 smaller, remove mid-word hyphens, animate landing link arrows, update docsearch index, open first nav-item (#47)

* make h3 smaller

* add landing-a hover animation

* turn off auto hyphens

* include survey on most pages

* open first nav item if there isn't a current page, update search index name

* remove fade from nav animation

* fix weird fade issue on mobile

Author: colegoldsmith

src/css/doc.css

@@ -1,7 +1,7 @@
 .doc {
   color: var(--doc-font-color);
   font-size: var(--doc-font-size);
-  hyphens: auto;
+  /* hyphens: auto; */
   line-height: var(--doc-line-height);
   margin: var(--doc-margin);
   max-width: var(--doc-max-width);

src/css/ds-layout.css

@@ -157,6 +157,12 @@ html[data-theme="dark"] .doc .landing-card-icon {
   position: absolute;
   margin-left: var(--ds-space-h);
   margin-top: calc(4 / var(--rem-base) * -1 * 1rem);
+
+  @apply transition-transform;
+}
+
+.landing-a a:hover::after {
+  transform: translateX(0.5rem);
 }
 
 .landing-support a.support::before,

src/css/ds-typography.css

@@ -14,12 +14,12 @@
 }
 
 @mixin text-h3 {
-  font-size: calc(20 / var(--rem-base) * 1rem);
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
 @mixin text-h4 {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-size: calc(15 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 

src/css/nav.css

@@ -6,7 +6,7 @@
   left: 0;
   width: 100%;
   z-index: var(--z-index-nav);
-  visibility: hidden;
+  display: none;
 
   --transition-duration: 300ms;
 }
@@ -22,12 +22,12 @@
     flex: none;
     position: static;
     top: 0;
-    visibility: visible;
+    display: block;
   }
 }
 
 .nav-container.is-active {
-  visibility: visible;
+  display: block;
 }
 
 .nav {
@@ -100,16 +100,14 @@ html.is-clipped--nav {
 .nav-item > .nav-list {
   transition-duration: var(--transition-duration);
   transition-delay: 0s;
-  transition-timing-function: cubic-bezier(0, 1, 0, 1), ease, linear;
-  transition-property: max-height, opacity, visibility;
+  transition-timing-function: cubic-bezier(0, 1, 0, 1), linear;
+  transition-property: max-height, visibility;
   max-height: 100vh;
-  opacity: 1;
 }
 
 .nav-item:not(.is-active) > .nav-list {
-  transition-delay: 0s, 0s, var(--transition-duration);
+  transition-delay: 0s, var(--transition-duration);
   max-height: 0;
-  opacity: 0;
   visibility: hidden;
   overflow: hidden;
 }

src/js/01-nav.js

@@ -24,6 +24,7 @@
     scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link'))
   } else {
     menuPanel.scrollTop = 0
+    menuPanel.querySelector('.nav-item:first-child').classList.add('is-active')
   }
 
   find(menuPanel, '.nav-item-toggle').forEach(function (btn) {

src/partials/article.hbs

@@ -6,8 +6,8 @@
   {{> tutorial-info}}
   {{/if}}
   {{{page.contents}}}
-  {{#if (eq page.layout 'tutorial')}}
+  {{#unless (eq page.layout 'full')}}
   {{> survey }}
-  {{/if}}
+  {{/unless}}
   {{> pagination}}
 </article>

src/partials/footer-scripts.hbs

@@ -7,7 +7,7 @@
   docsearch({
     container: '#docsearch',
     appId: '2ELPRZR9UC',
-    indexName: 'crawler_DocSearch Astra Serverless',
+    indexName: 'crawler_docsearch-astra',
     {{!-- This is the public API key which can be safely used in frontend code. --}}
     apiKey: '1f4acbf51d118e4137e9a63b38bd8456',
   })