From 3209fd9225f4d5312dd2521a2f57141f64c5642f Mon Sep 17 00:00:00 2001
From: "Justin W. Flory (he/him) [UNICEF Innovation]" <jflory@unicef.org>
Date: Thu, 6 Oct 2022 22:20:03 -0400
Subject: [PATCH] :art: assets: Comment and organize CSS stylesheet

This commit is a complete reorganization of the custom CSS stylesheet
used in the UNICEF Inventory theme. Most CSS rules are now grouped
together in like sections with other rules. It is easier to read the
file and also understand which rules are associated to which part of the
theme. This is an effort to reduce technical debt and improve ease of
maintenance for future maintainers.

Signed-off-by: Justin W. Flory (he/him) [UNICEF Innovation] <jflory@unicef.org>
---
 assets/css/style.css | 1470 +++++++++++++++++++-----------------------
 1 file changed, 651 insertions(+), 819 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 4fde577..852a8f1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,3 +1,10 @@
+/*******************************************************************************
+ * CSS root elements
+ * 
+ * CSS rules that only target common elements in the DOM. Changes to these root
+ * elements should be made carefully, as it will impact all subsequent elements.
+*******************************************************************************/
+
 body {
     line-height: 1.5;
     font-family: var(--font-family), sans-serif;
@@ -7,393 +14,143 @@ body {
     background-color: var(--body-color);
 }
 
-P {
+p {
     color: var(--text-color);
     font-size: 15px;
 }
 
-
-/* Alert Box */
-.col-fixed {
-    width: 75%;
-    /* min-height: 9rem;
-    max-height: 9rem; */
-    position: absolute;
-    left: 13%;
-    right: 13%;
-    margin: auto;
-}
-
-@media only screen and (max-width: 768px) {
-    /* For mobile phones: */
-    .col-fixed {
-        width: 100%;
-        left: 0;
-        right: 0;
-        /* min-height: 12rem;
-        max-height: 12rem; */
-    }
-    .cohort-cards {
-        display: grid !important;
-    }
-}
-/* End of alert box */
-
-/* ===[ start: DPG Report styling ]=== */
-#report-dpg #report-dpg-header {
-    background-color: #cccccc;
-    color: var(--white-color);
-    font-weight: bold;
-    text-align: center;
-}
-#report-dpg .report-dpg-status1 {
-    background-color: #66cc00;
-    color: var(--text-color);
-}
-#report-dpg .report-dpg-status2 {
-    background-color: #ffcc00;
-    color: var(--text-color);
-}
-#report-dpg .report-dpg-status3 {
-    background-color: #ff0033;
-    color: var(--white-color);
-}
-/* ===[ end: DPG Report styling ]=== */
-
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: var(--text-color-dark);
-    font-family: var(--font-family), sans-serif;
-    font-weight: 700;
-    line-height: 1.2;
-}
-
-h1,
-.h1 {
-    font-size: 45px;
-}
-
-h2,
-.h2 {
-    font-size: 32px;
-}
-
-h3,
-.h3 {
-    font-size: 26px;
-}
-
-h4,
-.h4 {
-    font-size: 20px;
-}
-
-h5,
-.h5 {
-    font-size: 18px;
-}
-
-h6,
-.h6 {
-    font-size: 14px;
-}
-
-
-/* Button style */
-
-.btn {
-    font-size: 14px;
-    font-family: var(--font-family), sans-serif;
-    text-transform: uppercase;
-    padding: 16px 44px;
-    border-radius: 0px;
-    font-weight: 600;
-    border: 0;
-    position: relative;
-    z-index: 1;
-    transition: .2s ease;
-}
-
-.btn:focus {
-    outline: 0;
-    box-shadow: none !important;
-}
-
-.btn:active {
-    box-shadow: none;
-}
-
-.btn-primary {
-    background: var(--primary-color);
-    color: var(--white-color);
-}
-
-.btn-primary:active {
-    background: var(--primary-color);
-}
-
-.btn-primary:hover {
-    background: var(--primary-color);
-    opacity: 0.8;
-}
-
-.btn-primary:not(:disabled):not(.disabled).active,
-.btn-primary:not(:disabled):not(.disabled):active,
-.show>.btn-primary.dropdown-toggle {
-    color: var(--white-color);
-    background-color: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-.inline-button {
-    line-height: .8rem !important;
-    padding: 5px 8px !important;
-    pointer-events: none;
-    margin-top: -5px;
-}
-
-.overflow-hidden {
-    overflow: hidden !important;
-}
-
-::-moz-selection {
-    background: var(--primary-color);
-    color: var(--white-color);
-}
-
-::selection {
-    background: var(--primary-color);
-    color: var(--white-color);
-}
-
-/* page tags */
-.page-tags-flex {
-    display: flex;
-    flex-direction: row;
-}
-
-.page-tags {
-    background-color: #1CABE2;
-    justify-content: center;
-    align-items: center;
-    height: fit-content;
-    width: fit-content;
-    padding: 3px 10px;
-    border-radius: 0.25rem;
-    white-space: normal;
-    overflow: hidden;
-    color: #fff;
-    font-size: 13px;
-    margin: 10px 0 10px 20px;
-}
-
-/* preloader */
-
-.preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--white-color);
-    z-index: 999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-ul {
-    list-style-type: none;
-    margin: 0px;
-    padding-left: 0;
-    font-size: 15px;
-}
-
-ol {
-    padding-left: 20px;
-    font-size: 15px;
-}
+p:empty, p a:empty { display: none !important; }
 
 img {
     vertical-align: middle;
     border: 0;
 }
 
-
-/* This changed this from the primary color to a darker shade to improve acessibility (https://github.com/unicef/inventory/issues/32) */
-
+/* This changed from the primary color to a darker shade to improve contrast for
+   accessibility. See https://github.com/unicef/inventory/issues/32 */
 a {
     text-decoration: none;
     color: #374EA2;
 }
 
