BFNA Design System

Frame 

<div class="frame">
    <div class="frame__left">
        <div class="frame__back">
            <button class="frame-button" onclick="history.back(-1)">arrow_back</button>
        </div>
        <nav class="frame__left-nav">
            <a class="frame-nav" href="#">Updates</a>
            <a class="frame-nav" href="#">About us</a>
        </nav>
        <div class="frame__social">
            <a class="frame-button" href="https://www.facebook.com/BertelsmannFoundation/" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/></svg>
      </a>
            <a class="frame-button" href="https://twitter.com/BertelsmannFdn" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/></svg>
      </a>
            <a class="frame-button" href="https://www.youtube.com/channel/UCZZdgI5F7KjUCW0fCKUOAAg" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/></svg>
      </a>
            <a class="frame-button" href="https://www.instagram.com/ber…annfoundation/?hl=en" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/></svg>
      </a>
            <a class="frame-button" href="https://vimeo.com/bfna" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M 404.00,298.00 405.51,288.24 414.18,267.17 418.75,258.00 426.47,242.53 436.78,226.29 449.04,214.04 474.66,188.41 508.59,178.59 544.00,179.00 567.25,179.28 591.19,187.76 604.30,208.00 618.93,230.58 618.30,257.27 618.00,283.00 617.64,313.26 597.15,357.83 582.28,384.00 561.90,419.85 538.74,452.51 513.42,485.00 491.27,513.43 467.93,541.12 441.00,565.16 420.57,583.41 398.29,600.31 372.00,609.00 357.54,613.78 341.75,616.09 327.00,611.25 303.39,603.50 285.32,572.74 276.00,551.00 276.00,551.00 269.08,534.00 269.08,534.00 269.08,534.00 257.58,492.00 257.58,492.00 257.58,492.00 237.15,417.00 237.15,417.00 237.15,417.00 224.33,371.00 224.33,371.00 218.79,354.01 212.93,335.98 203.00,321.00 198.94,314.87 192.35,306.77 185.00,304.65 176.55,302.21 160.03,315.31 153.00,320.00 150.27,321.82 144.31,326.73 141.04,325.70 137.95,324.74 129.77,313.12 127.35,310.00 125.54,307.66 120.30,301.33 119.36,299.00 117.32,293.96 122.75,290.88 126.00,287.93 126.00,287.93 152.00,264.84 152.00,264.84 175.59,243.77 198.64,220.94 225.00,203.33 238.72,194.17 254.00,185.18 271.00,185.00 301.70,184.69 318.97,203.78 328.95,231.00 335.99,250.22 340.20,281.13 343.27,302.00 347.52,330.81 353.11,359.58 359.42,388.00 363.38,405.82 368.46,423.69 376.76,440.00 379.82,446.03 385.70,455.44 393.00,456.52 398.02,457.26 403.34,453.13 407.00,450.19 416.13,442.86 427.64,426.97 434.33,417.00 445.78,399.93 459.42,377.01 467.00,358.00 471.41,346.95 475.26,335.03 474.99,323.00 474.53,303.15 463.27,290.24 443.00,290.00 423.60,289.78 420.78,293.48 404.00,298.00 Z" /></svg>
      </a>
            <a class="frame-button" href="https://www.linkedin.com/company/bertelsmann-foundation-north-america-inc." target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13-24 44-50 91-50 98 0 116 64 116 148v170h-96V478c0-36-2-82-51-82-50 0-57 39-57 79v154zM220 164c31 0 55 25 55 56s-24 56-55 56-56-25-56-56 25-56 56-56z"/></svg>
      </a>
        </div>
    </div>

    <div class="frame__top">

        <div class="frame__menu">
            <button class="frame-button frame__menu-trigger">menu</button>
        </div>

        <a href="/" class="frame__logo is-hidden"><svg version="1.1" id="bfna-logo" class="bfna-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 695.1 266.6" style="enable-background:new 0 0 695.1 266.6;" xml:space="preserve">
  <path class="st0" d="M62.2,76.5c0-13.7-8.1-24.4-22-26.6c7-4.3,12.4-11.8,12.4-23.3C52.6,10.7,41.8,0,23.3,0H0v106.3h29.2
    C48.4,106.3,62.2,95.1,62.2,76.5z M7,6.4h13.5c5.6,0,12.5,0.3,17.7,4.5c3.5,2.9,7.2,8.1,7.2,16.6c0,7.3-2.7,12.7-7,16.2
    c-4.6,3.8-9.1,4.5-14.5,4.5H7V6.4z M7,99.9V54.5h16.6c11.8,0,17.1,1.7,19.9,3c8,3.7,11.3,10.2,11.3,19.8c0,4.9-1.1,11.2-6.9,16.3
    c-7.2,6.4-15.9,6.4-23.1,6.4H7z"/>
  <path class="st0" d="M110.1,108c16.1,0,24.7-10.3,28.5-17.6l-5.4-3.2c-4.1,8.6-12.1,14.8-22.6,14.8c-13.7,0-25.8-10.8-25.8-27.4
    l55.6-0.1c0-20.7-13.2-34.7-30.8-34.7c-15.9,0-31.5,11.6-31.5,34.2C78.1,93,89.9,108,110.1,108z M109.6,46
    c12.9,0,22.5,9.7,24.1,22.6l-48.4-0.1C87,55.9,96.4,45.9,109.6,46z"/>
  <path class="st0" d="M165.6,106.3V71.4c0-8.1,0.2-25.5,13.2-25.5c2.9,0,4.1,0.8,4.8,1.3l3.1-5.8c-2.1-1.1-4.5-1.6-6.8-1.6
    c-7,0-12,4.3-14.3,9.9v-8.4h-6.4l0,65H165.6z"/>
  <polygon class="st0" points="201.1,106.3 207.5,106.3 207.5,47.3 218.8,47.3 218.8,41.3 207.5,41.3 207.5,18 201.1,18 201.1,41.3 
    193.9,41.3 193.9,47.3 201.1,47.3  "/>
  <path class="st0" d="M259.4,108c16.1,0,24.7-10.3,28.5-17.6l-5.4-3.2c-4.1,8.6-12.1,14.8-22.6,14.8c-13.7,0-25.8-10.8-25.8-27.4
    l55.6-0.1c0-20.7-13.2-34.7-30.7-34.7c-15.9,0-31.5,11.6-31.5,34.2C227.4,93,239.2,108,259.4,108z M258.9,45.9
    c12.9,0,22.5,9.7,24.1,22.7l-48.4-0.1C236.3,55.9,245.7,45.9,258.9,45.9z"/>
  <rect x="308.5" class="st0" width="6.4" height="106.3"/>
  <path class="st0" d="M353.6,102c-7.2,0-14-4.5-16.2-13.1l-6.2,1.9c2.7,10.8,11.6,17.2,22.5,17.2c10,0,21.2-5.9,21.2-20.7
    c0-3.7-0.6-7.2-3.3-10.5c-4.1-5.3-10.2-7-16.7-9.6c-6.4-2.5-11.5-4.6-11.5-11c0-4.8,3.7-10.4,11-10.4c4.9-0.1,9.4,2.8,11.3,7.3
    l5.4-2.8c-3-7-9.4-10.5-17-10.5c-9.9,0-17.4,6.9-17.4,16.7c0,3.1,1,6,2.9,8.5c2.9,3.8,7.6,5.9,14.2,8.6c9.9,4,14.5,6.7,14.5,14
    C368.1,96.1,361.9,102,353.6,102z"/>
  <path class="st0" d="M397.3,68.7c0-12.9,5.3-22.8,16.6-22.8c14,0,14.3,14.5,14.3,18.6v41.8h6.4V67.1c0-4,0.2-21.2,17.4-21.2
    c3.6-0.2,7.1,1.2,9.7,3.7c3.5,3.7,3.8,9.1,3.8,13.4v43.3h6.4V63c0-5.3-0.3-12.4-5.6-17.7c-2.9-2.9-7.5-5.4-14.7-5.4
    c-8.6,0-15.6,4-19.3,11.8c-1.3-3.3-5.4-11.8-18.2-11.8c-7-0.3-13.5,3.4-16.9,9.6v-8.1H391v65h6.3V68.7z"/>
  <path class="st0" d="M522.5,108.1c10.2,0.2,19.7-4.9,25.3-13.4v11.6h6.4v-65h-6.4v11.4c-6.2-8.8-15.1-12.8-25.3-12.8
    c-19,0-31.7,13.9-31.7,33.9C490.8,95.2,505.4,108.1,522.5,108.1z M522.8,45.9c11.2,0,25.3,8.1,25.3,27.4c0,15-8.9,28.7-25.2,28.7
    c-16.4,0-25.5-14-25.5-28.7C497.5,55.6,509.9,45.9,522.8,45.9z"/>
  <path class="st0" d="M583.5,72.5c0-6.4,0.6-12.4,3.5-17.5c2.4-4.3,7-9.1,15.9-9.1c7.8,0,11.3,4,12.8,6.4c2.4,3.7,2.5,8.6,2.5,13.1
    v41h6.4v-41c0-5.7-0.3-11.8-3.2-16.4c-1.4-2.2-6.4-9.1-18-9.1c-11,0-16.9,6.2-19.9,11.6V41.3h-6.4v65h6.4V72.5z"/>
  <path class="st0" d="M653.9,72.5c0-6.4,0.6-12.4,3.5-17.5c2.4-4.3,7-9.1,15.9-9.1c7.8,0,11.3,4,12.8,6.4c2.4,3.7,2.5,8.6,2.5,13.1
    v41h6.4v-41c0-5.7-0.3-11.8-3.2-16.4c-1.4-2.2-6.4-9.1-18-9.1c-11,0-16.9,6.2-19.9,11.6V41.3h-6.4l0,65h6.4V72.5z"/>
  <path class="st0" d="M329.9,162.6h-9.5v64.2h9.5c19.3,0,32.5-13.1,32.5-32.1C362.5,176.1,349.1,162.6,329.9,162.6z"/>
  <polygon class="st0" points="389.3,202.9 416.9,202.9 403.2,168.3  "/>
  <path class="st0" d="M543.6,161.6c-18.8,0-32.8,14.6-32.8,33.3c0,18.7,14,33.2,32.8,33.2s32.8-14.6,32.8-33.2h0
    C576.5,176.2,562.5,161.6,543.6,161.6z"/>
  <path class="st0" d="M106.8,161.6C88,161.6,74,176.2,74,194.9c0,18.7,14,33.2,32.8,33.2c18.8,0,32.8-14.6,32.8-33.2h0.1
    C139.6,176.2,125.6,161.6,106.8,161.6z"/>
  <path class="st0" d="M0,122.5v144.1h695.1V122.5H0z M61.3,162.6H36.5v26.5h24.1v4.4H36.5v37.8h-4.8v-73h29.6V162.6z M144.6,194.9
    c0,21-16.5,37.5-37.9,37.5c-21.3,0-37.9-16.5-37.9-37.5c0-20.9,17-37.9,37.9-37.9S144.6,174,144.6,194.9L144.6,194.9z M210.1,203.9
    c0,8-0.4,13.2-4.2,18.7c-5.5,8-14.1,9.8-20.7,9.8s-15.2-1.9-20.7-9.8c-3.7-5.5-4.2-10.7-4.2-18.7v-45.6h4.7v45.6
    c0,6.9,0.3,11.4,3.1,15.8c4.3,6.9,12.3,8.4,17,8.4c4.7,0,12.7-1.5,17-8.4c2.7-4.4,3.1-8.9,3.1-15.8v-45.7h4.8V203.9z M295.8,233.1
    L234.6,169v62.3l-4.9,0v-73.8l61.3,64.2v-63.4h4.8V233.1z M357,221.1c-9.2,9.2-20.5,10.2-26.9,10.2l-14.5,0v-73H330
    c6.5,0,17.7,1,26.9,10.2c7.8,7.8,10.5,18.4,10.5,26.4S364.8,213.3,357,221.1z M428.4,231.3l-9.7-24h-31.1l-9.7,24h-5.3l30.8-75.2
    l30.3,75.2H428.4z M473.8,162.6h-18.9v68.6H450v-68.6h-18.9v-4.4h42.7V162.6z M490,231.2h-4.8v-73h4.8V231.2z M581.5,194.9
    c0,21-16.5,37.5-37.9,37.5s-37.9-16.5-37.9-37.5c0-20.9,17-37.9,37.9-37.9S581.5,174,581.5,194.9L581.5,194.9z M663.3,233.1
    L602,169v62.3l-4.8,0v-73.8l61.3,64.2v-63.4h4.8V233.1z"/>
