Fix responsive UI for mobile and ipad layout

src/css/doc.css

@@ -417,12 +417,12 @@
 
 .doc ul {
   margin: 0;
-  padding: 0 0 0 8px;
+  padding: 0 0 0 1rem;
 }
 
 .doc ol {
   margin: 0;
-  padding: 0 0 0 8px;
+  padding: 0 0 0 1rem;
 }
 
 .doc ul.checklist {
@@ -913,7 +913,7 @@ code.language-console.hljs.shell {
     font-weight: var(--weight-bold);
     min-height: 2.5rem;
     line-height: 1;
-    margin-right: 0.25rem;
+    /* margin-right: 0.25rem; */
     padding: 0 1.5rem 5px;
     position: relative;
     text-decoration: none;
@@ -942,6 +942,8 @@ code.language-console.hljs.shell {
     display: flex;
     align-items: center;
     color: #333;
+    border-bottom: 1px solid var(--color-border);
+    padding-left: 0.5rem;
   }
 
   .doc .tabs .dropddown-btn .fas {
@@ -998,3 +1000,45 @@ code.language-console.hljs.shell {
     display: block;
   }
 }
+
+@media screen and (max-width: 767px) {
+
+  .doc h1 {
+    font-size: var(--heading-h1-sm);
+  }
+
+  .doc h1.page {
+    font-size: var(--heading-h1-sm);
+    margin-bottom: 10px;
+  }
+
+  .doc h2 {
+    font-size: var(--heading-h2-sm);
+    margin: 1rem 0 1rem;
+  }
+
+  .doc h3 {
+    font-size: var(--heading-h3-sm);
+  }
+
+  .doc h4 {
+    font-size: var(--heading-h4-sm);
+  }
+
+  .doc h5 {
+    font-size: var(--heading-h4-sm);
+  }
+
+  .doc .admonitionblock td.content {
+    padding-left: 1rem;
+  }
+
+  .doc .sidebarblock > .content {
+    padding: 1.5rem;
+  }
+
+  .doc h1 > a.anchor, .doc h2 > a.anchor, .doc h3 > a.anchor, .doc h4 > a.anchor, .doc h5 > a.anchor, .doc h6 > a.anchor {
+    font-size: 18px;
+  }
+
+}

src/css/footer.css

@@ -79,7 +79,7 @@
   margin: 1rem 0;
   display: inline-block;
   /* FIXME this should be max-height 52px */
-  padding: 1rem 3.5rem;
+  padding: 0.75rem 2.5rem;
   border: 2px solid var(--color-footer-text);
   font-weight: var(--weight-bold);
   font-size: 1.125rem;
@@ -190,6 +190,10 @@
 }
 
 @media screen and (min-width: 769px) {
+  .footer-links a.white-btn {
+    padding: 1rem 3.5rem;
+  }
+
   .footer-links .col {
     flex-basis: 22%;
   }

src/css/main.css

@@ -50,7 +50,8 @@ main p {
   color: var(--color-brand-blue-secondary);
   display: flex;
   line-height: 1;
-  margin: calc(-1 * var(--height-spacer)) calc(-1 * var(--width-container-gutter)) var(--height-spacer);
+  margin: var(--base-small-space) 0 var(--base-space);
+  /* margin: calc(-1 * var(--height-spacer)) calc(-1 * var(--width-container-gutter)) var(--height-spacer); */
   padding: var(--base-space);
   border-radius: 3px;
   font-family: "Open Sans", sans-serif;
@@ -126,10 +127,9 @@ main p {
     padding-left: var(--width-container-gutter);
   }
 
-  .article-banner {
-    /* margin: 0 calc(-1 * var(--width-main-gutter)) 1rem; */
+  /* .article-banner {
     margin: var(--base-small-space) 0 var(--base-space);
-  }
+  } */
 
   .article-header {
     margin-bottom: 0;
@@ -142,4 +142,18 @@ main p {
   .main {
     padding-bottom: 2rem;
   }
+
+  .article-banner a.btn {
+    padding: 0.675rem 1rem;
+    font-size: var(--font-small);
+  }
+
+  .article-banner p {
+    font-size: var(--font-small);
+  }
+
+  .article-banner p .fab {
+    font-size: 1.2rem;
+  }
+
 }

src/css/vars.css

@@ -120,4 +120,11 @@
   --column-space: 2.5rem;
   --admonition-icon-space: 1rem;
   --admonition-content-space: 1rem;
+
+   /* Heading fonts for responsive */
+   --heading-h1-sm: 2.25rem; /* ~36px */
+   --heading-h2-sm: 1.75rem; /* ~28px */
+   --heading-h3-sm: 1.25rem; /* ~20px */
+   --heading-h4-sm: 0.875rem; /* ~14px */
+
 }