add sora font, update code block styles, add link to survey (#49)

* add sora font, update code block styles, add link to survey

* fix heading hover color, add community link

* fix var name

Author: colegoldsmith

package-lock.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
     "@asciidoctor/tabs": "1.0.0-beta.6",
+    "@fontsource-variable/sora": "^5.0.15",
     "@fontsource/material-icons-outlined": "~5.0",
     "@fontsource/roboto-flex": "~5.0",
     "@fontsource/roboto-mono": "~5.0",

package.json

@@ -75,7 +75,7 @@
 
 .doc a.link,
 .doc a.link:hover {
-  color: var(--heading-font-color);
+  color: var(--heading-font-color) !important;
   text-decoration: none;
 }
 

src/css/doc.css

@@ -25,7 +25,7 @@
   font-style: normal;
   color: var(--ds-text-primary);
   margin-bottom: 0;
-  padding: var(--ds-space-h) var(--ds-space-2);
+  padding: var(--ds-space-1) var(--ds-space-2);
   background: var(--ds-background-level2);
   border-top-left-radius: calc(6 / var(--rem-base) * 1rem);
   border-top-right-radius: calc(6 / var(--rem-base) * 1rem);
@@ -35,6 +35,7 @@
 .doc .listingblock .title .source-lang {
   margin-left: auto;
   text-transform: uppercase;
+  color: var(--ds-text-secondary);
 }
 
 .doc .source-toolbox {

src/css/ds-blocks.css

@@ -1,16 +1,19 @@
 @mixin text-display {
   font-size: calc(34 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  font-weight: 500;
+  font-family: "Sora", sans-serif;
 }
 
 @mixin text-h1 {
   font-size: calc(24 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  font-weight: 550;
+  font-family: "Sora", sans-serif;
 }
 
 @mixin text-h2 {
   font-size: calc(20 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  font-weight: 550;
+  font-family: "Sora", sans-serif;
 }
 
 @mixin text-h3 {

src/css/ds-typography.css

@@ -116,5 +116,5 @@
 
 .hljs {
   border-radius: 6px;
-  border: 1px solid var(--ds-background-level2);
+  border: 1px solid transparent;
 }

src/css/highlight.css

@@ -122,7 +122,7 @@ html.is-clipped--nav {
   position: relative;
   display: flex;
   align-items: center;
-  padding: 1rem 3rem 1rem var(--site-padding);
+  padding: 1rem 4rem 1rem var(--site-padding);
 }
 
 .nav-link {

src/css/nav.css

@@ -1,5 +1,6 @@
 @import "typeface-material-icons-outlined.css";
 @import "typeface-roboto-flex.css";
+@import "typeface-sora.css";
 @import "typeface-roboto-mono.css";
 @import "ds-vars.css";
 @import "ds-light.css";

src/css/site.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'Sora';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url(~@fontsource-variable/sora/files/sora-latin-wght-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/css/typeface-sora.css

@@ -43,10 +43,10 @@
       <div class="ulist unstyled landing-support">
         <ul class="unstyled">
           <li>
-            <p><a href="{#}" class="community">
+            <p><a href="https://www.datastax.com/dev/community" target="_blank" class="community">
               Ask the Astra community</a></p></li>
           <li>
-            <p><a href="{#}" class="support">
+            <p><a href="https://support.datastax.com/" target="_blank" class="support">
               Get in touch with support</a></p></li>
         </ul>
       </div>