estus/templates/pheesh.htm

{% extends 'base.htm' %}
{% block title %}Acquario • estus{% endblock %}
{% block extrahead %}
    <style>
        @keyframes fish {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, 20px);
            }
            100% {
                transform: translate(0px, 0px);
            }
        }

        .fish {
            animation: fish 5s infinite;
            animation-direction: alternate;
            animation-timing-function: cubic-bezier(.46,.03,.52,.96);
        }

        {% for fish in pheesh %}
            #fish{{ loop.index }}
            {
                color: #{{ fish.color }};
                position: absolute;
                top: {{ fish.position[1] }}px;
                left: {{ fish.position[0] }}px;
                animation-delay: -{{ fish.delay }}s;
            }
        {% endfor %}

        body {
            backround-repeat: no-repeat;
            background: linear-gradient(#003366, darkblue) fixed;
        }
    </style>
    <script>
        $(function () {$('[data-toggle="tooltip"]').tooltip()})
    </script>
{% endblock %}
{% block content %}
    {% for fish in pheesh %}
        <div class="fish" id="fish{{ loop.index }}">
            <a href="{{ fish.link }}" data-toggle="tooltip" data-placement="bottom" title="{{ fish.name }}">
                <svg
               xmlns:dc="http://purl.org/dc/elements/1.1/"
               xmlns:cc="http://creativecommons.org/ns#"
               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
               xmlns:svg="http://www.w3.org/2000/svg"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
               xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
               version="1.1"
               x="0px"
               y="0px"
               width="{{ 95 * fish.size }}px"
               height="{{ 40 * fish.size }}px"
               viewBox="0 0 95 40 "
               enable-background="new 0 0 {{ 95 * fish.size }} {{ 40 * fish.size }}"
               xml:space="preserve"
               sodipodi:docname="pheesh.svg"
               inkscape:version="0.92.1 r15371"><metadata
                 id="metadata9"><rdf:RDF><cc:Work
                     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
                       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
                 id="defs7" /><sodipodi:namedview
                 pagecolor="#ffffff"
                 bordercolor="#666666"
                 borderopacity="1"
                 objecttolerance="10"
                 gridtolerance="10"
                 guidetolerance="10"
                 inkscape:pageopacity="0"
                 inkscape:pageshadow="2"
                 inkscape:window-width="640"
                 inkscape:window-height="480"
                 id="namedview5"
                 showgrid="false"
                 inkscape:zoom="3.8210526"
                 inkscape:cx="47.5"
                 inkscape:cy="29.197817"
                 inkscape:window-x="0"
                 inkscape:window-y="0"
                 inkscape:window-maximized="0"
                 inkscape:current-layer="Your_Icon" /><path
                 d="m 94.18892,20.484581 c -0.775,0.021 -1.511,0.322 -2.283,0.202 -0.016,-0.053 -0.03,-0.151 -0.038,-0.202 0.666,-0.302 1.403,-0.49 2.011,-0.925 0.325,-0.316 0.792,-0.691 0.573,-1.209 -0.242,-1.068 -1.218,-1.729 -2.06,-2.307 -1.007,-0.707 -2.14,-1.173 -3.214,-1.735 -1.18,-0.504 -2.771,-2.356 -18.807,-5.3869997 -5.913,-1.133 -11.902,-1.648 -12.152,-1.836 -5.526,0.102 -11.099,-6.18800003 -12.797,-6.69100003 -0.263,-0.174 -0.458,0.509 -0.587,0.509 h 0.002 c -0.16,1.00000003 -0.614,8.46000003 0.302,8.73800003 -1.03,0.308 -2.109,0.271 -3.156,0.4969997 -1.72,0.33 -10.451,2.965 -14.923,3.992 -1.585,0.294 -3.21,0.235 -4.815,0.242 -1.549,-0.029 -3.073,-0.372 -4.561,-0.761 -1.817,-0.518 -16.4379999,-6.6349997 -16.5369999,-6.1329997 0.038,4.0649997 2.203,6.8189997 3.75,10.4319997 0.052,0.526 0.269,1.035 0.196,1.576 -0.858,2.793 -4.11099999,5.208 -4.91299999,8.098 0.006,0.556 -0.234,1.051 -0.438,1.554 0.67,0.044 1.33899999,0.083 2.01299999,0.067 1.466,-0.172 10.0549999,-2.336 11.3759999,-2.645 1.292,-0.299 2.501,-0.85 3.777,-1.164 0.725,-0.173 1.377,-0.548 2.104,-0.669 1.443,-0.188 2.901,-0.367 4.359,-0.225 1.016,0.104 2.027,0.203 3.029,0.42 0.757,0.166 6.36,1.226 9.716,2.373 2.207,0.173 10.578,3.585 11.368,3.751 -1.289,2.099 -1.147,3.252 -1.48,5.746 -0.216,0.879 -0.254,1.888 0.359,2.614 0.278,0.264 0.731,0.277 1.044,0.069 4.525,-4.812 9.603,-6.665 9.82,-7.348 2.756,0.329 5.53,0.044 8.294,0.059 15.207,-0.16 25.758,-8.233 26.728,-8.767 0.812,-0.413 1.678,-0.872 2.166,-1.675 0.39,-0.353 0.255,-1.072 -0.226,-1.26 z m -9.202,-0.479 c -0.896,0 -1.621,-0.727 -1.621,-1.623 0,-0.896 0.725,-1.623 1.621,-1.623 0.897,0 1.624,0.727 1.624,1.623 0.001,0.896 -0.726,1.623 -1.624,1.623 z"
                 id="path2"
                 inkscape:connector-curvature="0" /></svg>
            </a>
        </div>
    {% endfor %}
{% endblock %}