: static rail * 3. first (and its .collapse class variety) : inner-most top rail * 4. first child of the first (.spread class) : inner-most bottom rail * * Note (current): if :root{--of-twelve: 11;} * var(--width) == 91.66% * var(--margin) == 4.16% * calc(var(--margin) * -1) == -4.16% * calc(var(--margin) / 2 * -1) == -2.08% */ article { --outlines: var(--raisin); } /* Set sections in both static and transition states to show overflow at left/right (offset to --margin) */ /* with a top offset of the height of its preceding header */ /* and a bottom inset of the height of its following header */ section.show, section.collapse, section.collapsing { border-radius: var(--radius-1); -webkit-clip-path: inset(-3rem calc(var(--margin) * -1) 1.36rem calc(var(--margin) * -1)); clip-path: inset(-3rem calc(var(--margin) * -1) 1.36rem calc(var(--margin) * -1)); } .header-title { -webkit-clip-path: inset(-1.5rem calc(var(--margin) * -1) 0 calc(var(--margin) * -1)); clip-path: inset(-1.5rem calc(var(--margin) * -1) 0 calc(var(--margin) * -1)); } article:before, article:after, section.collapse:before, section.collapse:after, section.show:before, section.show:after, section.collapsing:before, section.collapsing:after, .spread:before, .spread:after, article > header:before, article > header:after, .header-title:after, section.inner-right:after { position: absolute; display: block; content: ""; } /* Pseudo verticals ========================================================================== */ /* Offset :before pseudo elements to the center of the offset --margin property */ /* if --of-twelve: 11; then the following left: value is -2.08% */ article:before { left: calc(var(--margin) / 2 * -1 + .08rem); border-right: 1px solid var(--outlines); } @media (max-width: 575.98px) { article:before { left: calc(var(--margin) / 2 * -1 + .425rem); } } /* Position :after pseudo elements at the center of the offset --margin property */ /* if --of-twelve: 11; then the following right: value is -2.08% */ article:after { right: calc(var(--margin) / 2 * -1 + .08rem); border-left: 1px solid var(--outlines); } @media (max-width: 575.98px) { article:after { right: calc(var(--margin) / 2 * -1 + .425rem); } } /* Give static outer rail pseudo elements height of 100% */ article:before, article:after { top: 0; height: calc(100% - 1.36rem); z-index: -1; width: .3rem; } /* Give inner-most top and bottom rail pseudo elements a consistent width and a variable height */ /* Set background color to the html body color */ /* Z depth of 10 to be at the foreground of the body */ /* Note: the .collapse.collapsing.show. variety are necessary for continuity during the BS.transitioning event */ section.collapse:before, section.collapse:after, section.show:before, section.show:after, section.collapsing:before, section.collapsing:after, .spread:before, .spread:after { z-index: 10; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; height: 10vh; width: .5rem; } /* Position top left and top right pseudo-rails relative to section elements */ section.show:before, section.collapsing:before, section.collapse:before, section.show:after, section.collapsing:after, section.collapse:after { top: 1.6rem; } /* Position bottom left and bottom right pseudo-rails relative to .spread divs */ .spread:before, .spread:after { bottom: 1.5rem; } /* Apply left-centric styling to top left and bottom left pseudo-rails */ section.collapse:before, section.show:before, section.collapsing:before, .spread:before { left: calc(var(--margin) / 2 * -1 + .3rem); border-left: 2px solid var(--outlines); } /* Style top left pseudo-rail */ section.collapse:before, section.show:before, section.collapsing:before { border-top-left-radius: .75rem; } /* Style bottom left pseudo-rail */ .spread:before { border-bottom-left-radius: .75rem; } @media (max-width: 575.98px) { section.collapse:before, section.show:before, section.collapsing:before, .spread:before { left: calc(var(--margin) / 2 * -1 + .6rem); } } /* Apply right-centric styling to top right and bottom right pseudo-rails */ section.collapse:after, section.show:after, section.collapsing:after, .spread:after { right: calc(var(--margin) / 2 * -1 + .3rem); border-right: 2px solid var(--outlines); } /* Style top right pseudo-rail */ section.collapse:after, section.show:after, section.collapsing:after { border-top-right-radius: .75rem; } /* Style bottom right pseudo-rail */ .spread:after { border-bottom-right-radius: .75rem; } @media (max-width: 575.98px) { section.collapse:after, section.show:after, section.collapsing:after, .spread:after { right: calc(var(--margin) / 2 * -1 + .6rem); } } /* Hide inherited pseudos at landing banner section for small screens */ @media (max-width: 575.98px) { #target-zero:before, #target-zero:after { display: none; } } /*! * Horizontal pseudo elements are applied to individual header elements * to simulate connection to the vertical pseudo-rails * * 1. : pseudo left/right to hide rails beyond * 2. section.inner-right : pseudo bottom horizontal * 3. .header-title : pseudo top horizontal */ /* Pseudo concealer ========================================================================== */ /* Position top-most header pseudo-concealer elements that 'cover' pseudo-rails beyond */ article > header:before, article > header:after { top: -1.36rem; z-index: 1; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; width: .875rem; height: 2.875rem; background: var(--paper); } /* Style left pseudo-concealer */ article > header:before { border-bottom-right-radius: .5rem; border-top-right-radius: .5rem; } /* Position left pseudo-concealer */ article > header:before { left: calc(var(--margin) * -1); } @media (min-width: 992px) { article > header:before { left: calc(var(--margin) * -1 + 1vw); } /* Adjust positioning for .body-nav.show event. */ .body-nav.show ~ .body-main article > header:before { left: calc(var(--margin) * -1); } } @media (max-width: 575.98px) { article > header:before { left: calc(var(--margin) / 2 * -1); height: 2.968rem; } } /* Style right pseudo-concealer */ article > header:after { border-bottom-left-radius: .5rem; border-top-left-radius: .5rem; } /* Position general right pseudo-concealer */ article > header:after { right: calc(var(--margin) * -1); } @media (min-width: 992px) { article > header:after { right: calc(var(--margin) * -1 + 1vw); } /* Adjust positioning for .body-nav.show event. */ .body-nav.show ~ .body-main article > header:after { right: calc(var(--margin) * -1); } } @media (max-width: 575.98px) { article > header:after { right: calc(var(--margin) / 2 * -1); height: 2.968rem; } } /* Pseudo horizontals ========================================================================== */ /* Style top and bottom pseudo-horizontals */ section.inner-right:after, .header-title:after { height: .5rem; } /* Position bottom pseudo-horizontal */ section.inner-right:after { z-index: 5; bottom: 1.36rem; left: calc(var(--margin) / 2 * -1 + .5rem); right: calc(var(--margin) / 2 * -1 + .5rem); border-radius: 0 0 var(--radius-1) var(--radius-1); border-bottom: 2px solid var(--outlines); } /* Position top pseudo-horizontal */ .header-title:after { z-index: -1; top: 1.5rem; left: calc(var(--margin) / 2 * -1 + .1875rem); right: calc(var(--margin) / 2 * -1 + .1875rem); border-top: 2px solid var(--outlines); } @media (max-width: 575.98px) { section.inner-right:after { left: calc(var(--margin) / 2 * -1 + .875rem); right: calc(var(--margin) / 2 * -1 + .875rem); } .header-title:after { left: calc(var(--margin) / 2 * -1 + 1rem); right: calc(var(--margin) / 2 * -1 + 1rem); } } /* ========================================================================== Scrollbar and overflow configs ========================================================================== */ /* Hides scrollbar. * * CREDIT: * https://stackoverflow.com/questions/43186015/css-hide-scroll-bar-but-have-element-scrollable * */ ::-webkit-scrollbar { width: 0; background: transparent; } ::-webkit-scrollbar-track { width: 0; background: transparent; } ::-webkit-scrollbar-thumb { width: 0; background: transparent; } /* ========================================================================== Master collapsible section boolean states ========================================================================== */ /* * The '.collapse' class with data-parent attribute. * * Adding Bootstrap's '.collapse' class exposes an opportunity to extend class * events enabled by the automatically-activated collapse plugin. To take * advantage of collapse plugin's events, it is important to understand what the plugin * gets from the element and the sequence of classes it assigns to it. * * The collapse plugin utilizes three classes with default properties to handle events: * 1. The '.collapse' class immediately hides content. * { display: none; } * 2. The '.collapsing' class is added during transitions. * { height: 0; transition: .3s ease-in-out .3s } * 3. The '.collapse.show' class shows content. * { display: block; } * * The 'show.bs.collapse' event. * * Toggling show to the control of a currently hidden element will: * ↪ Remove its '.collapse' class ↴ * ↪ Add the '.collapsing' class ↴ * ↪ Transition its height from 0 to its initial dimension ↴ * ↪ Set aria-expanded='true' to its control element ↴ * ↪ Trigger hide.bs.collapse event to an open sibling ↴ * ↪ Remove the '.collapsing' class ↴ * ↪ Add the '.show' class. * * The 'hide.bs.collapse' event. * * Toggling collapse to the control of a currently shown element will: * ↪ Get element's height dimension ↴ * ↪ Add the '.collapsing' class ↴ * ↪ Transition its height from the retrieved dimension to 0 ↴ * ↪ Remove '.collapse.show' classes together ↴ * ↪ Set aria-expanded='false' to its control element ↴ * ↪ Remove the '.collapsing' class ↴ * ↪ Add the '.collapse' class. * * * * * Adding data-toggle="collapse" and data-target"" * to a button or a tag assigns control of that collapsible element. * * The control element's 'aria-expanded' attribute toggles 'true'/'false' when * toggling the button/a itself. * * Adding a data-parent attribute ensures that all '.collapse' elements * sharing the same data-parent are closed whenever the current '.collapse' element * is open. * * https://v5.getbootstrap.com/docs/5.0/components/collapse/ * https://mdbootstrap.com/docs/standard/components/collapse/ * */ /* Disable transitions inherited from Bootstrap's '.collapsing' class. */ [data-parent="#resumeStack"].collapsing { -webkit-transition: none !important; -o-transition: none !important; transition: none !important; } /* Set a responsive height property to be 100% of the smaller viewport * dimension minus the total height of seven headers (21rem) and * top/bottom tolerances (8rem), callable to all collapsible elements sharing * the data-parent attribute. */ [data-parent="#resumeStack"] { --height: calc(100vh - 21rem - 9rem); overflow: auto; } /* * The collapse and expand events with flex transitions. * * This radically customizes the 'show.bs.collapse' event by attaching * specific css settings to the '.show' and ':not(.show)' selectors. * * Animating flex. * * The trick is to always display flex (never hiding the element) and instead, * animating its height, and flex direction. * * * Animating flex direction. * * Flipping the flex direction is key to ensuring the content 'scrolls to top' * when shown. Without flexbox, the default states of the plugin's classes * invariably transition element heights without consideration to the window's * position relative to the revealed content. Thus, toggling a collapsed section * with greater height dimension will often overshoot the transition duration * and/or never open at the top of the element's content. * * Selecting the boolean states. * * The last key is to select the '.show' class directly and not traverse * '.collapse.show' as this will invoke a hidden state between '.collapse' * and '.show' which appears as a quick flash interrupting the transition. * Conversely, it's imperative to only select ':not(.show)' instead of * '.collapse' when targeting the element's hidden state. * */ /* Set default expanded state with assigned show-event flexbox animation. */ [data-parent="#resumeStack"].show { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1 !important; -ms-flex: 1 !important; flex: 1 !important; height: var(--height); -webkit-animation: show-event .75s var(--glide) 0s 1 normal forwards running; animation: show-event .75s var(--glide) 0s 1 normal forwards running; -webkit-transition: all .3s var(--zip) 0s, -webkit-box-flex .1s var(--swoop) 0s; transition: all .3s var(--zip) 0s, -webkit-box-flex .1s var(--swoop) 0s; -o-transition: all .3s var(--zip) 0s, flex .1s var(--swoop) 0s; transition: all .3s var(--zip) 0s, flex .1s var(--swoop) 0s; transition: all .3s var(--zip) 0s, flex .1s var(--swoop) 0s, -webkit-box-flex .1s var(--swoop) 0s, -ms-flex .1s var(--swoop) 0s; } /* Set default collapsed state with assigned hide-event flexbox animation. */ [data-parent="#resumeStack"]:not(.show) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-flex: 0 !important; -ms-flex: 0 !important; flex: 0 !important; height: 0; -webkit-animation: hide-event .55s var(--glide) 0s 1 normal forwards running; animation: hide-event .55s var(--glide) 0s 1 normal forwards running; -webkit-transition: all .3s var(--zip) 0s, -webkit-box-flex .1s var(--swoop) 0s; transition: all .3s var(--zip) 0s, -webkit-box-flex .1s var(--swoop) 0s; -o-transition: all .3s var(--zip) 0s, flex .1s var(--swoop) 0s; transition: all .3s var(--zip) 0s, flex .1s var(--swoop) 0s; transition: all .3s var(--zip) 0s, flex .1s var(--swoop) 0s, -webkit-box-flex .1s var(--swoop) 0s, -ms-flex .1s var(--swoop) 0s; } /* Show event animation keyframes */ @keyframes show-event { 0% { height: 0; visibility: hidden; opacity: 0; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 50% { visibility: visible; opacity: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 100% { height: var(--height); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; visibility: visible; opacity: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @-webkit-keyframes show-event { 0% { height: 0; visibility: hidden; opacity: 0; -webkit-box-flex: 0; flex: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } 50% { visibility: visible; opacity: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } 100% { height: var(--height); -webkit-box-flex: 1; flex: 1; visibility: visible; opacity: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } } /* Hide event animation keyframes */ @keyframes hide-event { 0% { height: var(--height); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 1; visibility: visible; } 50% { opacity: 1; visibility: visible; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } 100% { height: 0; visibility: hidden; opacity: 0; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @-webkit-keyframes hide-event { 0% { height: var(--height); -webkit-box-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; opacity: 1; visibility: visible; } 50% { opacity: 1; visibility: visible; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } 100% { height: 0; visibility: hidden; opacity: 0; -webkit-box-flex: 0; flex: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } } /* * Hide event animation keyframes at xl screens. * * This modifies the column-reverse keyframe state from occurring at * 50% to instead occurring fully at 100% into the transition. * * The slight adjustment is a considerable and visible benefit that smooths the * 'stacking' transition when content occupies a wider frame. */ @media (min-width: 1200px) { @keyframes hide-event { 0% { height: var(--height); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 1; visibility: visible; } 50% { opacity: 1; visibility: visible; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Delay column reverse at 100% for less movement on large screens */ 100% { height: 0; visibility: hidden; opacity: 0; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @-webkit-keyframes hide-event { 0% { height: var(--height); -webkit-box-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; opacity: 1; visibility: visible; } 50% { opacity: 1; visibility: visible; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } /* Delay column reverse at 100% for less movement on large screens */ 100% { height: 0; visibility: hidden; opacity: 0; -webkit-box-flex: 0; flex: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; } } } /* ========================================================================== Outer Structure configs for :checked state ========================================================================== */ /* * The static website. * * This configures the master display settings when toggle-all is ':checked'. * * Selects via general sibling selector. * Can be modified to use class selector '.body-main'. * * 1. Set position from fixed to static and allow overflow. * 2. Remove interim padding when statically positioned * (fixed position elements are fixed in relation to the window, not the body, * unresponsive to margins, only padding.) * 3. Set box shadow blur custom property from 0 (previous) to new value(s). */ #toggle-all:checked ~ main { --blur-xs: 2px; --blur-sm: 3px; --blur-md: 6px; position: static; overflow: scroll; flex-direction: column; padding-left: 0; padding-right: 0; } /* * Prevent flex behavior and overflow when toggling expand-all on mobile * and force header text to wrap and occupy two lines. */ @media (min-width: 575.98px) { #toggle-all:checked ~ main { display: block; overflow-x: hidden; } #toggle-all + label .toggle-container .menu-icon { visibility: hidden; } } /* If checked, force a show-event for all currently collapsed sections with * the exception of the landing section (target-zero) */ #toggle-all:checked ~ main [data-parent="#resumeStack"]:not(#target-zero).show, #toggle-all:checked ~ main [data-parent="#resumeStack"]:not(#target-zero).collapse { display: flex; visibility: visible; height: 100%; overflow: visible; -webkit-animation: show-event .75s ease-in-out 0s; animation: show-event .75s ease-in-out 0s; -webkit-transition: all var(--dashing) var(--glide) var(--early); -o-transition: all var(--dashing) var(--glide) var(--early); transition: all var(--dashing) var(--glide) var(--early); } /* If checked, hide all article > header icon buttons as their local boolean * functionality will (truthy) return feedback for a (falsy) '.collapse.show'. */ #toggle-all:checked ~ main article header .header-icon { display: none; } /* If checked, disable header button functionality as their local boolean * functionality is rendered inconsequential. */ #toggle-all:checked ~ main article header { pointer-events: none; cursor: default; color: black; } /* If checked, hide all features and visual cues attributed to '.collapse' * transitions. * * Simply set the '--outlines' property (color of pseudo rails) to transparent. */ #toggle-all:checked ~ main article { --outlines: transparent; } /* ========================================================================== Inner Structure configs for global events ========================================================================== */ /* * Transition variables for mobile. * * 1. Decrease base rem scale for xs screens. * 2. Only feature media content on xs screens (section.inner-left). * 3. Only feature select written content on xs screens (section.inner-right). */ @media (max-width: 575.98px) { :root { font-size: .938rem; } [data-parent="#resumeStack"] { --height: calc(100vh - 21rem - 4rem); overflow: scroll; } } /* * Transition variables for landscape-mobile to tablet screens. * * 1. Only feature media content on sm-md screens (section.inner-left). * 2. Only feature select written content on sm-md screens (section.inner-right). */ @media (min-width: 576px) and (max-width: 991.98px) { .main-article { flex: 0 0 auto !important; width: 100% !important; } #target-one .outer-first, #target-one .outer-second { width: 100%; } } /* * Transition variables for portrait-mobile and tablet screens. * * 1. Only feature media content on xs-sm-md devices (section.inner-right) by default. * 2. Show all content on toggle of expand-all. */ @media (max-width: 991.98px) { [data-parent="#resumeStack"]:not(#target-one) .outer-first { display: none; } #toggle-all:checked ~ main .header-content { flex-wrap: wrap; } #toggle-all:checked ~ main .header-text, #toggle-all:checked ~ main [data-parent="#resumeStack"]:not(#target-one) .outer-first { display: block; } /* Hide one of two CTAs that references a section not featured at this * media query. * ID selectors are required to control the following. * IDs have been assigned to two `.activity-cta` containers in the second * section of the fourth article. */ #four-two-cta-1 { display: none !important; } /* Move the relevant CTA to the bottom of the list at this media query. */ #four-two-cta-2 { -webkit-box-ordinal-group: 6 !important; -ms-flex-order: 5 !important; order: 5 !important; } /* Return to to default order when expand-all is :checked */ #toggle-all:checked ~ .body-main #four-two-cta-1 { display: block !important; } #four-two-cta-2 { -webkit-box-ordinal-group: 0; -ms-flex-order: 0; order: 0; } } /* ========================================================================== Body nav configs ========================================================================== */ /* * The body's nav container. * * This styles the body's main element. * Features `.nav-outline` scrollspy navigation, and `.nav-links` dashboard. * * Assigned element id="nav-outline" that targets to enable * scrollspy feature. * * Set tab index to 3 so a screen reader browses it after */ .body-nav { position: fixed; top: 0; bottom: 0; left: 0; margin-top: 5rem; padding-right: .75rem; padding-left: .75rem; background: var(--powder); font-family: din-2014, sans-serif; tab-index: 3; } .body-nav { display: flex; flex-direction: column; flex: 1; align-items: flex-start; } .body-nav > * { display: flex; flex-direction: column; justify-content: stretch; align-items: center; flex: 1; width: 100%; } /** * Nav > ol is a direct representation of the website's headings map, * A list of headings, with lists nested to the level of their heading hierarchy. * * Credit: (modified) headingsMap https://github.com/dzc34/headingsMap * * Each is nested to the nth level of its represented heading in the * document outline. * Class names '.list-h*' are assigned to parent s for ease of reference * and direct class styling. */ /* Set column flex direction to all lists in nav outline */ .body-nav ol.nav, .body-nav ul.nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } ul.nav { padding-left: .2rem; } .body-nav button { border: none; } /* * Nav outer body wrapper * * This controls the container within `.body-nav`, which contains two separate * divs with the `.nav-content` class. * One is the doc outline `menu-sidebar` and the other is the `nav-links` * quick navigation. */ .nav-outer-body { height: calc(100vh - 8rem); overflow-x: hidden !important; overflow-y: auto !important; } .nav-outer-body > * { flex: 1 1 initial; } /* Nav menu and scroll spy and feedback ========================================================================== */ /* * The top level list of nav outline. * * `.nav-content` styles the container for the ordered list of headings, which * contains lists nested to the level of their heading hierarchy. * * Must be assigned with Bootstrap's '.nav-pills' and 'menu-sidebar' classes * for effective scrollspy '.active' styles. * Must contain an element with the '.outline-item' and '.nav-item' classes * * 1. Configure box model and presentation. * 2. Declare properties for scope. */ .nav-content { --navlink-height: 1.05rem; --navlink-offset: calc(var(--navlink-height) - 1rem); --navlist-top: calc(var(--navlink-height) * -1); --navlink-start: calc(var(--navlink-height) / 2); --navlist-height: calc(var(--navlink-height) * 5 - var(--navlink-offset) + .25rem); --navitem-right: -50%; width: 100%; margin-left: 0; background-color: #fff; background: var(--pearl) !important; background-clip: padding-box; border: 2px solid var(--white) !important; border-radius: .75rem; -webkit-box-shadow: inset -5px -8px 0 0 rgba(255, 255, 255, 0.5), inset 5px 8px 0 0 rgba(0, 0, 0, 0.3); box-shadow: inset -5px -8px 0 0 rgba(255, 255, 255, 0.5), inset 5px 8px 0 0 rgba(0, 0, 0, 0.3); } /* Adjust scope property values for medium screens and lower */ @media (max-width: 991.98px) { .nav-content { --navlink-height: 1.2rem; --navlist-height: calc(var(--navlink-height) * 3); --navitem-right: -40%; } } /* Adjust scope property values for xs screens */ @media (max-width: 575.98px) { .nav-content { --navlink-height: 1.5rem; --navlist-height: calc(var(--navlink-height) * 3 - var(--navlink-offset)); --navitem-right: -5%; } } /* * The parent list item of nav outline. * * Must be an immediate child of the '.nav-content' class. */ .outline-item { overflow-x: hidden; overflow-y: scroll; width: 100%; padding: 1rem 1rem 1rem; border-radius: var(--radius-2); border: 1px solid var(--grey) !important; background: var(--white); } /* Set the height of link elements assigned the class name '.nav-link' * to be an instance of property --link-height. */ .nav-pills.menu-sidebar .nav-link { white-space: nowrap; line-height: var(--navlink-height); } /* * Relatively position lists, list items and list links in nav outline. * Prevents :before element from positioning relative to the next parent. */ .nav, .nav-item, .nav-link { position: relative; } /* * Absolute positioning as a boolean tool. * * This attaches key element positioning in nav outline to the :checked selector. * Scrollspy and pagination should only be enabled when the website is in static * expand-all state. * * As the feedback states of nav outline are given to pseudo elements absolutely * positioned relative to their parent elements; positioning absolute children * by traversing the :checked selector results in an effective on/off hack. * * Absolutely position pseudo elements of list items in nav * outline for pagination and scrollspy features only when #toggle-all * is ':checked' or when the screen width is greater than the screen height. */ #toggle-all:checked ~ .body-nav .nav:before, #toggle-all:checked ~ .body-nav .nav:after, #toggle-all:checked ~ .body-nav .nav-item:before, #toggle-all:checked ~ .body-nav .nav-link:before { position: absolute; display: block; content: ""; } @media (max-width: 991.98px) and (orientation: landscape) { .body-nav .nav:before, .body-nav .nav:after, .body-nav .nav-item:before, .body-nav .nav-link:before { position: absolute; display: block; content: ""; } } /* Absolutely position nav-item's pseudo element regardless of the toggle state. * This is to */ .nav-item:before { position: absolute; display: block; content: ""; } /* * Horizontal feedback on hover * * Set transparent horizontal border to :before pseudo element of list items * in nav outline. */ .list-h3 .nav-item:before { top: calc(var(--navlink-start) + var(--navlink-offset)); right: var(--navitem-right); width: 64%; border-top: .5px dotted transparent; } /* Change horizontal border color of :before pseudo element of list items * on hover. */ .nav-item:hover::before { border-top: 2px double blue; } /* * Pagination track * * Absolutely position a vertical line at the heading h3 level of nav outline * to render as a rail in which segments are highlighted when '.active' class * is added to nested list items */ .list-h3:before { top: calc(var(--navlink-start) + var(--navlink-offset)); left: 100%; height: 100%; width: .1rem; background-color: rgba(02, 42, 251, .1); transition: all .3s var(--swoop) .3s; } /* * Pagination item * * Absolutely position a vertical segments at heading h5 level of nav outline * with a variable top border width render as a rail in which segments are highlighted when '.active' class * is added to nested list items */ .list-h4:after { top: calc(var(--navlink-start) + var(--navlist-top) - var(--navlink-offset)); left: 100%; width: .1rem; border-top: 2px solid var(--raisin); transition: all .3s var(--swoop) .3s; } @media (max-width: 575.98px) { .list-h3:before, .list-h4:after { left: -2%; } } /* * Pagination item general active state. * * Set style for pagination item to transform when given scrollspy's '.active' * class via general sibling selector. */ .nav-pills.menu-sidebar .nav-link.active ~ .nav:after { border-top-width: var(--navlist-height); border-top-color: var(--blue); } /* * Scrollspy general inactive track. * * Absolutely position a horizontal line before nav-links in nav outline that * renders highlighted when '.active' class is added to nested list items and * when hovered over. */ .nav-link:before { top: var(--navlink-start); right: 100%; width: 77%; border-top: 1px solid var(--grey); } /* Style general hovered track. */ .nav-link:hover::before { border-top: 2px double blue; } /* Disable '.active' style states for parent '.link-zero' in nav outline. * Styles via '.nav-pills.menu-sidebar' are inherited from 'bootstrap.min.css' * and primarily control the '.active' state of elements within which scroll spy * is enabled. */ .nav-pills.menu-sidebar .link-zero.nav-link.active { color: initial; font-weight: normal; border-left: none; border-radius: 0; } /* Disable scroll spy by default */ .body-nav .nav-pills.menu-sidebar .nav-link.active { border-left: none; } /* Enable scrollspy when checked or when screen is landscape */ #toggle-all:checked ~ .body-nav .nav-pills.menu-sidebar .nav-link:not(.link-zero).active { border-left-width: .125rem; border-left-style: solid; } @media (max-width: 991.98px) and (orientation: landscape) { .body-nav .nav-pills.menu-sidebar .nav-link.active { border-left-width: .125rem; border-left-style: solid; } } /* * Scrollspy general active state. * * The class designation '.nav-pills.menu-sidebar .nav-link.active' from * Bootstrap is how active spied items from the body are styled in the * nav outline. * * Required to pass parent '.nav-pills.menu-sidebar' on every child class * assignment. * * Set state to transition border width and style to link items when given * scrollspy's '.active' class. */ .nav-pills.menu-sidebar .nav-link.active { color: var(--blue); border-left-width: .125rem; border-left-style: solid; } /* Style general state of nav-link pseudo :before element to transition * border widths when given scrollspy's '.active' class in nav outline */ .nav-pills.menu-sidebar .nav-link.active:before { border-top-width: 2px; border-top-color: var(--blue); } /* Nav outline display configs for global events ========================================================================== */ /* Visibility of items in the nav outline should be synced with visibility * of content it alludes to. * * Disable link functionality for nav outline lists beyond level h3 by default. * */ .list-h4 { pointer-events: none; cursor: default; opacity: .5; } /* If checked, enable link functionality for level h3 outline lists */ #toggle-all:checked + label ~ nav .list-h4 { opacity:1; pointer-events: auto; cursor: pointer; } /* The html markup for h3 headings in nav outline includes two tags with the * same section title. * * 1. One is a control element for a collapsed section. * 2. The other targets the given section when the site is static. * * As their target and link functions are not interchangeable, one is simply * hidden until the other is shown. Visibility is applied on an as-need basis. * i.e. control elements are disabled/hidden when toggle-all is ':checked'. */ /* Disable and hide non-control-element level h3 tags by default. */ .list-h3 [href^="#element"] { display: none; } /* If checked, disable and hide control-element level h3 or * duplicates of non-control-element h3 tags. */ #toggle-all:checked ~ nav .list-h3 [data-toggle="collapse"] { display: none; } /* If checked, enable and show non-control-element level h3 tags */ #toggle-all:checked ~ nav .list-h3 [href^="#element"] { display: block; } /* Adjust visibility of list items for tablet and mobile devices */ @media (max-width: 991.98px) { .link-zero, .list-h4 [href^="#target"], .list-h5 > :first-child { visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; } .list-h5 > :nth-child(2) { visibility: visible; } } /* Adjust visibility of list items for mobile portrait devices */ @media (max-width: 575.98px) { ul.list-h2, ul.list-h3 { padding-left: 0 !important; } .list-h5 .nav-link { visibility: hidden; } .list-h4 [href^="#target"], .list-h5 .nav-link:nth-child(2) { display: none; } .link-text { display: none; } } /* Body nav animation configs ========================================================================== */ /** * The nav > ol document outline is also controlled with the '.collapse' element * and target class definitions. This allows custom * slides in on toggle of menu-button click event * Currently dependent on the .collapse event class * * Responsive behavior follows the logic of a column shrinking to the offset variable of a sibling column * In this case, the succumbs to an off-canvas * * NOTE: * is the only element to elicit behavior resulting from declarations at :root * The immediate children of are: * and