Commit f6e5e108 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

header & navigation

parent 469bf2a8
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384.2 42.2" style="enable-background:new 0 0 384.2 42.2;" xml:space="preserve">
<style type="text/css">
.lb-bg{opacity:0.9;fill:#65C4EA;enable-background:new;}
.db-bg{opacity:0.9;fill:#0F84BD;enable-background:new;}
.red-bg{fill:#F30836;}
</style>
<g>
<g>
<rect x="318.5" y="34.9" class="lb-bg" width="27.4" height="7.2"/>
<rect x="318.5" y="0" class="lb-bg" width="26.9" height="7.2"/>
<rect x="128.6" y="34.9" class="lb-bg" width="27.4" height="7.2"/>
<rect x="128.6" y="0" class="lb-bg" width="26.9" height="7.2"/>
<polygon class="lb-bg" points="366.8,0 359.4,0 368.9,42 376.4,42 "/>
<path class="lb-bg" d="M299.5,0h-17.3v7.2h16.5c3.8,0,6.3,2.2,6.3,5.8v0.6c0,3.6-2.6,5.8-6.3,5.8h-16.5v7.2h17.3
c7.7,0,13.4-5,13.4-12.9v-0.8C312.9,5.1,307.4,0,299.5,0z"/>
<polygon class="lb-bg" points="106.3,20.7 124,0 113.7,0 96.7,20.8 114,42 124.4,42 "/>
<polygon class="lb-bg" points="75,0 67.4,0 77.9,42 86,42 "/>
<polygon class="lb-bg" points="14.8,0 7.7,0 16.1,42 23.1,42 "/>
<rect x="37.4" y="0" class="lb-bg" width="7.7" height="42"/>
<path class="lb-bg" d="M262-0.5V7c3.4,1.3,5.4,4.5,5.4,8.8v10.6c0,4.3-2,7.5-5.4,8.8v7.5c8.2-1.4,13.3-7.1,13.3-16.5V16
C275.3,6.6,270.2,0.9,262-0.5z"/>
<rect x="202.7" y="0" class="lb-bg" width="7.9" height="42"/>
<rect x="282.2" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="376.2" y="0" class="db-bg" width="7.8" height="42"/>
<rect x="351.7" y="0" class="db-bg" width="7.8" height="42"/>
<rect x="318.5" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="177.1" y="0" class="db-bg" width="7.9" height="42"/>
<polygon class="db-bg" points="61.2,0 68.8,0 58.3,42 50.2,42 "/>
<rect x="0.1" y="0" class="db-bg" width="7.7" height="42"/>
<path class="db-bg" d="M248.6,26.3V15.8c0-4.3,2-7.5,5.4-8.8v-7.4c-8.2,1.4-13.3,7.1-13.3,16.5v10.1c0,9.4,5.1,15.1,13.3,16.5v-7.5
C250.6,33.8,248.6,30.6,248.6,26.3z"/>
<polygon class="db-bg" points="30.4,0 37.5,0 29.1,42 22,42 "/>
<rect x="91.1" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="128.6" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="318.5" y="17.3" class="red-bg" width="25.3" height="7.2"/>
<ellipse class="red-bg" cx="258" cy="21" rx="4.9" ry="4.8"/>
<polygon class="red-bg" points="30.4,0 29,7.2 45.1,7.2 45.1,0 "/>
<polygon class="red-bg" points="61.2,0 59.3,7.2 76.9,7.2 75,0 "/>
<polygon class="red-bg" points="54.5,25.5 52.6,32.8 83.6,32.8 81.7,25.5 "/>
<polygon class="red-bg" points="16.2,7.2 14.8,0 0.1,0 0.1,7.2 "/>
<polygon class="red-bg" points="14.6,34.9 16.1,42 29.2,42 30.5,34.9 "/>
<polygon class="red-bg" points="368.4,7.2 366.8,0 351.7,0 351.7,7.2 "/>
<polygon class="red-bg" points="367.3,34.9 368.9,42 384,42 384,34.9 "/>
<rect x="91.1" y="17.3" class="red-bg" width="15.2" height="7.2"/>
<rect x="128.6" y="17.3" class="red-bg" width="25.3" height="7.2"/>
<rect x="190.4" y="0" class="red-bg" width="32.4" height="7.2"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 83"><g style="isolation:isolate"><g id="Layer_1" data-name="Layer 1"><rect x="338.35" y="55.35" width="27.36" height="7.17" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="338.35" y="20.53" width="26.94" height="7.17" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="148.52" y="55.35" width="27.36" height="7.17" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="148.52" y="20.53" width="26.94" height="7.17" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><polygon points="386.65 20.52 379.27 20.52 388.79 62.52 396.27 62.52 386.65 20.52" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><path d="M319.4,20.52H302.12v7.19h16.5c3.78,0,6.3,2.22,6.3,5.82v.6c0,3.6-2.59,5.82-6.3,5.82h-16.5v7.2H319.4c7.68,0,13.43-5,13.43-12.9v-.84C332.83,25.56,327.31,20.52,319.4,20.52Z" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><polygon points="126.2 41.22 143.87 20.52 133.58 20.52 116.55 41.33 133.88 62.52 144.32 62.52 126.2 41.22" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><polygon points="94.89 20.52 87.29 20.52 97.77 62.52 105.93 62.52 94.89 20.52" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><polygon points="34.68 20.52 27.59 20.52 35.94 62.52 43.02 62.52 34.68 20.52" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="57.32" y="20.52" width="7.68" height="42" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><path d="M281.84,20v7.44c3.44,1.32,5.4,4.49,5.4,8.8V46.8c0,4.32-2,7.48-5.4,8.8v7.45c8.24-1.36,13.32-7.11,13.32-16.49V36.48C295.16,27.11,290.08,21.35,281.84,20Z" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="222.56" y="20.53" width="7.92" height="42" fill="#65c4ea" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="302.12" y="20.53" width="7.92" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="396.07" y="20.52" width="7.8" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="371.59" y="20.52" width="7.8" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="338.35" y="20.53" width="7.92" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="197" y="20.53" width="7.92" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><polygon points="81.08 20.52 88.68 20.52 78.2 62.52 70.04 62.52 81.08 20.52" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="20" y="20.52" width="7.68" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><path d="M268.52,46.8V36.24c0-4.31,2-7.48,5.4-8.8V20c-8.25,1.35-13.32,7.11-13.32,16.48V46.56c0,9.38,5.07,15.13,13.32,16.49V55.6C270.47,54.28,268.52,51.12,268.52,46.8Z" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><polygon points="50.26 20.52 57.35 20.52 49 62.52 41.92 62.52 50.26 20.52" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="110.96" y="20.53" width="7.92" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="148.52" y="20.53" width="7.92" height="42" fill="#0f84bd" opacity="0.9" style="mix-blend-mode:multiply"/><rect x="338.35" y="37.74" width="25.34" height="7.17" fill="#f30836" style="mix-blend-mode:multiply"/><ellipse cx="277.88" cy="41.52" rx="4.86" ry="4.8" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="50.3 20.52 48.84 27.69 65 27.69 65 20.52 50.3 20.52" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="81.08 20.52 79.19 27.69 96.77 27.69 94.88 20.52 81.08 20.52" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="74.39 45.96 72.47 53.28 103.49 53.28 101.56 45.96 74.39 45.96" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="36.1 27.69 34.7 20.52 20 20.52 20 27.69 36.1 27.69" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="34.51 55.35 35.96 62.52 49.04 62.52 50.42 55.35 34.51 55.35" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="388.3 27.72 386.65 20.52 371.6 20.52 371.6 27.72 388.3 27.72" fill="#f30836" style="mix-blend-mode:multiply"/><polygon points="387.16 55.35 388.81 62.52 403.87 62.52 403.87 55.35 387.16 55.35" fill="#f30836" style="mix-blend-mode:multiply"/><rect x="110.96" y="37.74" width="15.22" height="7.17" fill="#f30836" style="mix-blend-mode:multiply"/><rect x="148.52" y="37.74" width="25.34" height="7.17" fill="#f30836" style="mix-blend-mode:multiply"/><rect x="210.32" y="20.53" width="32.4" height="7.17" fill="#f30836" style="mix-blend-mode:multiply"/></g></g></svg>
\ No newline at end of file
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384.2 42.2" style="enable-background:new 0 0 384.2 42.2;" xml:space="preserve">
<style type="text/css">
.lb-bg{opacity:0.9;fill:#65C4EA;enable-background:new;}
.db-bg{opacity:0.9;fill:#0F84BD;enable-background:new;}
.red-bg{fill:#F30836;}
</style>
<g>
<g>
<rect x="318.5" y="34.9" class="lb-bg" width="27.4" height="7.2"/>
<rect x="318.5" y="0" class="lb-bg" width="26.9" height="7.2"/>
<rect x="128.6" y="34.9" class="lb-bg" width="27.4" height="7.2"/>
<rect x="128.6" y="0" class="lb-bg" width="26.9" height="7.2"/>
<polygon class="lb-bg" points="366.8,0 359.4,0 368.9,42 376.4,42 "/>
<path class="lb-bg" d="M299.5,0h-17.3v7.2h16.5c3.8,0,6.3,2.2,6.3,5.8v0.6c0,3.6-2.6,5.8-6.3,5.8h-16.5v7.2h17.3
c7.7,0,13.4-5,13.4-12.9v-0.8C312.9,5.1,307.4,0,299.5,0z"/>
<polygon class="lb-bg" points="106.3,20.7 124,0 113.7,0 96.7,20.8 114,42 124.4,42 "/>
<polygon class="lb-bg" points="75,0 67.4,0 77.9,42 86,42 "/>
<polygon class="lb-bg" points="14.8,0 7.7,0 16.1,42 23.1,42 "/>
<rect x="37.4" y="0" class="lb-bg" width="7.7" height="42"/>
<path class="lb-bg" d="M262-0.5V7c3.4,1.3,5.4,4.5,5.4,8.8v10.6c0,4.3-2,7.5-5.4,8.8v7.5c8.2-1.4,13.3-7.1,13.3-16.5V16
C275.3,6.6,270.2,0.9,262-0.5z"/>
<rect x="202.7" y="0" class="lb-bg" width="7.9" height="42"/>
<rect x="282.2" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="376.2" y="0" class="db-bg" width="7.8" height="42"/>
<rect x="351.7" y="0" class="db-bg" width="7.8" height="42"/>
<rect x="318.5" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="177.1" y="0" class="db-bg" width="7.9" height="42"/>
<polygon class="db-bg" points="61.2,0 68.8,0 58.3,42 50.2,42 "/>
<rect x="0.1" y="0" class="db-bg" width="7.7" height="42"/>
<path class="db-bg" d="M248.6,26.3V15.8c0-4.3,2-7.5,5.4-8.8v-7.4c-8.2,1.4-13.3,7.1-13.3,16.5v10.1c0,9.4,5.1,15.1,13.3,16.5v-7.5
C250.6,33.8,248.6,30.6,248.6,26.3z"/>
<polygon class="db-bg" points="30.4,0 37.5,0 29.1,42 22,42 "/>
<rect x="91.1" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="128.6" y="0" class="db-bg" width="7.9" height="42"/>
<rect x="318.5" y="17.3" class="red-bg" width="25.3" height="7.2"/>
<ellipse class="red-bg" cx="258" cy="21" rx="4.9" ry="4.8"/>
<polygon class="red-bg" points="30.4,0 29,7.2 45.1,7.2 45.1,0 "/>
<polygon class="red-bg" points="61.2,0 59.3,7.2 76.9,7.2 75,0 "/>
<polygon class="red-bg" points="54.5,25.5 52.6,32.8 83.6,32.8 81.7,25.5 "/>
<polygon class="red-bg" points="16.2,7.2 14.8,0 0.1,0 0.1,7.2 "/>
<polygon class="red-bg" points="14.6,34.9 16.1,42 29.2,42 30.5,34.9 "/>
<polygon class="red-bg" points="368.4,7.2 366.8,0 351.7,0 351.7,7.2 "/>
<polygon class="red-bg" points="367.3,34.9 368.9,42 384,42 384,34.9 "/>
<rect x="91.1" y="17.3" class="red-bg" width="15.2" height="7.2"/>
<rect x="128.6" y="17.3" class="red-bg" width="25.3" height="7.2"/>
<rect x="190.4" y="0" class="red-bg" width="32.4" height="7.2"/>
</g>
</g>
</svg>
<svg class="logo logo--large" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384.2 42.2"xml:space="preserve">
<g class="svg-letters">
<rect x="318.5" y="34.9" class="svg-blue-1" width="27.4" height="7.2"/>
<rect x="318.5" y="0" class="svg-blue-1" width="26.9" height="7.2"/>
<rect x="128.6" y="34.9" class="svg-blue-1" width="27.4" height="7.2"/>
<rect x="128.6" y="0" class="svg-blue-1" width="26.9" height="7.2"/>
<polygon class="svg-blue-1" points="366.8,0 359.4,0 368.9,42 376.4,42 "/>
<path class="svg-blue-1" d="M299.5,0h-17.3v7.2h16.5c3.8,0,6.3,2.2,6.3,5.8v0.6c0,3.6-2.6,5.8-6.3,5.8h-16.5v7.2h17.3
c7.7,0,13.4-5,13.4-12.9v-0.8C312.9,5.1,307.4,0,299.5,0z"/>
<polygon class="svg-blue-1" points="106.3,20.7 124,0 113.7,0 96.7,20.8 114,42 124.4,42 "/>
<polygon class="svg-blue-1" points="75,0 67.4,0 77.9,42 86,42 "/>
<path class="svg-blue-1" d="M262-0.5V7c3.4,1.3,5.4,4.5,5.4,8.8v10.6c0,4.3-2,7.5-5.4,8.8v7.5c8.2-1.4,13.3-7.1,13.3-16.5V16
C275.3,6.6,270.2,0.9,262-0.5z"/>
<rect x="202.7" y="0" class="svg-blue-1" width="7.9" height="42"/>
<rect x="282.2" y="0" class="svg-blue-2" width="7.9" height="42"/>
<rect x="376.2" y="0" class="svg-blue-2" width="7.8" height="42"/>
<rect x="351.7" y="0" class="svg-blue-2" width="7.8" height="42"/>
<rect x="318.5" y="0" class="svg-blue-2" width="7.9" height="42"/>
<rect x="177.1" y="0" class="svg-blue-2" width="7.9" height="42"/>
<polygon class="svg-blue-2" points="61.2,0 68.8,0 58.3,42 50.2,42 "/>
<path class="svg-blue-2" d="M248.6,26.3V15.8c0-4.3,2-7.5,5.4-8.8v-7.4c-8.2,1.4-13.3,7.1-13.3,16.5v10.1c0,9.4,5.1,15.1,13.3,16.5v-7.5
C250.6,33.8,248.6,30.6,248.6,26.3z"/>
<rect x="91.1" y="0" class="svg-blue-2" width="7.9" height="42"/>
<rect x="128.6" y="0" class="svg-blue-2" width="7.9" height="42"/>
<rect x="318.5" y="17.3" class="svg-red" width="25.3" height="7.2"/>
<ellipse class="svg-red" cx="258" cy="21" rx="4.9" ry="4.8"/>
<polygon class="svg-red" points="61.2,0 59.3,7.2 76.9,7.2 75,0 "/>
<polygon class="svg-red" points="54.5,25.5 52.6,32.8 83.6,32.8 81.7,25.5 "/>
<polygon class="svg-red" points="368.4,7.2 366.8,0 351.7,0 351.7,7.2 "/>
<polygon class="svg-red" points="367.3,34.9 368.9,42 384,42 384,34.9 "/>
<rect x="91.1" y="17.3" class="svg-red" width="15.2" height="7.2"/>
<rect x="128.6" y="17.3" class="svg-red" width="25.3" height="7.2"/>
<rect x="190.4" y="0" class="svg-red" width="32.4" height="7.2"/>
</g>
</svg>
<svg class="logo logo--small" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 118.8 42.4" xml:space="preserve">
<g class="svg-text">
<rect x="71.7" y="38.1" class="svg-blue-1" width="26.2" height="2.4"/>
<path d="M53.2,7.3h2.4v1h0.3c0.5-0.8,1.4-1.2,2.3-1.1c1.1-0.1,2.1,0.5,2.6,1.4h0.3c0.5-0.9,1.5-1.5,2.6-1.4c1.7-0.1,3.1,1.2,3.2,2.8
c0,0.2,0,0.4,0,0.6v6.2h-2.4v-6c0.1-0.8-0.4-1.5-1.2-1.6c-0.1,0-0.2,0-0.3,0c-1.1,0-1.7,0.7-1.7,2v5.6h-2.4v-6
c0.1-0.8-0.5-1.5-1.2-1.6c-0.1,0-0.2,0-0.3,0c-1.1,0-1.7,0.7-1.7,2v5.6h-2.4V7.3z"/>
<path d="M68.8,14c0-1.9,1.5-2.9,3.7-2.9H75v-0.5C75,9.6,74.5,9,73.3,9c-0.9-0.1-1.8,0.5-1.9,1.5l-2.2-0.7c0.5-1.4,1.7-2.7,4.1-2.7
s4,1.3,4,3.6v3.5c0,0.4,0.2,0.6,0.5,0.6h0.8v2H77c-0.9,0-1.6-0.5-1.6-1.3l0,0H75C74.9,16,74.3,17,72.3,17S68.8,15.9,68.8,14z M75,13
v-0.2h-2.4c-0.9,0-1.4,0.4-1.4,1.1s0.5,1.2,1.6,1.2c1.1,0.1,2.1-0.7,2.3-1.8C75,13.2,75,13.1,75,13L75,13z"/>
<path d="M80.4,3.5h2.4v7.3h0.3l3.1-3.5h3.1L85,11.9l4.5,4.9h-3.1L83.1,13h-0.3v3.7h-2.4V3.5z"/>
<path d="M90,12.2V12c-0.2-2.5,1.7-4.7,4.1-4.9c0.2,0,0.4,0,0.6,0c2.8,0,4.6,2,4.6,4.9v0.8h-6.9c0.1,1.3,1.1,2.2,2.4,2.2c0,0,0,0,0,0
c1,0.1,1.9-0.5,2.2-1.4l2,1c-0.8,1.6-2.5,2.6-4.2,2.5c-2.5,0.1-4.6-1.8-4.8-4.3C90,12.6,90,12.4,90,12.2z M96.9,11
c-0.1-1.1-1.1-1.9-2.2-1.8c-1.1-0.1-2.1,0.7-2.2,1.8L96.9,11z"/>
<path d="M105.9,4.7c0-0.8,0.6-1.6,1.5-1.6c0.8,0,1.6,0.6,1.6,1.5c0,0.8-0.6,1.6-1.5,1.6c0,0,0,0-0.1,0C106.7,6.2,106,5.6,105.9,4.7
C105.9,4.7,105.9,4.7,105.9,4.7z M106.3,7.3h2.4v9.4h-2.4V7.3z"/>
<path d="M112.9,14.6V9.3h-2.3v-2h2.3V4.4h2.4v2.9h2.6v2h-2.6v4.9c0,0.4,0.2,0.6,0.5,0.6h1.8v2H115c-1.1,0.1-2-0.8-2.1-1.9
C112.9,14.8,112.9,14.7,112.9,14.6z"/>
<path d="M52.7,30.5v-0.3c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9v0.3c0,2.7-2.2,4.9-4.9,4.9S52.7,33.2,52.7,30.5L52.7,30.5z
M60.2,30.4v-0.2c0.1-1.4-1-2.6-2.4-2.7s-2.6,1-2.7,2.4c0,0.1,0,0.2,0,0.3v0.2c-0.1,1.4,1,2.6,2.4,2.7s2.6-1,2.7-2.4
C60.2,30.7,60.2,30.6,60.2,30.4z"/>
<path d="M64.8,25.6h2.4v1.1h0.3c0.6-1,1.8-1.6,3-1.4c2.3,0,4.3,1.8,4.3,4.8v0.3c0,3.1-2,4.8-4.3,4.8c-1.1,0.1-2.3-0.4-2.9-1.3h-0.4
v4.9h-2.4L64.8,25.6z M72.3,30.4v-0.2c0.1-1.4-1-2.7-2.4-2.7c-1.4-0.1-2.7,1-2.7,2.4c0,0.1,0,0.2,0,0.3v0.2c-0.1,1.4,1,2.7,2.4,2.7
c1.4,0.1,2.7-1,2.7-2.4C72.3,30.7,72.3,30.6,72.3,30.4z"/>
<path d="M76.4,30.5v-0.2c-0.2-2.5,1.6-4.7,4.1-4.9c0.2,0,0.4,0,0.6,0c2.8,0,4.6,2,4.6,4.9V31h-6.9c0,1.3,1.1,2.2,2.3,2.2
c0,0,0,0,0,0c1,0.1,1.9-0.5,2.2-1.4l1.9,1c-0.8,1.6-2.5,2.6-4.2,2.5c-2.5,0.1-4.6-1.8-4.7-4.3C76.4,30.8,76.4,30.6,76.4,30.5z
M83.3,29.3c-0.1-1.1-1-1.9-2.1-1.8c-1.1-0.1-2.1,0.7-2.2,1.8H83.3z"/>
<path d="M87.9,25.6h2.3v1.2h0.3c0.6-1,1.6-1.5,2.8-1.4c2,0,3.7,1.6,3.7,3.5c0,0.2,0,0.3,0,0.5v5.6h-2.4v-5.5c0-1.4-0.7-2.1-2-2.1
c-1.5,0-2.3,1-2.3,2.8v4.8h-2.4V25.6z"/>
<rect x="54.1" y="38.1" class="svg-blue-1" width="9.2" height="2.4"/>
<rect x="53.1" y="37.1" class="svg-red" width="9.2" height="2.4"/>
<rect x="70.7" y="37.1" class="svg-red" width="26.2" height="2.4"/>
<rect x="54.1" y="19.8" class="svg-blue-1" width="64.5" height="2.4"/>
<rect x="53.1" y="18.8" class="svg-red" width="64.5" height="2.4"/>
</g>
<g class="svg-m">
<rect x="0.2" y="0.2" fill="#FFF" width="50" height="42"/>
<rect x="0.2" y="0.2" class="svg-blue-2" width="7.7" height="42"/>
<polygon class="svg-blue-2" points="30.4,0.2 37.5,0.2 29.2,42.2 22.1,42.2 "/>
<polygon class="svg-blue-1" points="14.9,0.2 7.8,0.2 16.1,42.2 23.2,42.2 "/>
<rect x="37.5" y="0.2" class="svg-blue-1" width="7.7" height="42"/>
<polygon class="svg-red" points="30.5,0.2 29,7.4 36.4,7.4 37.5,7.4 45.2,7.4 45.2,0.2 "/>
<polygon class="svg-red" points="8.9,7.4 16.3,7.4 14.9,0.2 0.2,0.2 0.2,7.4 7.9,7.4 "/>
<polygon class="svg-red" points="14.7,35 16.1,42.2 29.2,42.2 30.6,35 "/>
</g>
</svg>
(function($) {
$(document).ready(function () {
// header scrolling class
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > 200) {
$('.site-header').addClass('site-header--scrolling');
} else {
$('.site-header').removeClass('site-header--scrolling');
}
});
// hamburger menu
$('.js-toggle-hamburger').click(function() {
$(this).toggleClass('hamburger--active');
$('.site-header').toggleClass('site-header--nav-active');
$('.navigation').toggleClass('navigation--shown');
});
// add white spans to letters below the baseline (to avoid overlapping the coloured bars)
function descenderSpan(elem) {
var descenders = {"g": true, "j": true, "p": true, "q": true, "y": true};
var textNodes = elem.html().split('');
i = 0;
for (i = 0; i < textNodes.length; i += 1) {
if (descenders[textNodes[i]]) {
textNodes[i] = '<span class="descender descender--' + textNodes[i] + '">' + textNodes[i] + '</span>';
}
}
elem.html(textNodes.join(''));
}
$('.menu-item a').each(function() {
descenderSpan($(this));
});
// add little arrow behind Open Schooling Navigator link
$('.menu-item.osn a').append('<span class="arrow">↗</span>');
});
})(jQuery);
\ No newline at end of file
This diff is collapsed.
!function(e){e(document).ready(function(){function s(e){var s={g:!0,j:!0,p:!0,q:!0,y:!0},n=e.html().split("");for(i=0,i=0;i<n.length;i+=1)s[n[i]]&&(n[i]='<span class="descender descender--'+n[i]+'">'+n[i]+"</span>");e.html(n.join(""))}e(window).scroll(function(i){e(window).scrollTop()>200?e(".site-header").addClass("site-header--scrolling"):e(".site-header").removeClass("site-header--scrolling")}),e(".js-toggle-hamburger").click(function(){e(this).toggleClass("hamburger--active"),e(".site-header").toggleClass("site-header--nav-active"),e(".navigation").toggleClass("navigation--shown")}),e(".menu-item a").each(function(){s(e(this))}),e(".menu-item.osn a").append('<span class="arrow">↗</span>')})}(jQuery);
\ No newline at end of file
......@@ -41,4 +41,60 @@
transform: translate(4px,4px);
background: $color2;
}
}
@mixin colourBox($color, $rotation) {
color: white;
padding: 30px;
position: relative;
* {
color: white;
position: relative;
}
&:before {
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
transform: rotate($rotation);
background: $color;
}
}
@mixin stackedColourBox($color1, $rotation1, $color2, $rotation2) {
color: white;
padding: 30px;
position: relative;
* {
color: white;
position: relative;
}
&:before, &:after {
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
mix-blend-mode: multiply;
}
&:before {
transform: scaleX(0.99) rotate($rotation1);
background: $color1;
}
&:after {
transform: rotate($rotation2);
background: $color2;
}
}
\ No newline at end of file
......@@ -468,27 +468,13 @@ table {
/* Links
--------------------------------------------- */
a {
color: #4169e1;
}
a:visited {
color: #800080;
}
a,
a:visited,
a:hover,
a:focus,
a:active {
color: #191970;
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
color: #000;
outline: none;
}
/* Forms
......
.svg-blue-1 {
fill: $lightblue;
opacity: 0.9;
}
.svg-blue-2 {
fill: $blue;
opacity: 0.9;
}
.svg-red {
fill: $red;
mix-blend-mode: multiply;
}
\ No newline at end of file
......@@ -15,6 +15,32 @@ a {
color: black;
}
span.descender {
position: relative;
&:after {
z-index: -1;
background: white;
content: " ";
bottom: -2px;
left: -2px;
right: -2px;
top: 10px;
position: absolute;
display: block;
}
&--p:after {
right: 40%;
}
&--q:after {
left: 40%;
}
&--j:after {
left: -5px;
}
}
// Importing webfonts
@font-face {
......
......@@ -10,6 +10,7 @@ $bg-yellow: #F2E1B6;
$green: #06C770;
$bg-green: #7CE0B0;
$blue: #0F84BD;
$lightblue: #65C4EA;
$bg-blue: #65C4EA;
$purple: #6217C5;
$bg-purple: #B383FF;
......@@ -24,8 +25,10 @@ $xlarge: 1200px;
// Sizes
$container-width: 1200px;
$container-width-small: 800px;
$mobile-header-height: 60px;
$desktop-header-height: 75px;
$mobile-header-height: 80px;
$desktop-header-height: 80px;
// Z-indexes:
$z-header: 1000;
$z-nav: 1001;
$z-hamburger: 1002;
@import "variables";
@import "normalize";
@import "mixins";
@import "typography";
\ No newline at end of file
@import "typography";
@import "svg";
\ No newline at end of file
......@@ -10,30 +10,116 @@
align-items: center;
z-index: $z-header;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
transition: all 0.25s ease;
@media only screen and (min-width: $large) {
padding: 15px;
padding: 9px;
}
body.admin-bar & {
top: 45px;
@media only screen and (min-width: $large) {
&--scrolling {
top: 0;
}
@media only screen and (min-width: $medium) {
top: 32px;
}
}
&--scrolling {
padding: 0 10px;
@media only screen and (min-width: $large) {
padding: 4px 9px;
}
// Logo switch animation
@media only screen and (min-width: $large) {
svg.logo--small g.svg-text {
transform: translateX(0%);
transition: all 0.25s ease-out 0.35s;
}
svg.logo--large g.svg-letters {
opacity: 0;
// transform: translateX(-100%);
transition: all 0.25s ease-out;
}
}
}
&--nav-active {
box-shadow: none;
background: transparent;
svg.logo {
opacity: 0;
}
}
.site-branding {
flex: 0 1 auto;
flex: 1;
a {
display: block;
padding: 10px;
height: 42px;
width: 118px;
position: relative;
@media only screen and (min-width: $medium) {
width: 375px;
}
}
img {
svg {
width: 100%;
height: auto;
max-width: 350px;
position: absolute;
left: 0;
top: 0;
}
@media only screen and (min-width: $large) {
flex: 0 0 350px;
}
}
svg.logo {
transition: all 0.25s ease-out;
height: 42px;
overflow: hidden;
.svg-m {
background: white;
}
&--small {
width: 118px;
@media only screen and (min-width: $medium) {
.svg-text {
transition: all 0.45s ease-out 0.25s;
transform: translateX(-100%);
}
}
}
&--large {
display: none;
@media only screen and (min-width: $medium) {
display: block;
width: 375px;
.svg-letters {
transition: all 0.35s ease 0.5s;
opacity: 1;
// transform: translateX(0%);
}
}
}
}
}
\ No newline at end of file
.navigation {
display: flex;
flex-basis: wrap;
justify-content: flex-end;
flex: 1;
position: fixed;
background: white;
top: 0;
right: 0;
transition: all 0.25s ease;
z-index: $z-nav;
// Hamburger menu styles
@media only screen and (max-width: $large - 1px) {
padding: 60px 20px 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.16);
width: 280px;
opacity: 0;