5-organisms

o_comments   

Currently excluded from output
Copy
Edit
<!-- components/5-organisms/o_comments.txp --> Currently excluded from output
Copy
Copy
Edit
/* scss/5-organisms/_o_comments.scss */ .o_comments { background-color: var(--yellow); &[open] { background-color: var(--black); color: white; } }

o_lightbox   

Copy
Edit
<!-- components/5-organisms/o_lightbox.txp -->
Copy
Copy
Edit
/* scss/5-organisms/_o_lightbox.scss */ .o_lightbox { display: none; flex-direction: column; justify-content: center; position: fixed; z-index: 50; left: 0; top: 0; width: 100vw; height: 100%; overflow: auto; background-color: var(--black); &__content { max-height: 100%; } &__caption { text-align: center; // color: #ccc; //padding: 10px 0; //height: 150px; } } .o_lightbox__content, .o_lightbox__caption { animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

o_paginator   

Copy
Edit
<!-- components/5-organisms/o_paginator.txp --> <div class="o_paginator"> <nav class="o_paginator__child h3-styled u_p l_beam l_beam--spaced" aria-label="page nav"> <a title="Previous Title" rel="prev" href="#"><span class="a_icon a_icon--flip u_m--b0 u_p--l">➔</span></a> <h3 class="u_m--b0"><a href="#">Optional Section Title</a></h3> <a title="Next Title" rel="next" href="#"><span class="a_icon u_m--b0 u_p--l">➔</span></a> </nav> </div>
Copy
Copy
Edit
/* scss/5-organisms/_o_paginator.scss */ .o_paginator { &.sticky { position: sticky; top: 0; z-index: 1; background-color: var(--background-colour); } // border-bottom: 2px solid var(--black); &__child { } a { margin-bottom: 0; } }

o_header   

Copy
Edit
<!-- components/5-organisms/o_header.txp -->
Copy
Copy
Edit
/* scss/4-organisms/_o_header.scss */ .o_header { &--sticky { position: sticky; top: 0; z-index: 100; background-color: var(--background-colour); } h1:nth-child(1) { position: relative; z-index: 1; } // .banner-active & { // display: block; // position: fixed; // top: 0; // z-index: 100; // ~ .sqm_panel { // display: none; // } // } }