</svg>
</a>

        <nav class="frame__top-nav">
            <a class="frame-nav frame-nav--digital-world" href="#">Digital World</a>
            <a class="frame-nav frame-nav--future-leadership" href="#">Future Leadership</a>
            <a class="frame-nav frame-nav--democracy" href="#">Democracy</a>
            <a class="frame-nav frame-nav--politics-society" href="#">Politics & Society</a>
        </nav>

        <div class="frame__search" aria-hidden>
            <form action="" class="frame-search">
                <button class="frame-search__button frame-button frame-search__trigger">search</button>
                <input class="frame-search__field" type="text" placeholder="Search...">
                <input class="frame-search__submit" type="submit" value="Search">
            </form>
        </div>
    </div>
</div>

<div class="off-canvas">
    <button class="off-canvas__close"><i class="material-icons">close</i></button>

    <section class="off-canvas__col">
        <nav class="off-canvas__nav off-canvas--updates">
            <h2 class="off-canvas__heading">Updates</h2>
            <a href="#" class="off-canvas__item">Articles</a><br>
            <a href="#" class="off-canvas__item">Infographics</a><br>
            <a href="#" class="off-canvas__item">Videos</a><br>
        </nav>

        <nav class="off-canvas__nav off-canvas--about">
            <h2 class="off-canvas__heading">The Foundation</h2>
            <a href="#" class="off-canvas__item">About the Foundation</a><br>
            <a href="#" class="off-canvas__item">Board of Directors | Team</a><br>
            <a href="#" class="off-canvas__item">Bertelsmann Stiftung</a><br>
            <a href="#" class="off-canvas__item">Contact</a><br>
        </nav>
    </section>

    <section class="off-canvas__col off-canvas--right-col">
        <nav class="off-canvas__nav off-canvas--topics">
            <h2 class="off-canvas__heading">Topics</h2>
            <a href="#" class="off-canvas__item">Democracy</a><br>
            <a href="#" class="off-canvas__item">Digital World</a><br>
            <a href="#" class="off-canvas__item">Politics & Society</a><br>
        </nav>

        <nav class="off-canvas__nav off-canvas--archive">
            <a href="#" class="off-canvas__item">Archived Projects</a><br>
        </nav>
    </section>
</div>
 
<div class="frame">
  <div class="frame__left">
    <div class="frame__back">
      <button class="frame-button" onclick="history.back(-1)">arrow_back</button>
    </div>
    <nav class="frame__left-nav">
      <a class="frame-nav" href="#">Updates</a>
      <a class="frame-nav" href="#">About us</a>
    </nav>
    <div class="frame__social">
      <a class="frame-button" href="https://www.facebook.com/BertelsmannFoundation/" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M445 643h-90V419h-75v-87h75v-64c0-75 45-115 112-115 37 0 67 3 67 3v78h-46c-36 0-43 18-43 43v55h86l-11 87h-75v224z"/></svg>
      </a>
      <a class="frame-button" href="https://twitter.com/BertelsmannFdn" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/></svg>
      </a>
      <a class="frame-button" href="https://www.youtube.com/channel/UCZZdgI5F7KjUCW0fCKUOAAg" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 224c144 0 201 2 224 25 17 17 26 52.125 26 151s-9 134-26 151c-23 23-80 25-224 25s-201-2-224-25c-17-17-26-52.125-26-151s9-134 26-151c23-23 80-25 224-25zm-52 100v141l135-70z"/></svg>
      </a>
      <a class="frame-button" href="https://www.instagram.com/ber…annfoundation/?hl=en" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M400 309c-51 0-92 41-92 90s41 90 92 90 93-41 93-90-42-90-93-90zm178 56h-40c27 97-50 178-138 178s-164-82-137-178h-42v194c0 10 8 18 18 18h321c10 0 18-8 18-18V365zm-73-144c-11 0-21 10-21 21v49c0 11 10 21 21 21h52c11 0 21-10 21-21v-49c0-11-10-21-21-21h-52zm-276-51h342c32 0 59 27 59 59v342c0 32-27 59-59 59H229c-32 0-59-27-59-59V229c0-32 27-59 59-59z"/></svg>
      </a>
      <a class="frame-button" href="https://vimeo.com/bfna" target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M 404.00,298.00 405.51,288.24 414.18,267.17 418.75,258.00 426.47,242.53 436.78,226.29 449.04,214.04 474.66,188.41 508.59,178.59 544.00,179.00 567.25,179.28 591.19,187.76 604.30,208.00 618.93,230.58 618.30,257.27 618.00,283.00 617.64,313.26 597.15,357.83 582.28,384.00 561.90,419.85 538.74,452.51 513.42,485.00 491.27,513.43 467.93,541.12 441.00,565.16 420.57,583.41 398.29,600.31 372.00,609.00 357.54,613.78 341.75,616.09 327.00,611.25 303.39,603.50 285.32,572.74 276.00,551.00 276.00,551.00 269.08,534.00 269.08,534.00 269.08,534.00 257.58,492.00 257.58,492.00 257.58,492.00 237.15,417.00 237.15,417.00 237.15,417.00 224.33,371.00 224.33,371.00 218.79,354.01 212.93,335.98 203.00,321.00 198.94,314.87 192.35,306.77 185.00,304.65 176.55,302.21 160.03,315.31 153.00,320.00 150.27,321.82 144.31,326.73 141.04,325.70 137.95,324.74 129.77,313.12 127.35,310.00 125.54,307.66 120.30,301.33 119.36,299.00 117.32,293.96 122.75,290.88 126.00,287.93 126.00,287.93 152.00,264.84 152.00,264.84 175.59,243.77 198.64,220.94 225.00,203.33 238.72,194.17 254.00,185.18 271.00,185.00 301.70,184.69 318.97,203.78 328.95,231.00 335.99,250.22 340.20,281.13 343.27,302.00 347.52,330.81 353.11,359.58 359.42,388.00 363.38,405.82 368.46,423.69 376.76,440.00 379.82,446.03 385.70,455.44 393.00,456.52 398.02,457.26 403.34,453.13 407.00,450.19 416.13,442.86 427.64,426.97 434.33,417.00 445.78,399.93 459.42,377.01 467.00,358.00 471.41,346.95 475.26,335.03 474.99,323.00 474.53,303.15 463.27,290.24 443.00,290.00 423.60,289.78 420.78,293.48 404.00,298.00 Z" /></svg>
      </a>
      <a class="frame-button" href="https://www.linkedin.com/company/bertelsmann-foundation-north-america-inc." target="_blank">
        <svg role="img" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M268 629h-97V319h97v310zm157 0h-97V319h93v42h1c13-24 44-50 91-50 98 0 116 64 116 148v170h-96V478c0-36-2-82-51-82-50 0-57 39-57 79v154zM220 164c31 0 55 25 55 56s-24 56-55 56-56-25-56-56 25-56 56-56z"/></svg>
      </a>
    </div>
  </div>

  <div class="frame__top">
    
    <div class="frame__menu">
      <button class="frame-button frame__menu-trigger">menu</button>
    </div>    
    
    <a href="/" class="frame__logo is-hidden">{% render '@logo' %}</a>
    
    <nav class="frame__top-nav">
      <a class="frame-nav frame-nav--digital-world" href="#">Digital World</a>
      <a class="frame-nav frame-nav--future-leadership" href="#">Future Leadership</a>
      <a class="frame-nav frame-nav--democracy" href="#">Democracy</a>
      <a class="frame-nav frame-nav--politics-society" href="#">Politics & Society</a>
    </nav>

    <div class="frame__search" aria-hidden>
      <form action="" class="frame-search">
        <button class="frame-search__button frame-button frame-search__trigger">search</button>
        <input class="frame-search__field" type="text" placeholder="Search...">
        <input class="frame-search__submit" type="submit" value="Search">
      </form>
    </div>
  </div>
</div>

{% render '@off-canvas' %}
 
/* No context defined for this component. */
  • Content: 
    document.querySelectorAll('.frame__menu-trigger, .off-canvas__close').forEach(function(el) {
  el.onclick = function(){
    const offCanvasMenu = document.querySelector('.off-canvas');
    const frame = document.querySelector('.frame');
    offCanvasMenu.classList.toggle('off-canvas--expanded');
    if (offCanvasMenu.hasAttribute('aria-hidden')) {
      frame.classList.remove('off-canvas--expanded');
      offCanvasMenu.removeAttribute('aria-hidden');
    } else {
      offCanvasMenu.setAttribute('aria-hidden', '');
      frame.classList.add('off-canvas--expanded');
    }
  };
});

const searchTrigger = document.querySelector('.frame-search__trigger')

if (searchTrigger) {
  searchTrigger.onclick = function() {
    event.preventDefault()
    const frameSearch = document.querySelector('.frame__search');
    const frame = document.querySelector('.frame');
    if (frameSearch.hasAttribute('aria-hidden')) {
      frameSearch.removeAttribute('aria-hidden')
      frameSearch.classList.add('frame--expanded');
      frame.classList.add('search--expanded');
    } else {
      frameSearch.setAttribute('aria-hidden', '')
      frameSearch.classList.remove('frame--expanded');
      frame.classList.remove('search--expanded');
    }
  }
};

let scrollPos = 272;
const logo = document.querySelector('.frame__logo');
window.addEventListener('scroll', function() {
    if(window.scrollY > scrollPos) {
      logo.classList.add('is-visible'); 
      logo.classList.remove('is-hidden');
    } else {
      logo.classList.add('is-hidden');
      logo.classList.remove('is-visible');
    }
});
  • URL: /components/raw/frame/frame.js
  • Filesystem Path: src/components/04-modules/frame/frame.js
  • Size: 1.6 KB
  • Content: 
    .frame {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100vh;
  pointer-events: none;

  &__top, 
  &__left { 
    pointer-events: all; 
    background-color: hsla(var(--white-hsl), .9);
  }

  &__top {
    position: absolute;
    height: 72px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid hsla(var(--navy-hsl), .15);
  }

  &__left {
    display: flex;
    @media screen and (max-height: 500px) { display: none; }
    @media screen and (max-width: 640px) { display: none; }
    position: absolute;
    flex-direction: column;
    bottom: 0;
    width: 72px;
    height: 100vh;
    border-right: 1px solid hsla(var(--navy-hsl), .15);
  }

  &__menu,
  &__search,
  &__back {
    box-sizing: border-box;
    height: 72px;
    width: 72px;
  }

  &__menu {
    border-right: 1px solid hsla(var(--navy-hsl), .15);
    width: 73px;
  }

  &__search { 
    border-left: 1px solid hsla(var(--navy-hsl), .15);
    overflow: hidden;
    text-align: right;
    width: 74px;
    transition: all .3s ease;
  }

  &__search.frame--expanded { width: 400px; }

  &__left-nav {
    flex: 1;
    display: flex;
    align-items: center;
    transform: rotate(-90deg);
    margin-bottom: -260%;
    pointer-events: none;

    .frame__nav-item { padding: 6px 20px 11px; }
    .frame__nav-item + .frame__nav-item { margin-left: 32px; }
  }

  &__back { margin-top: 73px; }

  &__logo {
    padding: 12px 0 2px 72px;
    display: inline-block;
    transition: all .3s ease;
    > svg { width: 112px; }

    @media screen and (max-width: 1150px) { 
      flex: 1;
      padding: 4px 0;
      text-align: center;
    }
  }

  &__logo.is-hidden { margin-top: -300px; }
  &__logo.is-visible { margin-top: 0; }

  &__top-nav {
    flex: 1;
    text-align: right;
    overflow: hidden;
    @media screen and (max-width: 1150px) { display: none; }
  }

  &__social {
    @media screen and (max-height: 840px) { display: none; }
    a svg { 
      fill: hsla(var(--navy-hsl), .5); 
      transform: scale(1.15);
    }
    a:hover svg { fill: hsla(var(--navy-hsl), 1); }
  }
}
  • URL: /components/raw/frame/frame.scss
  • Filesystem Path: src/components/04-modules/frame/frame.scss
  • Size: 2.1 KB

There are no notes for this item.