Typography (#5)

* Updates for typography

* Updates formatting headers and titles

* Fix padding

* Updates for preview-src/index.adoc

Author: josuebran

preview-src/index.adoc

@@ -1,11 +1,13 @@
-= Hardware and Software Requirements
+= Document Header
 Author Name
 :idprefix:
 :idseparator: -
 :!example-caption:
 :!table-caption:
 :page-pagination:
 
+== Headers and Titles
+
 [.float-group]
 --
 image:multirepo-ssg.svg[Multirepo SSG,180,135,float=right,role=float-gap]
@@ -22,7 +24,13 @@ Quisque pharetra tristique arcu fringilla dapibus.
 https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus.
 Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
 
-== Cu solet
+== Headers and Titles
+
+=== Section Title (Level 1)
+
+==== Section Title (Level 2)
+
+===== Section Title (Level 3)
 
 Nominavi luptatum eos, an vim hinc philosophia intellegebat.
 Lorem pertinacia `expetenda` et nec, [.underline]#wisi# illud [.line-through]#sonet# qui ea.
@@ -31,6 +39,19 @@ E = mc^2^.
 Eum an doctus <<liber-recusabo,maiestatis efficiantur>>.
 Eu mea inani iriure.footnote:[Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
 
+[%autowidth.stretch]
+|===
+|Column 1, header row |Column 2, header row |Column 3, header row
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+|Cell in column 3, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|Cell in column 3, row 3
+|===
+
 [,json]
 ----
 {
@@ -301,7 +322,7 @@ Est in reque homero principes, meis deleniti mediocrem ad has.
 Ex nam suas nemore dignissim, vel apeirian democritum et.
 
 .Antora is a multi-repo documentation site generator
-image::multirepo-ssg.svg[Multirepo SSG,3000,opts=interactive]
+image::multirepo-ssg.svg[Multirepo SSG,300,opts=interactive]
 
 Make the switch today!
 

src/css/breadcrumbs.css

@@ -1,7 +1,7 @@
 .breadcrumbs {
   display: none;
   flex: 1 1;
-  padding: 0 0.5rem 0 0.75rem;
+  padding: 0 0.5rem 0 calc(24 / var(--rem-base) * 1rem);
   line-height: var(--nav-line-height);
 }
 

src/css/doc.css

@@ -3,16 +3,18 @@
   font-size: var(--doc-font-size);
   hyphens: auto;
   line-height: var(--doc-line-height);
-  margin: var(--doc-margin);
+  margin: 0; /* var(--doc-margin); */
   max-width: var(--doc-max-width);
-  padding: 0 1rem 4rem;
+  padding-right: calc(40 / var(--rem-base) * 1rem);
+  padding-left: calc(24 / var(--rem-base) * 1rem);
+  padding-bottom: 4rem;
 }
 
 @media screen and (min-width: 1024px) {
   .doc {
     flex: auto;
     font-size: var(--doc-font-size--desktop);
-    margin: var(--doc-margin--desktop);
+    margin: 0; /* var(--doc-margin--desktop); */
     max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
@@ -32,36 +34,47 @@
 
 .doc > h1.page:first-child {
   /* font-size: calc(36 / var(--rem-base) * 1rem); */
-  margin: 1.5rem 0;
+  margin: calc(24 / var(--rem-base) * 1rem) 0;
 }
 
 .doc h1 {
   /* .ds-text-h1 */
-  font-size: 1.5rem;
+  font-size: calc(24 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
 .doc h2 {
   /* .ds-text-h2 */
-  font-size: 1.25rem;
+  font-size: calc(20 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
 .doc h3 {
-  /* .ds-text-h3 { */
-  font-size: 1rem;
+  /* .ds-text-h3  */
+  font-size: calc(20 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
 .doc h4 {
   /* .ds-text-h4 */
-  font-size: 0.938rem;
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-weight: 600;
+}
+
+.doc h5 {
+  /* .ds-text-h5 */
+  font-size: calc(15 / var(--rem-base) * 1rem);
   font-weight: 600;
 }
 
+.doc a.link,
+.doc a.link:hover {
+  color: var(--heading-font-color);
+}
+
 @media screen and (min-width: 769px) {
   .doc > h1.page:first-child {
-    margin-top: 2.5rem;
+    margin-top: calc(8 / var(--rem-base) * 1rem);
   }
 }
 
@@ -75,7 +88,7 @@
 
 #preamble + .sect1,
 .doc .sect1 + .sect1 {
-  margin-top: 2rem;
+  margin-top: calc(48 / var(--rem-base) * 1rem);
 }
 
 .doc h1.sect0 {
@@ -87,9 +100,10 @@
 
 .doc h2:not(.discrete) {
   border-bottom: 1px solid var(--section-divider-color);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  padding: 0.4rem 1rem 0.1rem;
+  /* margin-left: -1rem;
+  margin-right: -1rem; */
+  margin: 0;
+  padding: 0 0 calc(16 / var(--rem-base) * 1rem);
 }
 
 .doc h3:not(.discrete),
@@ -175,7 +189,7 @@
 }
 
 .doc pre {
-  font-size: calc(16 / var(--rem-base) * 1rem);
+  font-size: calc(14 / var(--rem-base) * 1rem);
   line-height: 1.5;
   margin: 0;
 }
@@ -185,7 +199,7 @@
 }
 
 .doc .paragraph.lead > p {
-  font-size: calc(18 / var(--rem-base) * 1rem);
+  font-size: calc(14 / var(--rem-base) * 1rem);
 }
 
 .doc .right {
@@ -243,7 +257,7 @@
 }
 
 .doc table.tableblock {
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
 }
 
 .doc .tablecontainer,
@@ -268,7 +282,7 @@
 
 .doc table.tableblock,
 .doc table.tableblock > * > tr > * {
-  border: 0 solid var(--table-border-color);
+  border-bottom: 0 solid var(--table-border-color);
 }
 
 .doc table.grid-all > * > tr > * {
@@ -511,7 +525,7 @@
 }
 
 .doc .verseblock {
-  font-size: 1.15em;
+  font-size: 1em;
   padding: 1rem 2rem;
 }
 
@@ -752,7 +766,7 @@
 .doc .sidebarblock > .content > .title {
   font-size: calc(22.5 / var(--rem-base) * 1rem);
   font-weight: var(--alt-heading-font-weight);
-  line-height: 1.3;
+  line-height: 1.5;
   margin-bottom: -0.3em;
   text-align: center;
 }
@@ -929,9 +943,9 @@
   border-radius: 100%;
   display: inline-block;
   font-family: var(--body-font-family);
-  font-size: calc(13.5 / var(--rem-base) * 1rem);
+  font-size: calc(12 / var(--rem-base) * 1rem);
   font-style: normal;
-  line-height: 1.2;
+  line-height: 1.5;
   text-align: center;
   width: 1.25em;
   height: 1.25em;

src/css/footer.css

@@ -1,7 +1,7 @@
 footer.footer {
   background-color: var(--footer-background);
   color: var(--footer-font-color);
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: calc(12 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
   padding: 1.5rem;
 }

src/css/main.css

@@ -33,3 +33,7 @@
     flex-basis: var(--toc-width--widescreen);
   }
 }
+
+main {
+  padding-right: calc(24 / var(--rem-base) * 1rem);
+}

src/css/nav.css

@@ -16,7 +16,7 @@
 
 @media screen and (min-width: 1024px) {
   .nav-container {
-    font-size: calc(15.5 / var(--rem-base) * 1rem);
+    font-size: calc(14.5 / var(--rem-base) * 1rem);
     flex: none;
     position: static;
     top: 0;
@@ -168,7 +168,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .context {
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   flex-shrink: 0;
   color: var(--nav-muted-color);
   box-shadow: 0 -1px 0 var(--nav-panel-divider-color);

src/css/toc.css

@@ -25,7 +25,7 @@
 }
 
 .toc .toc-menu ul {
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: calc(16 / var(--rem-base) * 1rem);
   line-height: var(--toc-line-height);
   list-style: none;
   margin: 0;
@@ -51,11 +51,15 @@
 
 @media screen and (min-width: 1024px) {
   .toc .toc-menu h3 {
-    font-size: calc(15 / var(--rem-base) * 1rem);
+    font-size: calc(16 / var(--rem-base) * 1rem);
   }
 
   .toc .toc-menu ul {
-    font-size: calc(13.5 / var(--rem-base) * 1rem);
+    font-size: calc(16 / var(--rem-base) * 1rem);
+  }
+
+  .toc.sidebar .toc-menu {
+    margin-left: calc(40 / var(--rem-base) * 1rem);
   }
 }
 
@@ -77,6 +81,7 @@
   display: inline-block;
   padding: 0.25rem 0 0.25rem 0.5rem;
   text-decoration: none;
+  font-weight: var(--toc-menu-font-weight);
 }
 
 .sidebar.toc .toc-menu a {

src/css/toolbar.css

@@ -2,16 +2,20 @@
   color: var(--toolbar-font-color);
   align-items: center;
   background-color: var(--toolbar-background);
-  box-shadow: 0 1px 0 var(--toolbar-border-color);
+  /* box-shadow: 0 1px 0 var(--toolbar-border-color); */
   display: flex;
-  font-size: calc(15 / var(--rem-base) * 1rem);
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   height: var(--toolbar-height);
   justify-content: flex-start;
   position: sticky;
   top: var(--navbar-height);
   z-index: var(--z-index-toolbar);
 }
 
+.toolbar ul li:last-of-type {
+  color: var(--toolbar-muted-color);
+}
+
 .toolbar a {
   color: inherit;
 }
@@ -64,5 +68,5 @@
 }
 
 .toolbar .edit-this-page a {
-  color: var(--toolbar-muted-color);
+  color: var(--toolbar-font-color);
 }

src/css/vars.css

@@ -7,7 +7,7 @@
   --body-line-height: 1.5;
   --body-font-color: var(--ds-text-primary);
   --body-font-family: "Roboto Flex", sans-serif;
-  --body-font-weight-bold: 500;
+  --body-font-weight-bold: 600;
   --monospace-font-family: "Roboto Mono", monospace;
   --monospace-font-weight-bold: 500;
   /* base */
@@ -31,16 +31,16 @@
   /* nav */
   --nav-background: var(--ds-background-body);
   --nav-border-color: var(--ds-divider);
-  --nav-line-height: 1.35;
+  --nav-line-height: 1.5;
   --nav-heading-font-color: var(--ds-text-tertiary);
   --nav-muted-color: var(--ds-text-tertiary);
   --nav-panel-divider-color: var(--ds-divider);
   --nav-secondary-background: var(--ds-background-body);
   /* toolbar */
   --toolbar-background: var(--ds-background-body);
   --toolbar-border-color: var(--ds-divider);
-  --toolbar-font-color: var(--ds-text-primary);
-  --toolbar-muted-color: var(--ds-text-disabled);
+  --toolbar-font-color: var(--ds-primary-main);
+  --toolbar-muted-color: var(--ds-text-tertiary);
   --page-version-menu-background: var(--ds-background-level3);
   --page-version-missing-font-color: var(--ds-text-tertiary);
   /* admonitions */
@@ -57,8 +57,8 @@
   /* doc */
   --doc-font-color: var(--ds-text-secondary);
   --doc-font-size: inherit;
-  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
-  --doc-line-height: 1.6;
+  --doc-font-size--desktop: calc(16 / var(--rem-base) * 1rem);
+  --doc-line-height: 1.5;
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
   --heading-font-color: var(--ds-text-primary);
@@ -94,17 +94,17 @@
   --table-stripe-background: var(--ds-background-body);
   --table-footer-background: linear-gradient(to bottom, var(--ds-background-level1) 0%, var(--ds-background-body) 100%);
   /* toc */
-  --toc-font-color: var(--nav-muted-color);
+  --toc-font-color: var(--ds-text-secondary);
   --toc-heading-font-color: var(--doc-font-color);
   --toc-border-color: var(--ds-divider);
-  --toc-line-height: 1.2;
+  --toc-line-height: 1.5;
   /* footer */
   --footer-line-height: var(--doc-line-height);
   --footer-background: var(--ds-neutral-soft-bg);
   --footer-font-color: var(--ds-text-primary);
   --footer-link-font-color: var(--link-font-color);
   /* dimensions and positioning */
-  --navbar-height: calc(63 / var(--rem-base) * 1rem);
+  --navbar-height: calc(104 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
   --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);