feat(docs-infra): layout ui polish (#30883)

PR Close #30883

aio/src/styles/0-base/_typography.scss

@@ -58,7 +58,11 @@ h6 {
   clear: both;
 }
 
-h2, h3, h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
   a {
     font-size: inherit;
   }
@@ -72,14 +76,20 @@ h2, h3, h4, h5, h6 {
   margin-top: 0;
 }
 
-p, ol, ul, ol, li, input, a  {
+p,
+ol,
+ul,
+ol,
+li,
+input,
+a {
   font-size: 14px;
   line-height: 24px;
-  letter-spacing: 0.30px;
+  letter-spacing: 0.3px;
   font-weight: 400;
   color: $darkgray;
   & > em {
-    letter-spacing: 0.30px;
+    letter-spacing: 0.3px;
   }
 }
 
@@ -92,13 +102,26 @@ p + ul {
 }
 
 ol {
-  li, p {
+  li,
+  p {
     margin: 4px 0;
   }
 }
 
-li p {
-  margin: 0;
+ol ol {
+  list-style-type: lower-alpha;
+
+  ol {
+    list-style-type: lower-roman;
+  }
+}
+
+li {
+  padding-bottom: 8px;
+
+  p {
+    margin: 0;
+  }
 }
 
 a {
@@ -134,9 +157,10 @@ table tbody th {
 td {
   font-weight: 400;
   padding: 8px 30px;
-  letter-spacing: 0.30px;
+  letter-spacing: 0.3px;
 
-  > p, ul {
+  > p,
+  ul {
     &:first-child {
       margin-top: 0;
     }

aio/src/styles/1-layouts/_content-layout.scss

@@ -7,7 +7,7 @@ aio-shell.page-docs {
 
 .sidenav-content {
   min-height: 100vh;
-  padding: 80px 3rem 1rem;
+  padding: 80px 3rem 2rem;
 }
 
 @media (max-width: 600px) {

aio/src/styles/2-modules/_callout.scss

@@ -20,6 +20,10 @@
     font-size: 14px;
   }
 
+  > *:not(:first-child) {
+    padding: 16px 24px;
+  }
+
   &.is-critical {
     border-color: $brightred;
     background: rgba($brightred, 0.05);

aio/src/styles/2-modules/_code.scss

@@ -5,7 +5,6 @@ code-example, code-tabs {
 
 code-example {
 
-
   &:not(.no-box) {
     background-color: rgba($backgroundgray, 0.2);
     border: 0.5px solid $lightgray;
@@ -38,6 +37,10 @@ code-example, code-tabs {
   }
 }
 
+code-tabs {
+  margin: 16px 0;
+}
+
 // TERMINAL / SHELL TEXT STYLES
 
 code-example.code-shell, code-example[language=sh], code-example[language=bash] {
@@ -151,6 +154,7 @@ ol.linenums {
   margin: 0;
   font-family: $main-font;
   color: #B3B6B7;
+
   li {
     margin: 0;
     font-family: $code-font;

aio/src/styles/2-modules/_images.scss

@@ -41,6 +41,8 @@
     padding: 32px;
     box-sizing: border-box;
     display: inline-block;
+    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
+    margin: 16px 0;
 
     &.lightbox {
       background-color: $lightboxgray;