Primary Navigation (Side Nav) (#10)

* logo fix for prefers theme, site padding fixes, random style fixes

* input padding

* add mixins

* set spacing system to an 8px base unit

* style the nav

* add ds css variables for spacing system

* border instead of box-shadow

* general spacing updates

* update nvmrc with updated postcss deps, use mixins for theme, fix build, change theme scripts, preload fonts

* aditional spacing updates

* fix button size error

* secondary nav links

* correct button size

* use font for button

* implement new spacing all over

* fix conflict

* site padding back to 32

---------

Co-authored-by: Josué Bran <[email protected]>

Author: colegoldsmith

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "editor.tabSize": 2,
+    "files.associations": {
+        "*.css": "postcss"
+    },
+    "emmet.includeLanguages":{
+        "postcss": "css"
+    },
+    "emmet.syntaxProfiles": {
+        "postcss": "css"
+    },
+}

src/css/doc.css

@@ -20,6 +20,13 @@
   }
 }
 
+@media screen and (max-width: 1023.5px) {
+  .doc {
+    padding-left: var(--site-padding);
+    padding-right: var(--site-padding);
+  }
+}
+
 .doc h1,
 .doc h2,
 .doc h3,
@@ -33,38 +40,27 @@
 }
 
 .doc > h1.page:first-child {
-  /* font-size: calc(36 / var(--rem-base) * 1rem); */
   margin: calc(24 / var(--rem-base) * 1rem) 0;
 }
 
 .doc h1 {
-  /* .ds-text-h1 */
-  font-size: calc(24 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h1;
 }
 
 .doc h2 {
-  /* .ds-text-h2 */
-  font-size: calc(20 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h2;
 }
 
 .doc h3 {
-  /* .ds-text-h3  */
-  font-size: calc(20 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h3;
 }
 
 .doc h4 {
-  /* .ds-text-h4 */
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h4;
 }
 
 .doc h5 {
-  /* .ds-text-h5 */
-  font-size: calc(15 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  @include text-h5;
 }
 
 .doc a.link,
@@ -119,9 +115,7 @@
   width: 2.75ex;
   margin-left: -2ex;
   visibility: hidden;
-  /* font-size: 0.8em; */
   font-weight: normal;
-  /* padding-top: 0.05em; */
   color: var(--ds-primary-soft-hover-bg);
 }
 
@@ -946,16 +940,17 @@
 }
 
 .doc .conum[data-value] {
-  border: 1px solid currentColor;
+  @include text-overline;
+
+  color: var(--ds-text-inverse);
+  background: var(--ds-text-primary);
   border-radius: 100%;
   display: inline-block;
-  font-family: var(--body-font-family);
-  font-size: calc(12 / var(--rem-base) * 1rem);
   font-style: normal;
-  line-height: 1.5;
+  line-height: 2;
   text-align: center;
-  width: 1.25em;
-  height: 1.25em;
+  width: 2em;
+  height: 2em;
   letter-spacing: -0.25ex;
   text-indent: -0.25ex;
 }

src/css/ds-button.css

@@ -1,9 +1,9 @@
 .ds-button {
+  @include text-button;
+
   border-radius: 6px;
-  padding: 0 12px;
-  height: 40px;
-  font-size: calc(16 / var(--rem-base) * 1rem);
-  font-weight: 600;
+  padding: 0 1.5rem;
+  height: var(--ds-space-5);
   transition: var(--ds-transition);
   border: 1px solid transparent;
   display: flex;
@@ -17,17 +17,17 @@
 
 /* icon button */
 .ds-button--is-icon {
-  height: 40px;
-  width: 40px;
+  height: var(--ds-space-5);
+  width: var(--ds-space-5);
   padding: 0;
 }
 
 .ds-button--leading-icon {
-  margin-right: 8px;
+  margin-right: var(--ds-space-1);
 }
 
 .ds-button--trailing-icon {
-  margin-left: 8px;
+  margin-left: var(--ds-space-1);
 }
 
 .ds-button--variant-outlined {

src/css/ds-input.css

@@ -1,7 +1,7 @@
 .ds-input-container {
-  height: 40px;
-  font-size: var(--ds-space-2);
-  font-weight: 400;
+  @include text-body;
+
+  height: var(--ds-space-5);
   color: var(--ds-text-primary);
   transition: var(--ds-transition);
   border-radius: 6px;
@@ -32,7 +32,7 @@
   display: block;
   min-width: 0;
   width: 100%;
-  padding: 5.5px 10px;
+  padding: 1.4545rem 1.25rem;
 
   &::placeholder {
     color: var(--ds-text-placeholder);
@@ -44,17 +44,17 @@
 }
 
 .ds-input--leading-icon {
-  margin-left: 10px;
-  font-size: 20px;
+  margin-left: 1.25rem;
+  font-size: 2.5rem;
 }
 
 .ds-input--leading-icon + .ds-input {
   padding-left: 0;
 }
 
 .ds-input--trailing-icon {
-  margin-right: 10px;
-  font-size: 20px;
+  margin-right: 1.25rem;
+  font-size: 2.5rem;
 }
 
 .ds-input--trailing-icon + .ds-input {

src/css/ds-logo.css

@@ -7,8 +7,8 @@ html[data-theme="light"] #datastax-docs-logo-main {
 }
 
 #datastax-docs-logo-main {
-  width: 287px;
-  height: 40px;
+  width: calc(287 / var(--rem-base) * 1rem);
+  height: calc(40 / var(--rem-base) * 1rem);
 }
 
 @media (prefers-color-scheme: light) {
@@ -25,8 +25,8 @@ html[data-theme="light"] #datastax-docs-logo-main {
 
 @media screen and (max-width: 768.5px) {
   #datastax-docs-logo-main {
-    width: 162px;
-    height: 40px;
+    width: calc(162 / var(--rem-base) * 1rem);
+    height: calc(40 / var(--rem-base) * 1rem);
   }
 
   html[data-theme="dark"] #datastax-docs-logo-main {

src/css/ds-typography.css

@@ -1,73 +1,78 @@
-.ds-text-display {
-  font-size: 2.125rem;
+@mixin text-display {
+  font-size: calc(34 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h1 {
-  font-size: 1.5rem;
+@mixin text-h1 {
+  font-size: calc(24 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h2 {
-  font-size: 1.25rem;
+@mixin text-h2 {
+  font-size: calc(20 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h3 {
-  font-size: 1rem;
+@mixin text-h3 {
+  font-size: calc(20 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-h4 {
-  font-size: 0.938rem;
+@mixin text-h4 {
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-weight: 600;
+}
+
+@mixin text-h5 {
+  font-size: calc(15 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-body {
-  font-size: var(--ds-space-2);
+@mixin text-body {
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 400;
 }
 
-.ds-text-body-small {
-  font-size: 0.906rem;
+@mixin text-body-small {
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   font-weight: 400;
 }
 
-.ds-text-caption {
-  font-size: 0.906rem;
+@mixin text-caption {
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   font-weight: 500;
 }
 
-.ds-text-label {
-  font-size: 0.8125rem;
+@mixin text-label {
+  font-size: calc(13 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-overline {
-  font-size: 0.75rem;
+@mixin text-overline {
+  font-size: calc(12 / var(--rem-base) * 1rem);
   font-weight: 650;
-  letter-spacing: 0.075rem;
+  letter-spacing: calc(1.2 / var(--rem-base) * 1rem);
   text-transform: uppercase;
 }
 
-.ds-text-button {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+@mixin text-button {
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
-.ds-text-tab {
-  font-size: 1rem;
+@mixin text-tab {
+  font-size: calc(16 / var(--rem-base) * 1rem);
   font-weight: 400;
 }
 
-.ds-text-mono {
-  font-family: "Roboto Mono", monospace;
-  font-size: 0.96875rem;
+@mixin text-mono {
+  font-size: calc(15.5 / var(--rem-base) * 1rem);
   font-weight: 400;
+  font-family: "Roboto Mono", monospace;
 }
 
-.ds-text-mono-small {
-  font-family: "Roboto Mono", monospace;
-  font-size: 0.875rem;
+@mixin text-mono-small {
+  font-size: calc(14 / var(--rem-base) * 1rem);
   font-weight: 400;
+  font-family: "Roboto Mono", monospace;
 }

src/css/header.css

@@ -29,13 +29,13 @@ body {
 
 .search {
   display: flex;
-  gap: 8px;
+  gap: var(--ds-space-1);
   margin-right: auto;
 }
 
 .navbar-end {
   display: flex;
-  gap: 8px;
+  gap: var(--ds-space-1);
   align-items: center;
   flex: auto;
 }
@@ -49,7 +49,7 @@ body {
 .navbar-burger::before {
   font-family: "Material Icons Outlined", sans-serif;
   font-weight: 400;
-  font-size: 20px;
+  font-size: calc(20 / var(--rem-base) * 1rem);
   content: "\e5d2";
 }
 
@@ -60,7 +60,7 @@ body {
 #theme-toggle::before {
   font-family: "Material Icons Outlined", sans-serif;
   font-weight: 400;
-  font-size: 20px;
+  font-size: calc(20 / var(--rem-base) * 1rem);
   content: "\e51c";
   color: var(--ds-primary-400);
 }
@@ -72,7 +72,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
 @media screen and (min-width: 769px) {
   #search-input {
-    width: 200px;
+    width: calc(200 / var(--rem-base) * 1rem);
   }
 }
 
@@ -84,7 +84,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
 @media screen and (max-width: 1023.5px) {
   #get-support {
-    width: 40px;
+    width: var(--ds-space-5);
     padding: 0;
     font-size: 0;
   }
@@ -95,7 +95,7 @@ html[data-theme="dark"] #theme-toggle::before {
 
   .navbar-brand {
     height: inherit;
-    padding: 0 var(--site-padding--mobile);
+    padding: 0 var(--site-padding);
   }
 
   .navbar-brand .navbar-item {
@@ -109,7 +109,7 @@ html[data-theme="dark"] #theme-toggle::before {
     max-height: var(--body-min-height);
     overflow-y: auto;
     overscroll-behavior: none;
-    padding: var(--site-padding--mobile);
+    padding: var(--site-padding);
     border-top: 1px solid var(--ds-divider);
     border-bottom: 1px solid var(--ds-divider);
   }