Add tall header variant
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Luca 2022-07-11 00:20:46 +02:00
parent 34a662169d
commit f1cb0acad7
3 changed files with 237 additions and 3 deletions

View File

@ -1 +1,9 @@
$header-height: 150px; //*
$header-height: 150px;
$header-spacing: 150px;
$header-variant: header;
/*/
$header-height: 1000px;
$header-spacing: 300px;
$header-variant: header-tall;
//*/

View File

@ -70,11 +70,11 @@ header {
} }
@media screen and (min-width: $small) { @media screen and (min-width: $small) {
margin-top: $header-height; margin-top: $header-spacing;
padding-top: 0.5rem; padding-top: 0.5rem;
&::before { &::before {
background: url(/header.svg) 50% 0% / auto $header-height no-repeat; background: url(/#{$header-variant}.svg) 50% 0% / auto $header-height no-repeat;
content: ''; content: '';
display: block; display: block;
height: $header-height; height: $header-height;
@ -82,6 +82,7 @@ header {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: -1;
} }
} }
} }

225
static/header-tall.svg Normal file
View File

@ -0,0 +1,225 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1999.9999"
height="1000"
viewBox="0 0 529.16662 264.58334"
version="1.1"
id="svg537"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs534">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath2540">
<path
clip-rule="nonzero"
d="M 3.4439182e-7,418.00001 1196.2188,418.00005 605.68931,1233.134 l 297.05616,218.0894 -943.760133,-6.3673 z"
id="path2542"
style="stroke-width:0.999997" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3109">
<path
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 56.973065,0 V 264.58333 H 132.29167 V 66.472697 H 343.5563 V 0 Z"
id="path3111" />
</clipPath>
</defs>
<g
id="layer1">
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 188.10528,60.336566 c 0,5.56452 -4.5117,10.07622 -10.07622,10.07622 -5.56452,0 -10.07621,-4.5117 -10.07621,-10.07622 0,-5.564515 4.51169,-10.076211 10.07621,-10.076211 5.56452,0 10.07622,4.511696 10.07622,10.076211"
id="path159"
style="stroke-width:0.352778" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 241.64732,65.677456 c 0,1.97335 -1.59988,3.57326 -3.57187,3.57326 -1.97334,0 -3.57326,-1.59991 -3.57326,-3.57326 0,-1.97197 1.59992,-3.57187 3.57326,-3.57187 1.97199,0 3.57187,1.5999 3.57187,3.57187"
id="path165"
style="stroke-width:0.352778" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 461.83517,62.075783 c 0,2.91593 -2.36474,5.28202 -5.28204,5.28202 -2.91729,0 -5.282,-2.36609 -5.282,-5.28202 0,-2.91731 2.36471,-5.2834 5.282,-5.2834 2.9173,0 5.28204,2.36609 5.28204,5.2834"
id="path169"
style="stroke-width:0.352778" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 270.28659,1.7473557 c 0,1.83417 -1.4869,3.31969 -3.32107,3.31969 -1.83279,0 -3.31969,-1.48552 -3.31969,-3.31969 0,-1.83417003 1.4869,-3.3197 3.31969,-3.3197 1.83417,0 3.32107,1.48552997 3.32107,3.3197"
id="path181"
style="stroke-width:0.352778" />
<g
clip-path="url(#clipPath2540)"
id="g155"
transform="matrix(0.18789442,0.25592815,-0.25592815,0.18789442,334.07974,-227.96195)">
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 744.99609,418.33203 c 0,0 -81.79687,184.11719 -537.05468,317.47266 -289.199222,84.71093 -322.82422,282.84761 -269.605472,434.25391 45.683593,129.9609 173.097652,251.7578 407.289062,270.6094 434.01562,34.9375 876.8867,-261.0274 876.8867,-261.0274 0,0 -528.15233,188.4063 -772.32811,30.5313 -142.875,-92.375 -131.76953,-281.03518 37.97266,-401.91018 C 762.49219,612.91016 744.99609,418.33203 744.99609,418.33203"
id="path153" />
</g>
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 511.52209,72.726195 c -1.10868,1.38742 -3.13166,1.61245 -4.51908,0.50377 -1.38744,-1.1087 -1.61322,-3.13069 -0.50453,-4.51812 1.10868,-1.38743 3.13144,-1.6142 4.51888,-0.50549 1.38741,1.10866 1.61342,3.13241 0.50473,4.51984"
id="path163"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 348.72144,17.281771 c -1.63903,2.0511 -4.63116,2.38435 -6.6813,0.7461 -2.05111,-1.63904 -2.38609,-4.63097 -0.74707,-6.68207 1.63903,-2.0511097 4.63116,-2.3843597 6.68227,-0.74533 2.05013,1.63826 2.38513,4.63019 0.7461,6.6813"
id="path171"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 504.18991,55.798665 c -1.10869,1.38743 -3.13164,1.61246 -4.51908,0.50376 -1.38742,-1.10867 -1.61419,-3.13144 -0.5055,-4.51887 1.10869,-1.38743 3.13243,-1.61342 4.51985,-0.50474 1.38744,1.10869 1.61341,3.13242 0.50473,4.51985"
id="path179"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 307.23344,27.986641 c -1.02972,1.28861 -2.91052,1.49863 -4.2001,0.46813 -1.2886,-1.02971 -1.49862,-2.91051 -0.46891,-4.19911 1.0305,-1.28958 2.91053,-1.49864 4.19913,-0.46892 1.28957,1.03049 1.50038,2.91033 0.46988,4.1999"
id="path187"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#00a870"
fill-opacity="1"
d="m 405.85487,54.482355 c 0,0 -7.18956,10.24178 -20.79994,15.56453 -17.91297,7.00455 -44.50544,9.58668 -45.79074,9.20867 -1.29469,-0.38029 -1.7535,-3.13448 -2.01238,-4.57685 -0.25915,-1.44063 -0.40014,-3.98192 0.56186,-5.05436 0.41598,-0.46234 20.37873,-2.44515 29.21686,-8.3353 8.77266,-5.8452 9.84736,-9.91598 9.84736,-9.91598 z m 0,0"
id="path195"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#00a870"
fill-opacity="1"
d="m 332.071,23.210666 c -1.38024,0.247116 -2.11666,-2.333998 -2.51873,-4.572836 -0.42012,-2.340989 0.44685,-3.45905 0.90979,-3.805071 0.46373,-0.344936 24.09376,-7.3896908 41.63891,-6.6005928 15.00847,0.6744 19.91502,3.5664838 19.91502,3.5664838 l -19.97163,12.111597 c 0,0 -9.99414,-3.358765 -18.75099,-3.022517 -9.30131,0.357495 -21.22237,2.322936 -21.22237,2.322936"
id="path197"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 379.49129,51.653005 -2.61413,-0.28094 c 0,0 -1.07394,4.07179 -9.84764,9.91771 -8.83811,5.89016 -28.79987,7.87223 -29.21585,8.33457 -0.962,1.07244 -0.82101,3.61373 -0.56112,5.05537 0.25814,1.44136 0.71696,4.19551 2.01164,4.57584 0.18928,0.0562 0.93048,0.0477 2.11451,-0.0308 0,0 -1.64471,-1.81272 -2.04939,-4.57275 -0.40369,-2.76078 -0.13775,-3.54068 0.81996,-3.80377 0.9577,-0.26308 17.52534,-2.5658 25.45494,-6.62119 7.14986,-3.65678 11.01274,-8.18826 12.74217,-10.69038 0,0 8.98123,1.05911 14.75217,1.40875 6.58752,0.39942 12.15406,0.31138 12.15406,0.31138 l 0.60226,-0.77449 z m 0,0"
id="path199"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 332.54573,14.152269 c -1.26368,0.372329 -2.0047,0.622498 -2.08367,0.68049 -0.46269,0.34638 -1.32991,1.464082 -0.90979,3.805071 0.40207,2.238838 1.13849,4.819952 2.51873,4.572836 0,0 11.92106,-1.965441 21.22237,-2.322936 8.75685,-0.336248 18.74998,3.02325 18.74998,3.02325 l 2.14681,-1.300714 c 0,0 -9.03574,-4.054708 -19.37311,-3.727391 -10.50412,0.332803 -21.32113,2.666214 -21.79591,2.568603 -0.47404,-0.09661 -1.04342,-1.180234 -1.28963,-2.601134 -0.55071,-3.179016 0.81422,-4.698075 0.81422,-4.698075"
id="path201"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#bdd3dc"
fill-opacity="1"
d="m 480.91473,16.340049 c 0.54347,0.367212 1.00113,0.611265 1.37835,0.691267 1.3477,0.28915 7.58892,0.03655 10.13915,-0.08179 0.12158,-0.0062 0.14639,0.16793 0.0292,0.197008 -2.4615,0.587079 -8.42907,2.075762 -9.60039,2.951108 -0.26233,0.195933 -1.00885,0.736188 -1.26438,1.048263 0.0122,-1.699806 -0.27547,-3.244158 -0.68197,-4.80586"
id="path203"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#00a870"
fill-opacity="1"
d="m 456.53706,1.7304292 c 13.74202,4.647485 20.88899,12.2551718 24.37767,14.6096198 0.4065,1.561703 0.69411,3.106052 0.68197,4.80586 -1.76643,2.164618 -3.68688,7.047095 -10.02474,13.486427 -6.55215,6.656669 -18.60448,17.274479 -44.86211,19.472319 -26.05629,2.1808 -49.83196,-2.73159 -49.83196,-2.73159 0,0 -2.73138,0.4898 -5.21023,-13.308344 -2.85149,-15.88167 -1.11461,-17.09528 -1.11461,-17.09528 0,0 7.84033,-5.006836 25.78253,-12.2482468 23.94282,-9.66366706 45.73099,-11.886549 60.20148,-6.990765"
id="path205"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 373.29644,19.376898 c -1.85727,1.026588 -2.74413,1.591537 -2.74413,1.591537 0,0 -1.73613,1.21465 1.11535,17.096286 2.47885,13.798144 5.21023,13.308344 5.21023,13.308344 0,0 1.02505,0.21211 2.88423,0.52729 0,0 -2.0419,-0.10717 -3.62744,-4.58044 -1.58556,-4.47327 -3.66106,-13.679482 -4.16649,-20.151969 -0.50645,-6.471756 1.32825,-7.791048 1.32825,-7.791048"
id="path207"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 480.64101,18.004193 c 0,0 -5.06444,-2.539221 -8.72381,-3.045163 -3.65765,-0.505673 -7.61511,-0.386569 -7.61511,-0.386569 l 1.01143,3.877776 c 0,0 2.66969,-0.521447 6.9226,-0.738974 4.0365,-0.206359 8.40489,0.29293 8.40489,0.29293"
id="path209"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 435.34944,21.132157 c 0,0 -7.6948,0.590445 -13.67057,1.426653 -10.23603,1.43145 -19.3014,3.340466 -19.3014,3.340466 0,0 8.85256,-3.709835 18.97693,-6.450196 6.49869,-1.758604 13.24869,-2.477012 13.24869,-2.477012 z m 0,0"
id="path211"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 374.72077,36.627889 c 0,0 10.46339,2.514215 16.37034,1.49622 7.83226,-1.348338 13.4751,-5.314207 13.31465,-11.513773 -0.15378,-5.953688 -5.78341,-8.214904 -9.21556,-8.356858 -8.77676,-0.361473 -18.21364,1.760295 -18.21364,1.760295 z m 0,0"
id="path213"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#00a870"
fill-opacity="1"
d="m 318.85137,39.678114 c -1.04792,0.01237 -2.08284,-2.340346 -2.44084,-4.814639 -0.35624,-2.47404 0.15239,-3.529035 0.61804,-3.875526 0.46627,-0.345671 24.67498,-6.880947 43.78485,-9.174593 16.65854,-1.99867 23.54936,-2.512744 27.87203,-2.543038 7.74737,-0.0536 12.98304,1.895252 13.5722,6.849254 0.74602,6.280461 -8.548,11.197554 -15.99269,11.175131 -5.34644,-0.01664 -10.85929,-1.106571 -26.93168,-0.807539 -14.78947,0.27566 -40.48191,3.19095 -40.48191,3.19095"
id="path215"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#fff200"
fill-opacity="1"
d="m 319.83798,30.145453 c -1.70767,0.467515 -2.71742,0.774971 -2.80941,0.842496 -0.46572,0.3464 -0.97328,1.400753 -0.6163,3.875798 0.35626,2.474021 1.39118,4.826738 2.4391,4.814367 0,0 1.04378,-0.118578 2.82977,-0.309703 0,0 -2.38541,-0.841207 -3.04315,-4.786316 -0.63181,-3.790301 1.20014,-4.436603 1.20014,-4.436603"
id="path217"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#151821"
fill-opacity="1"
d="m 438.88394,32.581315 c -1.15967,-1.579556 -2.09459,-3.328731 -2.78195,-5.199634 -4.13447,-11.262558 -2.11797,-17.7556781 0.30344,-21.2181278 1.69543,-2.424807 4.20996,-3.953953 7.27253,-4.422281 4.36588,-0.6651061 9.70447,0.849711 13.60069,3.861937 1.70707,1.319241 3.09451,2.720777 4.24244,4.2843457 2.62245,3.5719971 3.91619,8.0040721 3.84434,13.1725961 -0.069,5.027892 -1.81049,9.223598 -5.03588,12.131635 -2.43903,2.199907 -5.75429,3.656878 -9.09437,3.996591 -4.30307,0.440537 -9.03667,-2.092333 -12.35124,-6.607062 z m 0,0"
id="path219"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#bdd3dc"
fill-opacity="1"
d="m 462.1459,9.4288229 c -1.19122,-1.6225397 -2.62778,-3.0741977 -4.39265,-4.4386647 -4.05745,-3.135438 -9.6271,-4.71139402 -14.19126,-4.01456997 -3.27772,0.50010097 -5.97173,2.14102397 -7.792,4.74365397 -2.52541,3.6141917 -4.64613,10.3530778 -0.39556,21.9288708 0.71221,1.940365 1.68271,3.752646 2.88568,5.391195 3.47678,4.735666 8.47781,7.387597 13.05377,6.920595 3.50075,-0.357681 6.97599,-1.885939 9.53517,-4.192531 3.38841,-3.056939 5.21825,-7.446719 5.29194,-12.696579 0.0734,-5.340393 -1.27062,-9.93101 -3.99509,-13.6419701 m -1.24865,0.9167341 c 2.18207,2.97215 3.77272,7.01857 3.69435,12.704211 -0.15118,10.894832 -8.11772,14.826552 -13.43538,15.368834 -4.13072,0.421698 -8.56776,-2.101187 -11.64746,-6.296007 -1.08628,-1.479588 -2.00397,-3.167558 -2.67996,-5.008336 -3.49806,-9.528088 -2.74351,-16.279444 0.21135,-20.5074018 4.64121,-6.63996402 14.47074,-4.481992 19.76492,-0.391309 1.42376,1.101023 2.85326,2.442483 4.09218,4.1300088"
id="path221"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#2f404c"
fill-opacity="1"
d="m 461.34323,27.259356 c 0.93335,-3.079269 1.68286,-7.731359 -1.3736,-13.571057 -3.05646,-5.8396868 -8.08626,-8.3212428 -12.10646,-8.8869408 -5.20294,-0.732786 -7.63115,2.473113 -7.63115,2.473113 0,0 6.52061,0.320823 12.6477,9.3496328 5.78031,8.518729 4.24562,16.412092 4.24562,16.412092 0,0 3.00957,-1.789509 4.21789,-5.77684"
id="path223"
style="stroke-width:0.317496" />
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 47.605232,-5.9851528 c 0,0 -15.8745,25.0354978 -17.758638,57.4625378 -2.357195,40.56567 4.604997,64.594815 4.604997,64.594815 0,0 -12.805438,-30.343055 -13.793967,-59.304055 C 19.121016,11.71606 47.605232,-5.9851528 47.605232,-5.9851528"
id="path227"
style="stroke-width:0.317496" />
<g
id="g2547"
clip-path="url(#clipPath3109)">
<path
fill-rule="nonzero"
fill="#ffffff"
fill-opacity="1"
d="m 335.60599,50.937545 c 0,0 -35.71989,12.85424 -104.33718,-8.75426 C 174.66892,24.359052 159.09172,16.073928 124.23843,33.166133 89.385127,50.258335 77.175537,88.502795 89.028228,128.22133 109.08882,195.44704 194.05106,261.07805 194.05106,261.07805 c 0,0 -119.113393,-69.90964 -133.262133,-150.12549 C 49.128334,44.838795 86.444257,12.931529 126.58023,6.1112072 c 27.87757,-4.738022 64.40806,8.7268658 98.36024,23.4307688 76.9719,33.336059 110.66552,21.395569 110.66552,21.395569"
id="path225"
style="stroke-width:0.317496" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 14 KiB