Ensure side nav is fixed and footer is below body content only (#26)

* add all the styles and layout updates

* fix mobile issues

Author: colegoldsmith

preview-src/index.adoc

@@ -212,6 +212,8 @@ Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum vel
 
 ==== Ordered list numeration styles
 
+[.scrolltable]
+--
 [cols="6*a"]
 |===
 |`decimal`
@@ -251,6 +253,7 @@ a|[lowergreek]
 . Electrons
 . Neutrons
 |===
+--
 
 .Ordered list w/ customized numeration
 [upperalpha]

src/css/base.css

@@ -18,16 +18,15 @@ html {
 }
 
 body {
+  @include text-body;
+
   background: var(--body-background);
   color: var(--body-font-color);
   font-family: var(--body-font-family);
   line-height: var(--body-line-height);
   margin: 0;
   tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
-  /* ds-text-body */
-  font-size: var(--ds-space-2);
-  font-weight: 400;
 }
 
 a {

src/css/body.css

@@ -3,3 +3,9 @@
     display: flex;
   }
 }
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

src/css/doc.css

@@ -27,6 +27,12 @@
   }
 }
 
+@media screen and (min-width: 1024px) and (max-width: 1104px) {
+  .doc {
+    max-width: calc(var(--doc-max-width--desktop) - 15rem);
+  }
+}
+
 .doc h1,
 .doc h2,
 .doc h3,
@@ -279,6 +285,10 @@
   font-size: calc(14.5 / var(--rem-base) * 1rem);
 }
 
+.doc .scrolltable {
+  overflow-x: auto;
+}
+
 .doc .tablecontainer,
 .doc .tablecontainer + *,
 .doc :not(.tablecontainer) > table.tableblock,

src/css/docsearch.css

@@ -86,7 +86,7 @@ html[data-theme="dark"] .DocSearch .DocSearch-Modal {
   --docsearch-logo-color: var(--ds-text-primary);
 
   /* modal */
-  --docsearch-modal-width: 560px;
+  --docsearch-modal-width: 720px;
   --docsearch-modal-height: 600px;
   --docsearch-modal-background: var(--ds-background-body);
   --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px 8px 0 rgba(85, 90, 100, 1);

src/css/ds-logo.css

@@ -15,8 +15,8 @@ html[data-theme="light"] #datastax-docs-logo-text {
 }
 
 #datastax-docs-logo-main {
-  width: calc(287 / var(--rem-base) * 1rem);
-  height: calc(40 / var(--rem-base) * 1rem);
+  width: calc(268 / var(--rem-base) * 1rem);
+  height: calc(37.46 / var(--rem-base) * 1rem);
 }
 
 #datastax-docs-logo-text {
@@ -46,8 +46,8 @@ html[data-theme="light"] #datastax-docs-logo-text {
 
 @media screen and (max-width: 768.5px) {
   #datastax-docs-logo-main {
-    width: calc(162 / var(--rem-base) * 1rem);
-    height: calc(40 / var(--rem-base) * 1rem);
+    width: calc(151.57 / var(--rem-base) * 1rem);
+    height: calc(37.46 / var(--rem-base) * 1rem);
   }
 
   html[data-theme="dark"] #datastax-docs-logo-main {

src/css/footer.css

@@ -4,11 +4,21 @@ footer.footer {
   font-size: calc(14.5 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
   padding: var(--ds-space-5);
+  display: flex;
+  flex: 1;
+  gap: var(--ds-space-3);
+  padding-left: var(--ds-space-3);
+}
+
+.footer-column {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: var(--ds-space-3);
-  flex-shrink: 0;
+  flex: 1 auto;
+}
+
+.footer-column.contact {
+  align-items: flex-end;
 }
 
 .footer p {
@@ -19,18 +29,14 @@ footer.footer {
   color: var(--footer-link-font-color);
 }
 
-.footer-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  font-size: calc(14.5 / var(--rem-base) * 1rem);
-}
-
 .footer--divider {
   background: var(--ds-divider);
   height: calc(1 / var(--rem-base) * 1rem);
-  width: 100%;
+  margin: 0 var(--ds-space-3);
+}
+
+.footer--contact-us {
+  text-align: right;
 }
 
 .footer--contact-us a {
@@ -87,6 +93,31 @@ html[data-theme="dark"] {
   }
 }
 
+@media screen and (max-width: 1023.5px) {
+  footer.footer {
+    padding-left: var(--site-padding--mobile);
+    padding-right: var(--site-padding--mobile);
+  }
+
+  .footer--divider {
+    margin: 0 var(--site-padding--mobile);
+  }
+}
+
+@media screen and (max-width: 768.5px) {
+  footer.footer {
+    flex-wrap: wrap;
+  }
+
+  .footer--contact-us {
+    text-align: left;
+  }
+
+  .footer-column.contact {
+    align-items: flex-start;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) {
     .social-icons a {

src/css/header.css

@@ -24,7 +24,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--site-padding);
+  padding: 0 var(--ds-space-3) 0 var(--site-padding);
 }
 
 .search {

src/css/main.css

@@ -2,7 +2,15 @@ main {
   padding-right: var(--site-padding);
 }
 
-@media screen and (max-width: 1023.5px) {
+aside.toc.sidebar {
+  padding-left: var(--ds-space-3);
+}
+
+aside.toc.embedded {
+  margin-bottom: var(--ds-space-3);
+}
+
+@media screen and (max-width: 1329.5px) {
   aside.toc.sidebar {
     display: none;
   }
@@ -16,7 +24,7 @@ main {
   }
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 1330px) {
   main {
     flex: auto;
     min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
@@ -31,13 +39,13 @@ main {
   }
 
   aside.toc.sidebar {
-    flex: 0 0 var(--toc-width);
+    flex: 0 0 var(--toc-width--widescreen);
     order: 1;
   }
 }
 
-@media screen and (min-width: 1216px) {
+/* @media screen and (min-width: 1330px) {
   aside.toc.sidebar {
     flex-basis: var(--toc-width--widescreen);
   }
-}
+} */

src/css/pagination.css

@@ -2,8 +2,8 @@ nav.pagination {
   display: flex;
   border-top: 1px solid var(--toolbar-border-color);
   line-height: 1;
-  margin: var(--ds-space-3) calc(var(--ds-space-2h) * -1) calc(var(--ds-space-2h) * -1);
-  padding: var(--ds-space-1h) var(--ds-space-2) 0;
+  padding-top: var(--ds-space-2);
+  margin-top: var(--ds-space-5);
 }
 
 nav.pagination span {
@@ -14,12 +14,14 @@ nav.pagination span {
 
 nav.pagination .prev {
   padding-right: 0.5rem;
+  margin-left: var(--ds-space-2);
 }
 
 nav.pagination .next {
   margin-left: auto;
   padding-left: 0.5rem;
   text-align: right;
+  margin-right: var(--ds-space-2);
 }
 
 nav.pagination span::before {