Adding start of big numbers #82

rfortherestofus · May 2, 2024 · 56476cb · 56476cb
1 parent a7e05b3
commit 56476cb
Show file tree

Hide file tree

Showing 2 changed files with 182 additions and 20 deletions.
diff --git a/inst/assets/omni_pdf_report_new.css b/inst/assets/omni_pdf_report_new.css
@@ -15,13 +15,16 @@
 
   --omni-dark-blue: #314160;
   --omni-medium-blue: #347686;
+  --omni-light-blue: #c8d6dd;
   --omni-tan: #7b7754;
+  --omni-teal: #8bc0b2;
 
   --pagedjs-margin-left: 0.5625in;
   --pagedjs-margin-right: 0.5625in;
   --pagedjs-margin-bottom: 0.5625in;
   --pagedjs-margin-top: 0.5625in;
 
+  --column-inside-padding: 0.05in;
 }
 
 /* ---- Pages ----------------------- */
@@ -40,18 +43,17 @@
 
 /* ---- Breaks ----------------------- */
 
-.section>h1,
-.section>h2,
-.section>h3,
-.section>h4,
-.section>h5,
-.section>h6 {
+.section > h1,
+.section > h2,
+.section > h3,
+.section > h4,
+.section > h5,
+.section > h6 {
   break-after: avoid;
 }
 
 /* --------------------- Cover Page ------------------ */
-@page:first {
-
+@page:first{
   margin-top: 1in;
 
   border-top: solid 1px var(--omni-tan);
@@ -70,7 +72,7 @@
 
 /* Main title and subtitle */
 
-#header{
+#header {
   display: table;
   min-height: 1.45in;
 }
@@ -80,19 +82,19 @@
   font-family: var(--second-font);
   font-weight: bold;
   color: white;
-  z-index:1;
+  z-index: 1;
   display: table-cell;
   vertical-align: middle;
 }
 
-.title:before{
-  position:absolute;
-  z-index:-1;
+.title:before {
+  position: absolute;
+  z-index: -1;
   width: 8.5in;
   height: 2.45in;
-  left: -0.5625in ;
+  left: -0.5625in;
   top: -1in;
-  content:"";
+  content: "";
   background-color: var(--omni-dark-blue);
 }
 
@@ -116,38 +118,67 @@ body {
 
 /* ---- Style ------------------ */
 
+h1,
+h2,
+h3,
+h4 {
+  margin-block-end: 0in;
+  margin-inline-start: 0in;
+  margin-inline-end: 0in;
+}
+
 /* Levels of title */
 h1 {
   font-size: 15pt;
   font-weight: bold;
   font-family: var(--second-font);
   padding: 0;
-  margin-top: 0.15in;
+  margin-block-start: 0.15in;
 }
 
 h2 {
   font-size: 14pt;
   font-weight: bold;
-  margin-top: 0.085in;
+  margin-block-start: 0.085in;
 }
 
 h3 {
   font-size: 13pt;
   font-weight: bold;
-  margin-top: 0.105in;
+  margin-block-start: 0.105in;
 }
 
 h4 {
   font-size: 12pt;
   font-weight: 400;
   color: var(--omni-dark-blue);
-  margin-top: 0.105in;
+  margin-block-start: 0.105in;
+}
+
+/* blockquote */
+blockquote h2 {
+  font-size: 13pt;
+  font-weight: bold;
+  font-family: var(--second-font);
+}
+
+blockquote {
+  background-color: var(--omni-light-blue);
+  padding: 0.125in;
+  margin-block-start: 0in;
+  margin-block-end: 0in;
+  margin-inline-start: 0in;
+  margin-inline-end: 0in;
 }
 
 /* Normal paragraph */
 p {
   font-size: 11pt;
   font-weight: 300;
+  margin-block-start: 0.0625in;
+  margin-block-end: 0.025in;
+  margin-inline-start: 0in;
+  margin-inline-end: 0in;
 }
 
 /* Links */
@@ -157,7 +188,6 @@ a:visited {
   color: #000000;
 }
 
-
 /* tables */
 table {
   font-family: var(--main-font);
@@ -206,3 +236,116 @@ caption {
 ul {
   list-style-type: disc;
 }
+
+/* ---- Utils ------------------ */
+/* columns */
+
+.wrap-columns {
+  display: flex;
+  padding: 0 0pt;
+}
+
+.column-20 {
+  flex: 20%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-25 {
+  flex: 25%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-30 {
+  flex: 30%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-33 {
+  flex: 33%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-40 {
+  flex: 40%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-50 {
+  flex: 50%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-60 {
+  flex: 60%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-66 {
+  flex: 66%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-70 {
+  flex: 70%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-75 {
+  flex: 75%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+.column-80 {
+  flex: 80%;
+  padding-left: var(--column-inside-padding);
+  padding-right: var(--column-inside-padding);
+}
+
+/* stats number */
+.stats-block{
+  display: flex;
+}
+
+.stats-number {
+  border-radius: 50%;
+  border: var(--omni-teal) 5px solid;
+  width: 50pt;
+  height: 50pt;
+  text-align: center;
+  z-index: 1;
+  background-color: white;
+}
+
+.stats-number p {
+  font-family: var(--second-font);
+  font-weight: bold;
+  font-size: 24pt;
+}
+
+.stats-content {
+  display: table;
+  background-color: var(--omni-teal);
+  max-height: 20pt;
+  margin-left: -10pt;
+  padding-left: 15pt;
+  margin-top: 10pt;
+  z-index: -1;
+}
+
+.stats-content p {
+  font-family: var(--second-font);
+  font-weight: bold;
+  font-size: 11pt;
+  display: table-cell;
+  max-width: 3in;
+}
diff --git a/inst/rmarkdown/templates/pdf_report_new/skeleton/skeleton.Rmd b/inst/rmarkdown/templates/pdf_report_new/skeleton/skeleton.Rmd
@@ -20,7 +20,17 @@ library(scales)
 
 # First Level Header
 
+:::wrap-columns
+:::column-70
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Et ligula ullamcorper malesuada proin libero nunc consequat. Proin libero nunc consequat interdum varius sit. Maecenas pharetra convallis posuere morbi leo. Ipsum dolor sit amet consectetur. Dolor sit amet consectetur adipiscing elit duis tristique. Sit amet cursus sit amet dictum sit. Non sodales neque sodales ut etiam sit amet. Fermentum odio eu feugiat pretium nibh ipsum. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Maecenas pharetra convallis posuere morbi. Bibendum ut tristique et egestas quis ipsum suspendisse.
+:::
+
+:::column-30
+> ## Sidebar Header, 13pt Arial Bold
+>
+> Text is inset from all edges by .125”, with the sidebar body copy having the exact same specs as the standard body copy.
+:::
+:::
 
 ## Second Level Header
 
@@ -37,6 +47,15 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
   + list 3.2
     + list 3.2.1
 
+:::stats-block
+:::stats-number
+24
+:::
+:::stats-content
+pt. Arial Bold for stats numbers. 11 pt Arial Bold for stats content.
+:::
+:::
+
 ### Third Level Header
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Et ligula ullamcorper malesuada proin libero nunc consequat. Proin libero nunc consequat interdum varius sit. Maecenas pharetra convallis posuere morbi leo. Ipsum dolor sit amet consectetur. Dolor sit amet consectetur adipiscing elit duis tristique. Sit amet cursus sit amet dictum sit. Non sodales neque sodales ut etiam sit amet. Fermentum odio eu feugiat pretium nibh ipsum. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Maecenas pharetra convallis posuere morbi. Bibendum ut tristique et egestas quis ipsum suspendisse.