Skip to content

Instantly share code, notes, and snippets.

@rleaf

rleaf/index.html

Last active December 5, 2018 06:16
Show Gist options
  • Save rleaf/a8e9e1f21fb7da2ed49e161c7c7eeb2b to your computer and use it in GitHub Desktop.
Save rleaf/a8e9e1f21fb7da2ed49e161c7c7eeb2b to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS floating logo
Raw
index.html
<div id="content">
<div id="logoContainer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0" y="0" width="81" height="100" viewBox="0 0 80.9 99.4" xml:space="preserve"><style type="text/css">.stars1{fill:#8A80E8;}</style><path class="stars1" d="M79.3 48.8h-3.5c-1.7 0-3.4-0.7-4.6-1.9 -1-1.1-1.7-2.4-1.8-3.9 0-0.2 0-0.4 0-0.6v-4.5c0-0.9-0.7-1.6-1.6-1.6 0 0 0 0 0 0 -0.9 0-1.6 0.7-1.6 1.6L66 42.2c0 0.3 0 0.5 0 0.8 -0.3 3.2-3.1 5.8-6.4 5.8h-4.5c-0.9 0-1.6 0.7-1.6 1.6 0 0.9 0.7 1.6 1.6 1.6h4.5c3.3 0 5.9 2.7 5.9 5.9v2.9c0 0.9 0.7 1.6 1.6 1.6 0.9 0 1.6-0.7 1.6-1.6v-1.9c0-3.8 3.1-6.8 6.8-6.8h3.6c0.9 0 1.6-0.7 1.6-1.6C80.9 49.5 80.2 48.8 79.3 48.8z"/><path class="stars1" d="M24.1 91.7h-1.3c-0.4 0-0.7-0.1-0.9-0.4 -0.2-0.2-0.3-0.4-0.4-0.7 0-0.1 0-0.1 0-0.2v-1.6c0-0.9-0.7-1.6-1.6-1.6 0 0 0 0 0 0 -0.9 0-1.6 0.7-1.6 1.6l0 1.6c0 0.1 0 0.2 0 0.3 -0.1 0.6-0.6 1.1-1.3 1.1h-1.6c-0.9 0-1.6 0.7-1.6 1.6 0 0.9 0.7 1.6 1.6 1.6H17c0.6 0 1.1 0.5 1.1 1.1v1c0 0.9 0.7 1.6 1.6 1.6 0.9 0 1.6-0.7 1.6-1.6v-0.7c0-0.8 0.7-1.5 1.5-1.5h1.3c0.9 0 1.6-0.7 1.6-1.6C25.8 92.4 25 91.7 24.1 91.7z"/><path class="stars1" d="M39 7.1h-2c-0.8 0-1.6-0.3-2.1-0.9 -0.5-0.5-0.8-1.1-0.8-1.7 0-0.1 0-0.2 0-0.3V1.6c0-0.9-0.7-1.6-1.6-1.6 0 0 0 0 0 0 -0.9 0-1.6 0.7-1.6 1.6l0 2.5c0 0.2 0 0.3 0 0.5 -0.2 1.5-1.4 2.6-2.9 2.6h-2.6c-0.9 0-1.6 0.7-1.6 1.6 0 0.9 0.7 1.6 1.6 1.6h2.6c1.5 0 2.7 1.2 2.7 2.7v1.6c0 0.9 0.7 1.6 1.6 1.6 0.9 0 1.6-0.7 1.6-1.6v-1.1c0-1.8 1.4-3.2 3.2-3.2H39c0.9 0 1.6-0.7 1.6-1.6C40.7 7.9 39.9 7.1 39 7.1z"/><path class="stars1" d="M72.6 7.8c0.3 0.3 0.7 0.5 1.2 0.5 0.4 0 0.8-0.2 1.2-0.5l1.2-1.2c0.6-0.6 0.6-1.7 0-2.3L74.9 3c-0.3-0.3-0.7-0.5-1.2-0.5 -0.4 0-0.8 0.2-1.2 0.5l-1.2 1.2c-0.6 0.6-0.6 1.7 0 2.3L72.6 7.8z"/><path class="stars1" d="M5.2 42.2c-0.6-0.6-1.7-0.6-2.3 0l-2.4 2.4C0.2 44.9 0 45.4 0 45.8s0.2 0.8 0.5 1.2l2.4 2.4c0.3 0.3 0.7 0.5 1.2 0.5 0.4 0 0.8-0.2 1.2-0.5l2.4-2.4c0.6-0.6 0.6-1.7 0-2.3L5.2 42.2z"/><path class="stars1" d="M55.6 95.3c-0.6-0.6-1.7-0.6-2.3 0L52.6 96c-0.3 0.3-0.5 0.7-0.5 1.2s0.2 0.8 0.5 1.2l0.7 0.7c0.3 0.3 0.7 0.5 1.2 0.5s0.8-0.2 1.2-0.5l0.7-0.7c0.6-0.6 0.6-1.7 0-2.3L55.6 95.3z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0" y="0" width="128" height="160" viewBox="0 0 51 63" xml:space="preserve" class="floatingLogo">
<style type="text/css">
.purpleBg{fill:#8a80e8;}
.whiteBg{fill:#ffffff;}
</style>
<g class="bellJar">
<path class="purpleBg" d="M42.8 52.5c-4.6-1.1-10.8-1.8-17.4-1.8s-12.7 0.6-17.4 1.8c-5 1.2-6.7 2.7-6.7 3.6s1.8 2.4 6.7 3.6c4.6 1.1 10.8 1.8 17.4 1.8s12.7-0.6 17.4-1.8c5-1.2 6.7-2.7 6.7-3.6S47.8 53.8 42.8 52.5z"/>
<path class="whiteBg" d="M25.5 0C11.4 0 0 11.4 0 25.5v30.7C0 60.6 13.1 63 25.5 63S51 60.6 51 56.2V25.5C51 11.4 39.5 0 25.5 0zM25.5 1.4c13.3 0 24.1 10.8 24.1 24.1v28.4c-3.7-2.9-14.1-4.5-24.1-4.5S5.1 50.9 1.4 53.9V25.5C1.4 12.2 12.2 1.4 25.5 1.4zM42.8 59.8c-4.6 1.1-10.8 1.8-17.4 1.8S12.7 61 8.1 59.8c-5-1.2-6.7-2.7-6.7-3.6s1.8-2.4 6.7-3.6c4.6-1.1 10.8-1.8 17.4-1.8s12.7 0.6 17.4 1.8c5 1.2 6.7 2.7 6.7 3.6S47.8 58.6 42.8 59.8z"/>
</g>
<g class="stem">
<path class="whiteBg" d="M25.5 56.9c-0.4 0-0.7-0.3-0.7-0.7V24.3c0-0.4 0.3-0.7 0.7-0.7s0.7 0.3 0.7 0.7v31.9C26.2 56.6 25.9 56.9 25.5 56.9z"/>
</g>
<g class="leave1">
<path class="purpleBg" d="M17.6 22c0.4 1.7 1.2 3.3 2.5 4.6 1.3 1.3 2.8 2.1 4.6 2.5 -0.4-1.7-1.2-3.3-2.5-4.6C20.9 23.2 19.3 22.4 17.6 22z"/>
<path class="whiteBg" d="M23.1 23.5c-1.7-1.7-3.9-2.8-6.3-3 -0.2 0-0.4 0-0.6 0.2S16 21 16.1 21.2c0.3 2.4 1.3 4.6 3 6.3 1.7 1.7 3.9 2.8 6.3 3 0 0 0.1 0 0.1 0 0.2 0 0.4-0.1 0.5-0.2 0.1-0.1 0.2-0.4 0.2-0.6C25.9 27.4 24.8 25.2 23.1 23.5zM20.1 26.6c-1.3-1.3-2.1-2.8-2.5-4.6 1.7 0.4 3.3 1.2 4.6 2.5 1.3 1.3 2.1 2.8 2.5 4.6C22.9 28.7 21.4 27.8 20.1 26.6z"/>
</g>
<g class="leave2">
<path class="purpleBg" d="M35 33.9c2.4-2.4 4-5.4 4.5-8.7 -3.3 0.6-6.3 2.1-8.7 4.5 -2.4 2.4-4 5.4-4.5 8.7C29.6 37.8 32.6 36.3 35 33.9z"/>
<path class="whiteBg" d="M40.9 23.8c-0.1-0.1-0.4-0.2-0.6-0.2 -4 0.5-7.6 2.2-10.5 5 -2.8 2.8-4.6 6.5-5 10.5 0 0.2 0 0.4 0.2 0.6 0.1 0.1 0.3 0.2 0.5 0.2 0 0 0.1 0 0.1 0 4-0.5 7.6-2.2 10.5-5 2.8-2.8 4.6-6.5 5-10.5C41.1 24.2 41 24 40.9 23.8zM26.3 38.4c0.6-3.3 2.1-6.3 4.5-8.7 2.4-2.4 5.4-4 8.7-4.5 -0.6 3.3-2.1 6.3-4.5 8.7C32.6 36.3 29.6 37.8 26.3 38.4z"/>
</g>
<g class="leave3">
<path class="purpleBg" d="M32.5 20.6c1.7-1.7 2.8-3.8 3.3-6.2 -2.4 0.4-4.5 1.6-6.2 3.3 -1.7 1.7-2.8 3.8-3.3 6.2C28.7 23.5 30.8 22.3 32.5 20.6z"/>
<path class="whiteBg" d="M37.1 13.1c-0.1-0.1-0.4-0.2-0.6-0.2 -3 0.3-5.8 1.7-7.9 3.8s-3.5 4.9-3.8 7.9c0 0.2 0 0.4 0.2 0.6 0.1 0.1 0.3 0.2 0.5 0.2 0 0 0.1 0 0.1 0 3-0.3 5.8-1.7 7.9-3.8 2.2-2.2 3.5-4.9 3.8-7.9C37.3 13.5 37.3 13.2 37.1 13.1zM26.3 23.9c0.4-2.4 1.6-4.5 3.3-6.2 1.7-1.7 3.8-2.8 6.2-3.3 -0.4 2.4-1.6 4.5-3.3 6.2C30.8 22.3 28.7 23.5 26.3 23.9z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" version="1.1" x="0" y="0" width="68" height="104" viewBox="0 0 68.4 103.8" xml:space="preserve"><style type="text/css">.stars2{fill:#8A80E8;}</style><path class="stars2" d="M52.8 92.9h-2.6c-1.2 0-2.3-0.5-3.1-1.3C46.5 90.9 46 90 45.9 89c0-0.2 0-0.3 0-0.5v-3.3c0-0.9-0.7-1.6-1.6-1.6 0 0 0 0 0 0 -0.9 0-1.6 0.7-1.6 1.6l0 3.2c0 0.2 0 0.4 0 0.6 -0.2 2.2-2.1 3.8-4.3 3.8h-3.3c-0.9 0-1.6 0.7-1.6 1.6 0 0.9 0.7 1.6 1.6 1.6h3.3c2.2 0 3.9 1.8 3.9 3.9v2.1c0 0.9 0.7 1.6 1.6 1.6 0.9 0 1.6-0.7 1.6-1.6v-1.4c0-2.5 2.1-4.6 4.6-4.6h2.7c0.9 0 1.6-0.7 1.6-1.6C54.5 93.6 53.7 92.9 52.8 92.9z"/><path class="stars2" d="M65.3 19.7c0-0.9-0.7-1.6-1.6-1.6h-2.2c-0.9 0-1.8-0.4-2.5-1 -0.6-0.6-0.9-1.3-1-2 0-0.1 0-0.3 0-0.4v-2.8c0-0.9-0.7-1.6-1.6-1.6 -0.9 0-1.6 0.7-1.6 1.6l0 2.7c0 0.2 0 0.3 0 0.5 -0.2 1.7-1.7 3.1-3.4 3.1h-2.8c-0.9 0-1.6 0.7-1.6 1.6s0.7 1.6 1.6 1.6h2.9c1.7 0 3.1 1.4 3.1 3.1v1.8c0 0.9 0.7 1.6 1.6 1.6 0.9 0 1.6-0.7 1.6-1.6v-1.2c0-2.1 1.7-3.7 3.7-3.7h2.3C64.5 21.4 65.3 20.6 65.3 19.7z"/><path class="stars2" d="M10.4 31.4H9.1c-0.4 0-0.7-0.1-0.9-0.4 -0.2-0.2-0.3-0.4-0.4-0.7 0-0.1 0-0.1 0-0.2v-1.6c0-0.9-0.7-1.6-1.6-1.6 0 0 0 0 0 0 -0.9 0-1.6 0.7-1.6 1.6l0 1.6c0 0.1 0 0.2 0 0.3 -0.1 0.6-0.6 1.1-1.3 1.1H1.6c-0.9 0-1.6 0.7-1.6 1.6 0 0.9 0.7 1.6 1.6 1.6h1.6c0.6 0 1.1 0.5 1.1 1.1v1c0 0.9 0.7 1.6 1.6 1.6 0.9 0 1.6-0.7 1.6-1.6v-0.7c0-0.8 0.6-1.4 1.4-1.4h1.3c0.9 0 1.6-0.7 1.6-1.6C12 32.2 11.3 31.4 10.4 31.4z"/><path class="stars2" d="M19.9 77c-0.6-0.6-1.7-0.6-2.3 0L17 77.6c-0.6 0.6-0.6 1.7 0 2.3l0.6 0.6c0.3 0.3 0.7 0.5 1.2 0.5s0.8-0.2 1.2-0.5l0.6-0.6c0.6-0.6 0.6-1.7 0-2.3L19.9 77z"/><path class="stars2" d="M67.9 62.6l-1.2-1.2c-0.6-0.6-1.7-0.6-2.3 0l-1.2 1.2c-0.3 0.3-0.5 0.7-0.5 1.2 0 0.4 0.2 0.8 0.5 1.2l1.2 1.2c0.3 0.3 0.7 0.5 1.2 0.5 0.4 0 0.8-0.2 1.2-0.5l1.2-1.2C68.6 64.2 68.6 63.2 67.9 62.6z"/><path class="stars2" d="M24.8 0.5c-0.6-0.6-1.7-0.6-2.3 0l-0.6 0.6c-0.6 0.6-0.6 1.7 0 2.3L22.5 4c0.3 0.3 0.7 0.5 1.2 0.5s0.8-0.2 1.2-0.5l0.6-0.6c0.6-0.6 0.6-1.7 0-2.3L24.8 0.5z"/></svg>
</div>
</div>
<footer>
<a target="_blank" href="https://www.made-on-mars.com"><svg id="Calque_logo2" data-name="Calque logo2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1306.42"><defs><style>.cls-logo2{fill:#ffffff;}</style></defs><path class="cls-logo2" d="M2043.47,2428a39,39,0,1,0,23.28,8.1c55.42,11,96.65,60.62,96.65,117.45a120,120,0,0,1-119.93,119.91,118.29,118.29,0,0,1-48.7-10.47v-359.6a38.92,38.92,0,0,0-38.87-38.87h-87.24v-32a38.92,38.92,0,0,0-38.87-38.87h-87.18v-27.75a38.92,38.92,0,0,0-38.87-38.87H1638.8a69.8,69.8,0,0,0,0,139.6,16.78,16.78,0,1,0-16.76-16.76,16.6,16.6,0,0,0,3,9.51,64.08,64.08,0,0,1,13.8-126.67,27,27,0,0,1,27,27v343.09a38.92,38.92,0,0,0,38.87,38.87h37.94V2199.38h22.23a27,27,0,0,1,27,27v276.43a38.92,38.92,0,0,0,38.87,38.87h37.94V2270.23h22.27a27,27,0,0,1,27,27v256.37A125.53,125.53,0,1,0,2043.47,2428Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M2128.54,2873.92V3393H1609.46V2873.92h519.08m40.46-40.46H1569v600h600v-600Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1794.74,3133.7a44.44,44.44,0,0,1-2.74,15.88,36.33,36.33,0,0,1-7.74,12.43,34.6,34.6,0,0,1-12,8.09,43.16,43.16,0,0,1-31,0,34.73,34.73,0,0,1-12-8.09,36.33,36.33,0,0,1-7.74-12.43,47.39,47.39,0,0,1,0-31.75,36.67,36.67,0,0,1,7.74-12.47,34.69,34.69,0,0,1,12-8.13,42.72,42.72,0,0,1,31,0,34.55,34.55,0,0,1,12,8.13,36.67,36.67,0,0,1,7.74,12.47A44.48,44.48,0,0,1,1794.74,3133.7Zm-10.69,0a39.07,39.07,0,0,0-1.93-12.73,26.83,26.83,0,0,0-5.48-9.54,23.65,23.65,0,0,0-8.59-6,31.24,31.24,0,0,0-22.51,0,24,24,0,0,0-8.62,6,26.65,26.65,0,0,0-5.51,9.54,42.85,42.85,0,0,0,0,25.44,26.69,26.69,0,0,0,5.51,9.51,23.8,23.8,0,0,0,8.62,6,31.68,31.68,0,0,0,22.51,0,23.48,23.48,0,0,0,8.59-6,26.87,26.87,0,0,0,5.48-9.51A38.86,38.86,0,0,0,1784,3133.7Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1816.42,3095.52A5.55,5.55,0,0,1,1818,3097l44.59,58c-.1-.93-.18-1.84-.22-2.72s-.05-1.73-.05-2.55v-54.54h9.13v77h-5.27a4.52,4.52,0,0,1-2.07-.43,5.12,5.12,0,0,1-1.64-1.45l-44.54-58c.07.9.12,1.77.16,2.63s.06,1.65.06,2.36v54.86H1809v-77h5.37A4.71,4.71,0,0,1,1816.42,3095.52Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1759.12,3038.25c.36-1,28.53-53,28.53-53a3.1,3.1,0,0,1,1.45-1.5,6.66,6.66,0,0,1,2.15-.27h7.69v77h-9.13v-56.57c0-.76,0-1.56.05-2.42s.09-1.73.16-2.63L1763.63,3047a4.15,4.15,0,0,1-3.76,2.41h-1.51a4.14,4.14,0,0,1-3.76-2.41l-27-48.3c.11.93.19,1.85.24,2.74s.08,1.72.08,2.48v56.57h-9.13v-77h7.68a6.69,6.69,0,0,1,2.15.27,3.12,3.12,0,0,1,1.45,1.5S1758.76,3037.29,1759.12,3038.25Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1881,3060.5H1873a3.42,3.42,0,0,1-2.26-.7,4.16,4.16,0,0,1-1.29-1.77l-7.2-18.58h-34.55l-7.2,18.58a4.13,4.13,0,0,1-1.29,1.72,3.42,3.42,0,0,1-2.26.76h-8.06l30.79-77h10.58Zm-50.45-28.58h28.75l-12.09-31.32a59.28,59.28,0,0,1-2.31-7.25q-.59,2.2-1.15,4.06c-.37,1.23-.74,2.32-1.1,3.24Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1957.48,3022a43.32,43.32,0,0,1-2.74,15.74,34.84,34.84,0,0,1-7.74,12.14,34.37,34.37,0,0,1-12,7.82,41.65,41.65,0,0,1-15.48,2.77h-28.79v-77h28.79a41.65,41.65,0,0,1,15.48,2.77,34.42,34.42,0,0,1,12,7.84,35.27,35.27,0,0,1,7.74,12.17A43.36,43.36,0,0,1,1957.48,3022Zm-10.69,0a38.61,38.61,0,0,0-1.94-12.68,26.55,26.55,0,0,0-5.48-9.45,23.44,23.44,0,0,0-8.59-5.92,29.88,29.88,0,0,0-11.23-2h-18.32v60.12h18.32a29.88,29.88,0,0,0,11.23-2,23.62,23.62,0,0,0,8.59-5.89,26.36,26.36,0,0,0,5.48-9.43A38.57,38.57,0,0,0,1946.79,3022Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M2019.11,2983.51V2992h-37v25.57h29.92v8.16h-29.92V3052h37v8.49h-47.44v-77Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1759.12,3260.68c.36-1,28.53-53,28.53-53a3.1,3.1,0,0,1,1.45-1.5,6.66,6.66,0,0,1,2.15-.27h7.69v77h-9.13v-56.57c0-.76,0-1.56.05-2.42s.09-1.73.16-2.63l-26.38,48.14a4.15,4.15,0,0,1-3.76,2.41h-1.51a4.14,4.14,0,0,1-3.76-2.41l-27-48.3c.11.93.19,1.85.24,2.74s.08,1.72.08,2.48v56.57h-9.13v-77h7.68a6.69,6.69,0,0,1,2.15.27,3.12,3.12,0,0,1,1.45,1.5S1758.76,3259.72,1759.12,3260.68Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1881,3282.93H1873a3.42,3.42,0,0,1-2.26-.7,4.16,4.16,0,0,1-1.29-1.77l-7.2-18.58h-34.55l-7.2,18.58a4.13,4.13,0,0,1-1.29,1.72,3.42,3.42,0,0,1-2.26.76h-8.06l30.79-77h10.58Zm-50.45-28.58h28.75L1847.24,3223a59.28,59.28,0,0,1-2.31-7.25q-.59,2.2-1.15,4.06c-.37,1.23-.74,2.32-1.1,3.24Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1902.2,3250.8v32.13h-10.37v-77h21.76a47.48,47.48,0,0,1,12.62,1.48,24,24,0,0,1,8.78,4.27,17.05,17.05,0,0,1,5.13,6.74,22.53,22.53,0,0,1,1.67,8.85,22.18,22.18,0,0,1-1.29,7.63,20.11,20.11,0,0,1-3.74,6.36,22.29,22.29,0,0,1-6,4.82,29.37,29.37,0,0,1-8,3,11,11,0,0,1,3.44,3.28l22.46,30.57h-9.24a4.55,4.55,0,0,1-4.19-2.2l-20-27.5a5.86,5.86,0,0,0-2-1.86,7.16,7.16,0,0,0-3.23-.57Zm0-7.58h10.91a26.51,26.51,0,0,0,8-1.1,16.32,16.32,0,0,0,5.8-3.12,12.87,12.87,0,0,0,3.52-4.81,15.71,15.71,0,0,0,1.18-6.18q0-6.88-4.54-10.37t-13.51-3.49H1902.2Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1999.39,3218a4.09,4.09,0,0,1-1,1.21,2.24,2.24,0,0,1-1.4.41,3.66,3.66,0,0,1-2.12-.92,34.71,34.71,0,0,0-3.06-2,26.49,26.49,0,0,0-4.46-2,19.19,19.19,0,0,0-6.31-.91,18.61,18.61,0,0,0-6.18.94,13.28,13.28,0,0,0-4.49,2.55,10.53,10.53,0,0,0-2.71,3.79,12,12,0,0,0-.91,4.7,8.72,8.72,0,0,0,1.58,5.35,13.52,13.52,0,0,0,4.19,3.62,31.77,31.77,0,0,0,5.91,2.61q3.31,1.1,6.77,2.28t6.77,2.67a23.9,23.9,0,0,1,5.91,3.73,17.2,17.2,0,0,1,4.19,5.54,18.43,18.43,0,0,1,1.58,8.06,25.86,25.86,0,0,1-1.72,9.48,21.77,21.77,0,0,1-5,7.71,23.68,23.68,0,0,1-8.11,5.16,30,30,0,0,1-10.93,1.88,33.27,33.27,0,0,1-13.62-2.72,31.81,31.81,0,0,1-10.5-7.34l3-4.94a3.92,3.92,0,0,1,1-1,2.41,2.41,0,0,1,1.37-.41,4.29,4.29,0,0,1,2.58,1.22,43.78,43.78,0,0,0,3.63,2.65,27.29,27.29,0,0,0,5.26,2.65,20.73,20.73,0,0,0,7.55,1.22,19.83,19.83,0,0,0,6.61-1,13.9,13.9,0,0,0,4.92-2.88,12.31,12.31,0,0,0,3.09-4.43,14.76,14.76,0,0,0,1.08-5.75,9.66,9.66,0,0,0-1.58-5.72,13.16,13.16,0,0,0-4.16-3.74,29.17,29.17,0,0,0-5.89-2.55l-6.77-2.15a69,69,0,0,1-6.77-2.55,22,22,0,0,1-5.89-3.77,17.21,17.21,0,0,1-4.16-5.77,20.51,20.51,0,0,1-1.58-8.57,20.53,20.53,0,0,1,6.18-14.66,22.3,22.3,0,0,1,7.45-4.73,27.17,27.17,0,0,1,10.18-1.77,32.54,32.54,0,0,1,11.77,2,26.92,26.92,0,0,1,9.29,5.91Z" transform="translate(-1569 -2127.04)"></path></svg></a>
</footer>
Raw
style.scss
@mixin rotate($params) {
-webkit-transform: rotate($params);
-moz-transform: rotate($params);
-khtml-transform: rotate($params);
-o-transform: rotate($params);
transform: rotate($params);
}
@mixin scale($params) {
-webkit-transform: scale($params);
-moz-transform: scale($params);
-khtml-transform: scale($params);
-o-transform: scale($params);
transform: scale($params);
}
@mixin translateY($params) {
-webkit-transform: translateY($params);
-moz-transform: translateY($params);
-khtml-transform: translateY($params);
-o-transform: translateY($params);
transform: translateY($params);
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@mixin animate($name, $duration, $iteration, $direction) {
-webkit-animation-duration: $duration;
-moz-animation-duration: $duration;
-o-animation-duration: $duration;
animation-duration: $duration;
-webkit-animation-iteration-count: $iteration;
-moz-animation-iteration-count: $iteration;
-o-animation-iteration-count: $iteration;
animation-iteration-count: $iteration;
-webkit-animation-name: $name;
-moz-animation-name: $name;
-o-animation-name: $name;
animation-name: $name;
-webkit-animation-direction: $direction;
-moz-animation-direction: $direction;
-o-animation-direction: $direction;
animation-direction: $direction;
}
@include keyframes(bounce) {
0% { @include translateY(0); }
50% { @include translateY(-30px); }
100% { @include translateY(0); }
}
@mixin bounce {
@include animate(bounce, 4s, infinite, cubic-bezier(.53,.19,.52,.85));
}
@include keyframes(rotateLeft) {
0% { @include rotate(0); }
25% { @include rotate(-4deg); }
50% { @include rotate(0); }
75% { @include rotate(4deg); }
100% { @include rotate(0); }
}
@mixin rotateLeft {
@include animate(rotateLeft, 4s, infinite, cubic-bezier(.53,.19,.52,.85));
}
@include keyframes(rotateRight) {
0% { @include rotate(0); }
25% { @include rotate(4deg); }
50% { @include rotate(0); }
75% { @include rotate(-4deg); }
100% { @include rotate(0); }
}
@mixin rotateRight {
@include animate(rotateRight, 4s, infinite, cubic-bezier(.53,.19,.52,.85));
}
html, body {
margin:0;
height:100%;
width:100%;
}
body {
background:#5C45E5;
}
#content {
display:table;
table-layout:fixed;
height:100%;
width:100%;
#logoContainer {
display:table-cell;
vertical-align:middle;
text-align:center;
svg {
display:inline-block;
vertical-align:middle;
margin-top:-30px;
& + svg {
margin-left:40px;
}
}
.floatingLogo {
@include bounce;
margin-top:0;
.leave1 {
@include rotateLeft;
transform-origin:50% 50%;
}
.leave2 {
@include rotateRight;
transform-origin:50% 50%;
}
.leave3 {
@include rotateRight;
transform-origin:50% 50%;
}
}
}
}
footer {
position:fixed;
z-index:1000;
left:0;
bottom:0;
display:block;
padding:20px;
box-sizing:border-box;
}
footer a {
text-decoration:none;
display:block;
width:50px;
}
footer a svg {
width:100%;
max-width:50px;
min-width:40px;
display:inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment