resources/web/style/base_styles.pcss (143 lines of code) (raw):

html { /* NOTE: DEPENDENT ON MARKETING HEADER/FOOTER When scrolling to a heading, the heading should go below the sticky marketing header. The value of the padding depends on the height of the header. */ @media screen and (min-width: 1200px) { scroll-padding-top: 92px; } @media screen and (min-width: 769px) and (max-width: 1199px) { scroll-padding-top: 151px; } } #guide { * { font-family: Inter, sans-serif; } hr { margin: .5em 0; } .blockquote { font-size: 1rem; } dt span { font-weight: bold; code { font-size: 16px; } } dd { margin: 0 0 0.5em 2em; } p { margin-bottom: 1.15em; } details { margin-bottom: 1.15em; border: 1px #D3DAE6 solid; border-radius: 3px; summary { list-style-type: none; display: inline-block; width: 100%; padding: 10px; &:before { content: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.14898 5.10103C5.81704 4.76909 5.81704 4.2309 6.14898 3.89895C6.48093 3.56701 7.01912 3.56701 7.35107 3.89895L11.8511 8.39895C12.183 8.7309 12.183 9.26909 11.8511 9.60103L7.35107 14.101C7.01912 14.433 6.48093 14.433 6.14898 14.101C5.81704 13.7691 5.81704 13.2309 6.14898 12.899L10.0479 8.99999L6.14898 5.10103Z" fill="black"/></svg>'); display: inline-block; transform: translate(0px, 3.5px) rotate(0deg); transition: .1s ease-in-out; margin-right: 8px; } &::-webkit-details-marker { display: none; } } .content { padding: 5px 20px 0px 36px; } } details[open] { > summary { &:before { transform: translate(-3.5px, 0px) rotate(90deg); transition: .1s ease-in-out; } } } .container-fluid { @media screen and (min-width: 1560px) { max-width: 1500px; } } .sticky-top-md { position: -webkit-relative; position: relative; @media screen and (min-width: 1200px) { position: -webkit-sticky; position: sticky; top: 72px; } @media screen and (min-width: 769px) and (max-width: 1199px) { position: -webkit-sticky; position: sticky; top: 131px; } } .sticky-top-lg { position: -webkit-relative; position: relative; @media screen and (min-width: 1200px) { position: -webkit-sticky; position: sticky; /* NOTE: DEPENDENT ON MARKETING HEADER/FOOTER This is dependent on the height of the header. */ top: 72px; } @media screen and (min-width: 769px) and (max-width: 1199px) { position: -webkit-sticky; position: sticky; /* NOTE: DEPENDENT ON MARKETING HEADER/FOOTER This is dependent on the height of the header. */ top: 131px; } } .h-almost-full-md { @media screen and (min-width: 769px) { /* NOTE: DEPENDENT ON MARKETING HEADER/FOOTER This is dependent on the height of the header. */ height: 90vh; } } .h-almost-full-lg { @media screen and (min-width: 993px) { /* NOTE: DEPENDENT ON MARKETING HEADER/FOOTER This is dependent on the height of the header. */ height: 90vh; } } #left_col { overflow: auto; } .aside-heading { font-weight: 600; margin-top: 20px; margin-bottom: 10px; } .media-type { opacity: 0.6; text-transform: uppercase; font-size: 80%; font-weight: 400; margin-bottom: 0px; } }