-a:hover,
-a:focus {
-    color: var(--primary-color);
-}
+a:hover, a:hover i, a:focus { color: var(--primary-color); }
 
-a,
-button,
-select {
+a, button, select {
     cursor: pointer;
     transition: .2s ease;
 }
 
-a:focus,
-button:focus,
-select:focus {
-    outline: 0;
-}
+a:focus, button:focus, select:focus { outline: 0; }
 
-.hanchor {
-    font-size: 100%;
-    visibility: hidden;
-    color: #D8D1C9;
-}
+i { transition: .2s ease; }
 
-h1:hover a,
-h2:hover a,
-h3:hover a,
-h4:hover a {
-    visibility: visible;
-}
 
-.slick-slide {
-    outline: 0;
-}
+/*******************************************************************************
+ * Colors
+ * 
+ * CSS styling for colors used across the DOM.
+*******************************************************************************/
 
-.section {
-    padding-bottom: 80px;
-}
+.border-primary { border-color: #f2f2f2 !important; }
 
-.section,
-section.main-section {
-    padding-top: 10vh;
-}
+/* Background colors: start ***************************************************/
+.bg-primary { background: var(--primary-color) !important; }
+.bg-white { background-color: var(--white-color) !important; }
+.bg-light { background-color: var(--light-color) !important; }
+/* Background colors: end *****************************************************/
 
-@media (max-width: 768px) {
-    .section {
-        /* padding-top: 10rem; */
-    }
-}
+/* Text colors: start *********************************************************/
+.text-primary { color: var(--primary-color) !important; }
+.text-color { color: var(--text-color) !important; }
+.text-dark { color: var(--text-color-dark) !important; }
+.text-white { color: var(--white-color) !important; }
+/* Text colors: end ***********************************************************/
 
 
-/* .section-sm {
-    padding-top: 60px;
-    padding-bottom: 60px;
-} */
+/*******************************************************************************
+ * Header styling
+ * 
+ * CSS styling for any header elements used in the DOM.
+*******************************************************************************/
 
-@media (max-width: 768px) {
-    /* .section-sm {
-        padding-top: 40px;
-    } */
+h1, h2, h3, h4, h5, h6 {
+    color: var(--text-color-dark);
+    font-family: var(--font-family), sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
 }
 
-@media (max-width: 400px) {
-    section.main-section {
-        padding-top: calc(300px - 4vw);
-    }
-}
+/* Font sizes: start **********************************************************/
+h1, .h1 { font-size: 45px; }
+h2, .h2 { font-size: 32px; }
+h3, .h3 { font-size: 26px; }
+h4, .h4 { font-size: 20px; }
+h5, .h5 { font-size: 18px; }
+h6, .h6 { font-size: 14px; }
+/* Font sizes: end ************************************************************/
 
-.section-title {
-    margin-bottom: 40px;
-}
+h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible; }
 
-.bg-cover {
-    background-size: cover;
-    background-position: center center;
-    background-repeat: no-repeat;
+.hanchor {
+    font-size: 100%;
+    visibility: hidden;
+    color: #D8D1C9;
 }
 
-.border-primary {
-    border-color: #f2f2f2 !important;
-}
 
-pre {
-    padding: 20px;
-}
+/*******************************************************************************
+ * List element styling
+ * 
+ * CSS styling for any ordered or unordered list and list items used in the DOM.
+*******************************************************************************/
 
+ol {
+    padding-left: 4ch;
+    font-size: 15px;
+}
 
-/* overlay */
+ul {
+    list-style-type: none;
+    margin: 0px;
+    padding-bottom: 10px;
+    padding-left: 2ch;
+    font-size: 15px;
+}
 
-.overlay {
+.list-styled li {
+    padding-left: 20px;
     position: relative;
 }
 
-.overlay::before {
+.list-styled li::before {
     position: absolute;
     content: '';
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
     background: var(--primary-color);
-    opacity: .8;
-}
-
-.outline-0 {
-    outline: 0 !important;
-}
-
-.d-unset {
-    display: unset !important;
-}
-
-.bg-primary {
-    background: var(--primary-color) !important;
-}
-
-.bg-white {
-    background-color: var(--white-color) !important;
-}
-
-.bg-light {
-    background-color: var(--light-color) !important;
-}
-
-.text-primary {
-    color: var(--primary-color) !important;
-}
-
-.text-color {
-    color: var(--text-color) !important;
-}
-
-.text-dark {
-    color: var(--text-color-dark) !important;
+    opacity: .3;
+    left: 0;
+    top: 17px;
 }
 
-.text-white {
-    color: var(--white-color) !important;
-}
 
-.top-50 {
-    top: 50px;
-}
+/*******************************************************************************
+ * Navigation (top) styling
+ * 
+ * CSS styling for the site navigation.
+*******************************************************************************/
 
-nav #site-brand{
-    display: inline-block;
-}
+nav #site-brand { display: inline-block; }
 
-nav #site-brand a {
-    color: var(--text-title-color) !important;
-}
+nav #site-brand a { color: var(--text-title-color) !important; }
 
 nav #site-brand a:focus,
-nav #site-brand a:hover {
-    color: var(--light-color) !important;
-}
+nav #site-brand a:hover { color: var(--light-color) !important; }
 
-.navbar {
-    padding: 0;
-}
+.navbar { padding: 0; }
 
-.navbar .navbar-toggler{
+.navbar .navbar-toggler {
     position:absolute;
     right: 10px;
 }
@@ -402,22 +159,18 @@ nav #site-brand a:hover {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }
 
-.navigation {
-    background-color: var(--primary-color);
-}
+.navigation { background-color: var(--primary-color); }
 
-.navigation>div>a {
-    color: white;
-}
+.navigation > div > a { color: white; }
 
-.unicef-glob {
-    font-size: 0.7rem !important;
+.unicef-glob { font-size: 0.7rem !important; }
+
+@media (max-width: 350px) {
+    .globalLogoImg { width: 170px !important; }
 }
 
 @media (max-width: 768px) {
-    .navbar {
-        padding: 10px 0;
-    }
+    .navbar { padding: 10px 0; }
     .nav-img {
         width: 11rem;
         display: inline-block;
@@ -438,9 +191,7 @@ nav #site-brand a:hover {
         bottom: 0;
         right: 0;
     }
-    .navigation-bar {
-        display: table !important;
-    }
+    .navigation-bar { display: table !important; }
     .unicef-glob {
         position: absolute;
         bottom: 30px;
@@ -459,13 +210,24 @@ nav #site-brand a:hover {
     font-size: 15px;
 }
 
+/* Language selector: start ***************************************************/
+.lang-list {
+    background: var(--primary-color);
+    color: var(--white-color);
+}
+.lang-list.dark {
+    background: var(--white-color);
+    color: var(--text-color-dark);
+}
+/* Language selector: end *****************************************************/
+
+/* Navbar dropdowns: start ****************************************************/
 .navbar .dropdown:hover .dropdown-menu {
     visibility: visible;
     opacity: 1;
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
 }
-
 .navbar .dropdown-menu {
     box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
     padding: 15px 0px;
@@ -481,7 +243,6 @@ nav #site-brand a:hover {
     transform: translateY(20px);
     background: var(--white-color);
 }
-
 @media (max-width: 768px) {
     .navbar .dropdown-menu {
         display: none;
@@ -493,217 +254,143 @@ nav #site-brand a:hover {
         transform-origin: unset;
     }
 }
-
 .navbar .dropdown-menu.view {
     visibility: visible !important;
     opacity: 1;
     -webkit-transform: translateY(0);
-    transform: translateY(0);
-    -webkit-transform-origin: top;
-    transform-origin: top;
-}
-
-@media (max-width: 768px) {
-    .navbar .dropdown-menu.view {
-        display: block;
-    }
-}
-
-.navbar .dropdown-menu.show {
-    visibility: hidden;
-}
-
-@media (max-width: 768px) {
-    .navbar .dropdown-menu.show {
-        visibility: visible;
-        display: block;
-    }
-}
-
-.navbar .dropdown-item {
-    position: relative;
-    color: var(--text-color-dark);
-    transition: .2s ease;
-    font-family: var(--font-family), sans-serif;
-}
-
-@media (max-width: 768px) {
-    .navbar .dropdown-item {
-        text-align: center;
-    }
-}
-
-.navbar .dropdown-item:hover {
-    color: var(--primary-color);
-    background: transparent;
-}
-
-.breadcrumbBar{
-    position: relative;
-}
-
-.breadcrumbBar a{
-    all:unset;
-    cursor: pointer;
-    margin: 0 !important;
-}
-
-.lang-list {
-    background: var(--primary-color);
-    color: var(--white-color);
-}
-
-.lang-list.dark {
-    color: var(--text-color-dark);
-    background: var(--white-color);
-}
-
-.banner {
-    overflow: hidden;
-}
-
-.banner p {
-    font-size: 20px;
-    opacity: .8;
-}
-
-.banner .nav-link.text-dark {
-    color: var(--white-color) !important;
-}
-
-.banner .nav-link.text-dark:hover {
-    color: var(--white-color) !important;
-}
-
-.banner .navbar-brand {
-    color: var(--white-color) !important;
-}
-
-
-/* search */
-
-#project-icon {
-    float: left;
-    height: 32px;
-    width: 32px;
-}
-
-#project-description {
-    margin: 0;
-    padding: 0;
-}
-
-.ui-helper-hidden-accessible {
-    display: none;
-}
-
-.ui-menu {
-    background: var(--white-color);
-    padding: 5px 20px 20px;
-    right: 0 !important;
-    max-height: 200px;
-    overflow: hidden;
-    border-radius: 0 0 25px 25px;
-    z-index: 9999;
-    box-shadow: 0px 13px 20px 0px rgba(0, 0, 0, .07)
+    transform: translateY(0);
+    -webkit-transform-origin: top;
+    transform-origin: top;
 }
-
-@media (max-width: 575px) {
-    .ui-menu {
-        width: calc(100% - 30px) !important;
-    }
+@media (max-width: 768px) {
+    .navbar .dropdown-menu.view { display: block; }
 }
-
-@media (min-width: 576px) {
-    .ui-menu {
-        max-width: 510px !important;
+.navbar .dropdown-menu.show { visibility: hidden; }
+@media (max-width: 768px) {
+    .navbar .dropdown-menu.show {
+        visibility: visible;
+        display: block;
     }
 }
-
-@media (min-width: 768px) {
-    .ui-menu {
-        max-width: 690px !important;
-    }
+.navbar .dropdown-item {
+    position: relative;
+    color: var(--text-color-dark);
+    transition: .2s ease;
+    font-family: var(--font-family), sans-serif;
 }
-
-@media (min-width: 992px) {
-    .ui-menu {
-        max-width: 610px !important;
+@media (max-width: 768px) {
+    .navbar .dropdown-item {
+        text-align: center;
     }
 }
-
-@media (min-width: 1200px) {
-    .ui-menu {
-        max-width: 730px !important;
-    }
+.navbar .dropdown-item:hover {
+    color: var(--primary-color);
+    background: transparent;
 }
+/* Navbar dropdowns: end ******************************************************/
 
-.ui-menu-item a {
-    color: var(--text-color);
-    padding: 8px 0;
-    font-size: 15px;
-}
 
-.ui-menu-item a:hover {
-    color: var(--primary-color);
-}
+/*******************************************************************************
+ * Navigation (sidebar) styling
+ * 
+ * CSS styling for the sidebar navigation that appears to the left of a category
+ * or an article.
+*******************************************************************************/
+
+.back-btn:hover { text-decoration: none !important; }
 
-.ui-menu-item:not(:last-child) {
-    border-bottom: 1px solid #e8e8e8;
+.sidebar-scroll {
+    overflow: auto;
+    max-height: 33vh !important;
+    padding-left: 0.5rem;
 }
 
-.ui-menu-item * {
-    display: none;
+.sidebarContainer{
+    background-color:var(--white-color);
+    width:280px !important;
+    min-height: auto !important;
+}
+.sidebar {
+    background-color:transparent;
+    padding:20px;
+    width:272px !important;
 }
 
-.ui-menu-item .ui-corner-all {
+.sidelist {
     display: block;
 }
 
+li.sidelist > a {
+    display: block;
+    font-size: 20px;
+}
 
-/* /navigation */
+li.sidelist li a { margin: 0; }
 
-.form-control {
-    height: 50px;
-    border-radius: 25px;
-    border: 0;
-    padding: 0 20px;
-}
+.sidelist li.sidelist { display: block; }
 
-.form-control:focus {
-    border: 0;
-    box-shadow: none !important;
-}
+.sidelist li.sidelist.active a { color: var(--primary-color); }
 
-textarea.form-control {
-    height: 150px;
-    padding: 20px;
-}
+.sidelist li.sidelist.active::before { opacity: 1; }
 
-.icon {
-    font-size: 40px;
-}
+.page-list li a { display: none; }
 
-.shadow {
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07) !important;
-    transition: .3s ease;
-}
+.page-list li ul a { display: block; }
 
-.shadow-bottom {
-    box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1);
+.sidelist li a {
+    color: var(--text-color-dark);
+    display: block;
+    font-size: 15px;
+    font-weight: 500;
+    padding: 10px 0;
+    line-height: 1.4;
 }
 
-.shadow:hover,
-.shadow:focus {
-    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.1) !important;
+/* Sidebar media queries: start ***********************************************/
+@media (min-width: 1100px) {
+    .sidebarIcon { display: none !important; }
+    .sidebarMobile { display: none !important; }
+}
+@media (max-width:1100px) {
+    .contentBox { margin: 10px !important; }
+    .contentContainer {
+        width: 100vw !important;
+        padding: 10px 0 !important;
+    }
+    .sidebarContainer { display: none !important; }
+    .sidebarIcon {
+        display: inline;
+        position: absolute;
+        right: 22px;
+        top: 7px; 
+        font-size: 20px; 
+    }
+    /* .sidebarMobile { display: block; } */
+    .sidebarMobile a {
+        all: unset;
+        color: white !important;
+        font-family: var(--font-family);
+    }
+    .sidebarMobile .col-10 { all: unset; }
+    .sidebarMobile .row { all: unset; }
+    .navbarMenu {
+        right: 10px !important;
+        color: var(--white-color);
+        top: 10px !important;
+        font-size: 16px !important;
+    }
 }
+/* Sidebar media queries: end *************************************************/
 
 
-/* single page */
+/*******************************************************************************
+ * Main content styling
+ * 
+ * CSS styling for the main article content on a single page. This affects all
+ * single page templates on the site.
+*******************************************************************************/
 
-.content * {
-    margin-bottom: 20px;
-}
+.content * { margin-bottom: 20px; }
 
 .content img {
     max-width: 100%;
@@ -735,126 +422,200 @@ textarea.form-control {
     top: 8px;
 }
 
-.list-styled li {
-    padding-left: 20px;
-    position: relative;
-}
+.contentBox { border-radius: 10px; }
 
-.list-styled li::before {
-    position: absolute;
-    content: '';
-    height: 8px;
-    width: 8px;
-    border-radius: 50%;
-    background: var(--primary-color);
-    opacity: .3;
-    left: 0;
-    top: 17px;
+.contentContainer {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: calc(100vw - 250px) !important;
 }
 
+/* Last updated timestamp: start **********************************************/
 .post-meta {
     color: var(--text-color);
     font-style: italic;
     font-size: 14px;
 }
+/* Last updated timestamp: end ************************************************/
 
-/* https://github.com/unicef/inventory-hugo-theme/issues/62 | Fixed line spacing */
-.highlight * {
-    margin-bottom: 2px;
-}
+/*******************************************************************************
+ * Footer content styling
+ * 
+ * CSS styling for the site footer. This affects all content in the footer
+ * layout.
+*******************************************************************************/
 
-blockquote {
-    font-size: 20px !important;
-    color: var(--text-color-dark);
-    padding: 20px 40px 0;
-    margin: 40px 0;
-    font-weight: 300;
-}
+footer a:hover { color: var(--text-color-dark) !important; }
 
-blockquote p {
-    color: var(--text-color-dark) !important;
+.socialIcon {
+    all: unset !important;
+    cursor: pointer !important;
 }
 
-/* citation Parent div */
-
-.quoteblock {
-    background: #f5fdff;
-    border-left: 2px solid var(--primary-color);
-    box-sizing: border-box;
+.socialIcon i {
+    color: var(--white-color);
+    font-size: 22px;
+    padding: 3px;
 }
 
-
-/* User Citation */
-
-.user-quote {
-    padding-bottom: 5px;
+.socialIcon i:hover {
+    color: var(--text-color-dark);
+    transition: color 10ms linear;
 }
 
 
-/* Citation image */
+/*******************************************************************************
+ * Topic card styling
+ * 
+ * CSS styling for the topic cards that appear on the site index page. The topic
+ * cards are defined from content categories in the site.
+*******************************************************************************/
 
-.user-quote blockquote .imageblock {
-    border-radius: 50%;
-    height: 100px;
-    width: 100px;
-    overflow: hidden;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    margin: auto;
-}
+.cardLink { border-radius: 10px; }
 
+.cardLink:hover { text-decoration: none; }
 
-/* Citation Person name */
+.icon { font-size: 40px; }
 
-.user-quote .attribution {
-    display: block;
-    text-align: center;
-    margin: auto;
-    margin-top: 2%;
-    color: var(--primary-color);
-    font-weight: 700;
+.shadow {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07) !important;
+    transition: .3s ease;
 }
 
+.shadow-bottom {
+    box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1);
+}
 
-/* Citation big quotes */
+.shadow:hover,
+.shadow:focus { box-shadow: 0 14px 25px rgba(0, 0, 0, 0.1) !important; }
 
-.user-quote blockquote p::before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f10d";
-    color: var(--primary-color);
-    font-weight: 700;
-    font-size: 50px;
-    padding: 3px 3px;
-    margin-right: 6px;
-}
 
+/*******************************************************************************
+ * Miscellaneous body styling
+ * 
+ * CSS styling for general components, elements, or objects used in the body of
+ * the DOM. This is for elements that are commonly reused across multiple or all
+ * pages.
+*******************************************************************************/
 
-/* Citation text */
+/* Button styling: start ******************************************************/
+.btn {
+    font-size: 14px;
+    font-family: var(--font-family), sans-serif;
+    text-transform: uppercase;
+    padding: 16px 44px;
+    border-radius: 0px;
+    font-weight: 600;
+    border: 0;
+    position: relative;
+    z-index: 1;
+    transition: .2s ease;
+}
+.btn:focus {
+    outline: 0;
+    box-shadow: none !important;
+}
+.btn:active {
+    box-shadow: none;
+}
+.btn-primary {
+    background: var(--primary-color);
+    color: var(--white-color);
+}
+.btn-primary:active {
+    background: var(--primary-color);
+}
+.btn-primary:hover {
+    background: var(--primary-color);
+    opacity: 0.8;
+}
+.btn-primary:not(:disabled):not(.disabled).active,
+.btn-primary:not(:disabled):not(.disabled):active,
+.show > .btn-primary.dropdown-toggle {
+    color: var(--white-color);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+}
+.inline-button {
+    line-height: .8rem !important;
+    padding: 5px 8px !important;
+    pointer-events: none;
+    margin-top: -5px;
+}
+.overflow-hidden {
+    overflow: hidden !important;
+}
+::-moz-selection {
+    background: var(--primary-color);
+    color: var(--white-color);
+}
+::selection {
+    background: var(--primary-color);
+    color: var(--white-color);
+}
+/* Button styling: end ********************************************************/
 
-.user-quote blockquote p {
-    text-align: center;
-    /*padding-bottom: 3rem;*/
+/* Input forms: start *********************************************************/
+.form-control {
+    height: 50px;
+    border-radius: 25px;
+    border: 0;
+    padding: 0 20px;
 }
 
-.pagination {
-    justify-content: space-between;
+.form-control:focus {
+    border: 0;
+    box-shadow: none !important;
 }
 
-.pagination a {
-    color: var(--primary-color);
+textarea.form-control {
+    height: 150px;
+    padding: 20px;
 }
+/* Input forms: end ***********************************************************/
 
+/* Pagination: start **********************************************************/
+#accordion i {
+    font-size: 14px;
+    line-height: 2;
+}
+.pagination { justify-content: space-between; }
+.pagination a { color: var(--primary-color); }
 .pagination i {
     font-size: 15px;
     line-height: 1.8;
 }
+/* Pagination: end ************************************************************/
 
-#accordion i {
-    font-size: 14px;
-    line-height: 2;
+/* Section (content) styling: start *******************************************/
+.section { padding-bottom: 80px; }
+@media (max-width: 768px) {
+    .section { /* padding-top: 10rem; */ }
+}
+/***************************
+ * What is this block for? *
+ ***************************
+.section-sm {
+    padding-top: 60px;
+    padding-bottom: 60px;
+}
+@media (max-width: 768px) {
+    .section-sm {
+    padding-top: 40px;
+    }
+}
+****************************/
+.section, section.main-section { padding-top: 10vh; }
+@media (max-width: 400px) {
+    section.main-section { padding-top: calc(300px - 4vw); }
+}
+.section-title {
+    margin-bottom: 40px;
 }
+/* Section (content) styling: end *********************************************/
 
+/* Table styling: start *******************************************************/
 table {
     text-align: left;
     width: 100%;
@@ -862,39 +623,42 @@ table {
     margin-bottom: 1rem;
     border: 1px solid #dee2e6;
 }
-
-table td,
-table th {
+table td, table th {
     padding: .75rem;
     vertical-align: top;
     border: 1px solid #dee2e6;
     margin-bottom: 0;
 }
-
 thead {
     background: #ececec;
     margin-bottom: 0;
 }
-
 tbody {
     background: #f8f8f8;
     margin-bottom: 0;
 }
+/* Table styling: end *********************************************************/
+
+
+/*******************************************************************************
+ * Admonitions styling
+ * 
+ * CSS styling for admonitions (note, tip, info, caution, warning, important).
+ * https://unicef.github.io/inventory-hugo-theme/features/admonitions/
+*******************************************************************************/
 
 .notices {
     margin: 2rem 0;
     position: relative;
 }
 
-.notices p {
-    padding: 10px;
-}
+.notices p { padding: 10px; }
 
+/* Admonition, Note: start ****************************************************/
 .notices.note p {
     border-top: 30px solid #6ab0de;
     background: #e7f2fa;
 }
-
 .notices.note p::before {
     position: absolute;
     top: 2px;
@@ -904,7 +668,6 @@ tbody {
     content: "\e61d";
     left: 5px;
 }
-
 .notices.note p::after {
     content: 'Note';
     position: absolute;
@@ -912,12 +675,13 @@ tbody {
     color: #fff;
     left: 2rem;
 }
+/* Admonition, Note: end ******************************************************/
 
+/* Admonition, Tip: start *****************************************************/
 .notices.tip p {
     border-top: 30px solid #78C578;
     background: #E6F9E6;
 }
-
 .notices.tip p::before {
     position: absolute;
     top: 2px;
@@ -927,7 +691,6 @@ tbody {
     content: "\e63a";
     left: 5px;
 }
-
 .notices.tip p::after {
     content: 'Tip';
     position: absolute;
@@ -935,12 +698,13 @@ tbody {
     color: #fff;
     left: 2rem;
 }
+/* Admonition, Tip: end *******************************************************/
 
+/* Admonition, Info: start ****************************************************/
 .notices.info p {
     border-top: 30px solid #F0B37E;
     background: #FFF2DB;
 }
-
 .notices.info p::before {
     position: absolute;
     top: 2px;
@@ -950,7 +714,6 @@ tbody {
     content: "\e717";
     left: 5px;
 }
-
 .notices.info p::after {
     content: 'Info';
     position: absolute;
@@ -958,12 +721,13 @@ tbody {
     color: #fff;
     left: 2rem;
 }
+/* Admonition, Info: end ******************************************************/
 
+/* Admonition, Warning: start *************************************************/
 .notices.warning p {
     border-top: 30px solid #E06F6C;
     background: #FAE2E2;
 }
-
 .notices.warning p::before {
     position: absolute;
     top: 2px;
@@ -973,7 +737,6 @@ tbody {
     content: "\e607";
     left: 5px;
 }
-
 .notices.warning p::after {
     content: 'Warning';
     position: absolute;
@@ -981,13 +744,13 @@ tbody {
     color: #fff;
     left: 2rem;
 }
+/* Admonition, Warning: end ***************************************************/
 
-/*Caution Admonition Shortcode*/
+/* Admonition, Caution: start *************************************************/
 .notices.caution p {
     border-top: 30px solid #802392;
     background: #f7cdff;
 }
-
 .notices.caution p::before {
     position: absolute;
     top: 2px;
@@ -997,7 +760,6 @@ tbody {
     content: "\e620";
     left: 5px;
 }
-
 .notices.caution p::after {
     content: 'Caution';
     position: absolute;
@@ -1005,13 +767,13 @@ tbody {
     color: #fff;
     left: 2rem;
 }
+/* Admonition, Caution: end ***************************************************/
 
-/*Important Admonition Shortcode*/
+/* Admonition, Important: start ***********************************************/
 .notices.important p {
     border-top: 30px solid #e40046;
     background: #f7bacc;
 }
-
 .notices.important p::before {
     position: absolute;
     top: 2px;
@@ -1021,7 +783,6 @@ tbody {
     content: "\e6c0";
     left: 5px;
 }
-
 .notices.important p::after {
     content: 'Important';
     position: absolute;
@@ -1029,88 +790,125 @@ tbody {
     color: #fff;
     left: 2rem;
 }
+/* Admonition, Important: end *************************************************/
 
 
-/* /single page */
-
+/*******************************************************************************
+ * Banner image (index page) styling
+ * 
+ * CSS styling for the banner image that appears behind the search bar on the
+ * index page of the website.
+*******************************************************************************/
 
-/* side list */
+.banner { overflow: hidden; }
 
-.sidebar-scroll {
-    overflow: auto;
-    max-height: 33vh !important;
-    padding-left: 0.5rem;
+.banner p {
+    font-size: 20px;
+    opacity: .8;
 }
 
-.sidebarContainer{
-    background-color:var(--white-color);
-    width:280px !important;
-    min-height: auto !important;
-}
-.sidebar {
-    background-color:transparent;
-    padding:20px;
-    width:272px !important;
-}
+.banner .nav-link.text-dark { color: var(--white-color) !important; }
 
-.sidelist {
-    display: block;
-}
+.banner .nav-link.text-dark:hover { color: var(--white-color) !important; }
 
-li.sidelist>a {
-    display: block;
-    font-size: 20px;
-}
+.banner .navbar-brand { color: var(--white-color) !important; }
 
-li.sidelist li a {
-    margin: 0;
+.bg-cover {
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
 }
 
-.sidelist li.sidelist {
-    display: block;
-}
+.overlay { position: relative; }
 
-.sidelist li.sidelist.active a {
-    color: var(--primary-color);
+.overlay::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: var(--primary-color);
+    opacity: .8;
 }
 
-.sidelist li.sidelist.active::before {
-    opacity: 1;
+
+/*******************************************************************************
+ * Blockquote styling
+ * 
+ * CSS styling for blockquotes, or a markup block used when a quote is given by
+ * a specific reference or person.
+*******************************************************************************/
+
+blockquote {
+    font-size: 20px !important;
+    color: var(--text-color-dark);
+    padding: 20px 40px 0;
+    margin: 40px 0;
+    font-weight: 300;
 }
 
-.page-list li a {
-    display: none;
+blockquote p { color: var(--text-color-dark) !important; }
+
+/* Citation parent div */
+.quoteblock {
+    background: #f5fdff;
+    border-left: 2px solid var(--primary-color);
+    box-sizing: border-box;
 }
 
-.page-list li ul a {
-    display: block;
+/* User Citation */
+.user-quote { padding-bottom: 5px; }
+
+/* Citation, image */
+.user-quote blockquote .imageblock {
+    border-radius: 50%;
+    height: 100px;
+    width: 100px;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: auto;
 }
 
-.sidelist li a {
-    color: var(--text-color-dark);
+/* Citation, person name */
+.user-quote .attribution {
     display: block;
-    font-size: 15px;
-    font-weight: 500;
-    padding: 10px 0;
-    line-height: 1.4;
+    text-align: center;
+    margin: auto;
+    margin-top: 2%;
+    color: var(--primary-color);
+    font-weight: 700;
 }
 
-.contentContainer{
-    width: calc(100vw - 250px) !important;
-    display:flex;
-    align-items: center;
-    justify-content:center;
+/* Citation, big quotes */
+.user-quote blockquote p::before {
+    font-family: "Font Awesome 5 Free";
+    content: "\f10d";
+    color: var(--primary-color);
+    font-weight: 700;
+    font-size: 50px;
+    padding: 3px 3px;
+    margin-right: 6px;
 }
 
-.contentBox{
-    border-radius:10px;
+/* Citation, text */
+.user-quote blockquote p {
+    text-align: center;
+    /*padding-bottom: 3rem;*/
 }
 
-p:empty,
-p a:empty {
-    display: none !important;
-}
 
+/*******************************************************************************
+ * Code block styling
+ * 
+ * CSS styling for code blocks, preformatted text, and other monospaced text
+ * formatting in the DOM.
+*******************************************************************************/
+
+/* Why does this rule appear twice? TODO: Discover which one is intentional. */
+pre { padding: 20px; }
 pre {
     display: block;
     padding: 9.5px;
@@ -1122,9 +920,21 @@ code {
     font-size: 100%;
 }
 
-.back-btn:hover {
-   text-decoration: none !important;
-}
+/* Fix line spacing. https://github.com/unicef/inventory-hugo-theme/issues/62 */
+.highlight * { margin-bottom: 2px; }
+
+/* Custom scrollbar: start ****************************************************/
+pre code::-webkit-scrollbar { height: 5px; }
+pre code::-webkit-scrollbar-track { background: #000000; }
+pre code::-webkit-scrollbar-thumb { background: #888; }
+/* Custom scrollbar: end ******************************************************/
+
+
+/*******************************************************************************
+ * Search
+ * 
+ * CSS styling for the search functionality on the site homepage.
+*******************************************************************************/
 
 .ui-autocomplete-input {
     border-bottom: 1px solid rgb(212, 212, 212) !important;
@@ -1136,6 +946,8 @@ code {
     border-bottom-right-radius: 0;
 }
 
+.ui-helper-hidden-accessible { display: none; }
+
 .search-icon {
     position: absolute;
     right: 20px;
@@ -1143,31 +955,53 @@ code {
     font-size: 14px;
 }
 
-i {
-    transition: .2s ease;
+/* Search results menu: start *************************************************/
+.ui-menu {
+    background: var(--white-color);
+    padding: 5px 20px 20px;
+    right: 0 !important;
+    max-height: 200px;
+    overflow: hidden;
+    border-radius: 0 0 25px 25px;
+    z-index: 9999;
+    box-shadow: 0px 13px 20px 0px rgba(0, 0, 0, .07)
 }
-
-a:hover i {
-    color: var(--primary-color);
+@media (max-width: 575px) {
+    .ui-menu { width: calc(100% - 30px) !important; }
 }
-
-
-/* custom scrollbar */
-
-pre code::-webkit-scrollbar {
-    height: 5px;
+@media (min-width: 576px) {
+    .ui-menu { max-width: 510px !important; }
 }
-
-pre code::-webkit-scrollbar-track {
-    background: #000000;
+@media (min-width: 768px) {
+    .ui-menu { max-width: 690px !important; }
 }
+@media (min-width: 992px) {
+    .ui-menu { max-width: 610px !important; }
+}
+@media (min-width: 1200px) {
+    .ui-menu { max-width: 730px !important; }
+}
+/* Search results menu: end ***************************************************/
 
-pre code::-webkit-scrollbar-thumb {
-    background: #888;
+/* Search result item: start **************************************************/
+.ui-menu-item a {
+    color: var(--text-color);
+    padding: 8px 0;
+    font-size: 15px;
 }
+.ui-menu-item a:hover { color: var(--primary-color); }
+.ui-menu-item:not(:last-child) { border-bottom: 1px solid #e8e8e8; }
+.ui-menu-item * { display: none; }
+.ui-menu-item .ui-corner-all { display: block; }
+/* Search result item: end ****************************************************/
 
 
-/* content tabs */
+/*******************************************************************************
+ * Tab tables styling
+ * 
+ * CSS styling for the tab tables feature.
+ * https://unicef.github.io/inventory-hugo-theme/features/tab-tables/
+*******************************************************************************/
 
 .code-tabs {
     border: 1px solid #dee2e6;
@@ -1180,13 +1014,9 @@ pre code::-webkit-scrollbar-thumb {
     margin-bottom: 0;
 }
 
-.code-tabs .tab-content .tab-pane {
-    margin-bottom: 0;
-}
+.code-tabs .tab-content .tab-pane { margin-bottom: 0; }
 
-.code-tabs .nav-tabs {
-    margin-bottom: 0;
-}
+.code-tabs .nav-tabs { margin-bottom: 0; }
 
 .code-tabs .nav-tabs .nav-item {
     padding-left: 0;
@@ -1200,28 +1030,20 @@ pre code::-webkit-scrollbar-thumb {
     margin-bottom: 0;
 }
 
-.code-tabs .nav-tabs .nav-item::before {
-    display: none;
-}
-
-.code-tabs .nav-tabs .nav-item.active {
-    background: var(--primary-color);
-}
-
-.code-tabs .nav-tabs .nav-item.active .nav-link {
-    color: var(--white-color);
-}
+.code-tabs .nav-tabs .nav-item::before { display: none; }
 
-.cardLink{
-    border-radius: 10px;
-}
+.code-tabs .nav-tabs .nav-item.active { background: var(--primary-color); }
 
-.cardLink:hover { text-decoration: none; }
+.code-tabs .nav-tabs .nav-item.active .nav-link { color: var(--white-color); }
 
 
-/* Table of Contents */
+/*******************************************************************************
+ * Table of contents styling
+ * 
+ * CSS styling for table of contents navigation menu on a single page.
+*******************************************************************************/
 
-#toc{
+#toc {
     background-color: #f7f7f7;
     border: 1px solid #6D6E71;
     box-sizing: border-box;
@@ -1230,137 +1052,147 @@ pre code::-webkit-scrollbar-thumb {
     padding-inline-end: 2rem;
 }
 
-#toctitle{
+#toctitle {
     font-weight: 600;
     font-size: 1.5rem;
     color: #1CABE2;
     margin: 1.5rem 0rem;
 }
 
-.content > .toc > ul li::before {
-    display:none;
-}
+.content > .toc > ul li::before { display: none; }
 
-.content > .toc > .sectlevel1 > li a{
+.content > .toc > .sectlevel1 > li a {
     font-weight: 400;
     font-size: 1.2rem;
     color: #4C4C4C;
     margin: 0.5rem 0rem;
 }
 
-.content > .toc > .sectlevel1 > li ul li a{
-    color:#677993;
-    font-size:1rem;
+.content > .toc > .sectlevel1 > li ul li a {
+    color: #677993;
+    font-size: 1rem;
 }
 
-.sectlevel2{
-    padding-top:1rem;
-}
+.sectlevel2 { padding-top: 1rem; }
 
 @media only screen and (max-width: 768px){
-    .sectlevel2 {
-        display:none;
-    }
-
+    .sectlevel2 { display: none; }
     .content > .toc > .sectlevel1 > li a:hover, a:focus + .sectlevel2 {
-        display:block;
-        padding-top:1rem;
+        display: block;
+        padding-top: 1rem;
     }
-
 }
 
-.editBtn {
-    border: none;
-    cursor: pointer;
-}
 
-.startupCard{
-    display: flex;
-    flex-direction: column;
-    align-items:center;
-    justify-content:space-between;
-}
+/*******************************************************************************
+ * Team Profiles styling
+ * 
+ * CSS styling for the Team Profiles feature. This showcases UNICEF Venture Fund
+ * cohorts and startup companies with a profile in the Open Source Inventory.
+*******************************************************************************/
 
-.socialIcon{
-    all:unset !important;
-    cursor: pointer !important;
-}
 
-.socialIcon i{
-    color:var(--white-color);
-    font-size: 22px;
-    padding: 3px;
-}
+/*******************************************************************************
+ * Other theme features
+ * 
+ * CSS styling for other, smaller features of the UNICEF Inventory theme. These
+ * thematic groups of changes ordered by the feature that relies on the styling
+ * changes.
+*******************************************************************************/
 
-.socialIcon i:hover{
-    color:var(--text-color-dark);
-    transition:color 10ms linear;
+/* Alert Box: start ***********************************************************/
+.col-fixed {
+    width: 75%;
+    /* min-height: 9rem;
+    max-height: 9rem; */
+    position: absolute;
+    left: 13%;
+    right: 13%;
+    margin: auto;
 }
-
-footer a:hover{
-    color: var(--text-color-dark) !important;
+@media only screen and (max-width: 768px) {
+    /* For mobile phones: */
+    .col-fixed {
+        width: 100%;
+        left: 0;
+        right: 0;
+        /* min-height: 12rem;
+        max-height: 12rem; */
+    }
+    .cohort-cards {
+        display: grid !important;
+    }
 }
+/* Alert Box: end *************************************************************/
 
-.breadcrumbLink{
-    text-transform: capitalize !important;
+/* Breadcrumb bar: start ******************************************************/
+.breadcrumbBar { position: relative; }
+.breadcrumbBar a {
+    all: unset;
+    cursor: pointer;
+    margin: 0 !important;
 }
+.breadcrumbLink { text-transform: capitalize !important; }
+/* Breadcrumb bar: end ********************************************************/
 
-.dpgCard {
-    background-color: var(--body-color);
+/* DPG Indicators: start ******************************************************/
+.dpgCard { background-color: var(--body-color); }
+/* DPG Indicators: end ********************************************************/
+
+/* DPG Report: start **********************************************************/
+#report-dpg #report-dpg-header {
+    background-color: #cccccc;
+    color: var(--white-color);
+    font-weight: bold;
+    text-align: center;
+}
+#report-dpg .report-dpg-status1 {
+    background-color: #66cc00;
+    color: var(--text-color);
+}
+#report-dpg .report-dpg-status2 {
+    background-color: #ffcc00;
+    color: var(--text-color);
+}
+#report-dpg .report-dpg-status3 {
+    background-color: #ff0033;
+    color: var(--white-color);
 }
+/* DPG Report: end ************************************************************/
 
-/* sidebar media queries*/
-@media (max-width:1100px ){
-    .sidebarContainer{
-        display:none !important;
-    }
-    .contentContainer{
-        width:100vw !important;
-        padding:10px 0 !important;
-    }
-    .contentBox{
-        margin:10px !important;
-    }
-    /* .sidebarMobile{
-        display:block;
-    } */
-    .sidebarMobile a{
-        all:unset;
-        color:white !important;
-        font-family: var(--font-family);
-    }
-    .sidebarMobile .row{
-        all:unset;
-    }
-    .sidebarMobile .col-10{
-        all:unset;
-    }
-    .sidebarIcon{
-        display:inline;
-        position:absolute;
-        right:22px;
-        top:7px; 
-        font-size: 20px; 
-    }
-    .navbarMenu{
-        right:10px !important;
-        color:var(--white-color);
-        top:10px !important;
-        font-size:16px !important;
-    }
+/* Edit button: start *********************************************************/
+.editBtn {
+    border: none;
+    cursor: pointer;
 }
+/* Edit button: end ***********************************************************/
 
-@media (min-width: 1100px) {
-    .sidebarMobile{
-        display:none !important;
-    }
-    .sidebarIcon{
-        display: none !important;
-    }
+/* Page Tags: start ***********************************************************/
+.page-tags-flex {
+    display: flex;
+    flex-direction: row;
+}
+.page-tags {
+    background-color: #1CABE2;
+    justify-content: center;
+    align-items: center;
+    height: fit-content;
+    width: fit-content;
+    padding: 3px 10px;
+    border-radius: 0.25rem;
+    white-space: normal;
+    overflow: hidden;
+    color: #fff;
+    font-size: 13px;
+    margin: 10px 0 10px 20px;
 }
+/* Page Tags: end *************************************************************/
 
-@media (max-width: 350px) {
-    .globalLogoImg{
-        width:170px !important;
-    }
+/* Team Profiles: start *******************************************************/
+.startupCard {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
+/* Team Profiles: end *********************************************************/