tutorial page adjustments, survey section and spacing for tags (#48)

josuebran · web-flow · commit 13b4d1943afe · 2023-11-10T13:59:35.000-06:00
* tutorial page styling adjustments

* fix survey headers

* spacing for tags
diff --git a/preview-src/vector-home.adoc b/preview-src/vector-home.adoc
@@ -147,18 +147,3 @@ Prioritize the protection of your invaluable data. Explore advanced strategies a
 link:{#}[Learn about Database Security]
 ====
 --
-
-[.ds-row]
-== Community & Support
-
-=== Join the Conversation
-
-Engage with our vibrant community of developers. Ask questions, share knowledge, or just hang out and chat about all things DataStax Astra.
-
-link:{#}[Join on Discord] · link:{#}[Follow on X]
-
-=== Need More Help?
-
-[unstyled.landing-support]
-* link:{#}[Ask the Astra community,role="community"]
-* link:{#}[Get in touch with support,role="support"]
diff --git a/src/css/doc.css b/src/css/doc.css
@@ -660,7 +660,7 @@
 }
 
 .doc ul.checklist {
-  padding-left: var(--ds-space-2h);
+  padding-left: 0;
 }
 
 .doc ul.checklist p {
@@ -685,9 +685,11 @@
 }
 
 .doc ul.checklist i.fa-check-square-o::before {
-  content: "\e876";
-  color: var(--ds-primary-solid-color);
-  background-color: var(--ds-primary-solid-bg);
+  content: "\e86c";
+  color: var(--link-font-color);
+  font-size: var(--ds-space-2h);
+  width: calc(20 / var(--rem-base) * 1rem);
+  height: calc(20 / var(--rem-base) * 1rem);
 }
 
 .doc ul.checklist i.fa-square-o::before {
diff --git a/src/css/toc.css b/src/css/toc.css
@@ -126,7 +126,7 @@
   padding: 0;
   align-items: flex-start;
   align-content: flex-start;
-  gap: var(--ds-space-1h) var(--ds-space-1h);
+  gap: var(--ds-space-1h) var(--ds-space-h);
   align-self: stretch;
   flex-wrap: wrap;
 }
@@ -136,8 +136,9 @@
 .tags-container span {
   display: flex;
   padding: var(--ds-space-q) var(--ds-space-1h);
-  font-size: calc(12 / var(--rem-base) * 1rem);
+  font-size: calc(13 / var(--rem-base) * 1rem);
   font-weight: 600;
+  line-height: 1.5;
   letter-spacing: calc(0.65 / var(--rem-base) * 1rem);
   border-radius: var(--ds-space-4);
   color: var(--ds-primary-soft-color);
diff --git a/src/css/tutorial-info.css b/src/css/tutorial-info.css
@@ -2,15 +2,25 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--ds-space-2h);
+  gap: var(--ds-space-1);
   margin-bottom: var(--ds-space-3);
 }
 
 .tutorial-info .info-item {
   display: flex;
-  gap: var(--ds-space-1);
+  gap: var(--ds-space-h);
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
+  color: var(--ds-text-tertiary);
+}
+
+.tutorial-info .info-item .material-icons {
+  font-size: var(--ds-space-2);
 }
 
 .tutorial-info .tutorial-actions {
   margin-left: auto;
 }
+
+html[data-layout="tutorial"] h1.page:first-child {
+  margin-bottom: var(--ds-space-1);
+}
diff --git a/src/layouts/tutorial.hbs b/src/layouts/tutorial.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-layout="tutorial">
   <head>
 {{> head defaultPageTitle='Untitled'}}
   </head>
diff --git a/src/partials/survey.hbs b/src/partials/survey.hbs
@@ -2,7 +2,7 @@
 	<h2>Support</h2>
 	<div class="sectionbody">
     <div class="sect2">
-      <h4>Was This Helpful?</h4>
+      <h3>Was This Helpful?</h3>
       <div class="paragraph dialog-action--container">
         <p class="dialog-action navbar-end">
           <button id="support_yes" class="ds-button ds-button--color-neutral
@@ -39,7 +39,7 @@
       </dialog>
     </div>
     <div class="sect2">
-      <h4>Need More Help?</h4>
+      <h3>Need More Help?</h3>
       <div class="ulist unstyled landing-support">
         <ul class="unstyled">
           <li>

Original file line number	Diff line number	Diff line change
`@@ -660,7 +660,7 @@`
`660`	`660`	`}`
`661`	`661`
`662`	`662`	`.doc ul.checklist {`
`663`		`- padding-left: var(--ds-space-2h);`
	`663`	`+ padding-left: 0;`
`664`	`664`	`}`
`665`	`665`
`666`	`666`	`.doc ul.checklist p {`
`@@ -685,9 +685,11 @@`
`685`	`685`	`}`
`686`	`686`
`687`	`687`	`.doc ul.checklist i.fa-check-square-o::before {`
`688`		`- content: "\e876";`
`689`		`- color: var(--ds-primary-solid-color);`
`690`		`- background-color: var(--ds-primary-solid-bg);`
	`688`	`+ content: "\e86c";`
	`689`	`+ color: var(--link-font-color);`
	`690`	`+ font-size: var(--ds-space-2h);`
	`691`	`+ width: calc(20 / var(--rem-base) * 1rem);`
	`692`	`+ height: calc(20 / var(--rem-base) * 1rem);`
`691`	`693`	`}`
`692`	`694`
`693`	`695`	`.doc ul.checklist i.fa-square-o::before {`