c3d2/c3d2-web
c3d2
/
c3d2-web
37
3
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

datenspuren style: spinning header circles

This commit is contained in:
Astro 2013-07-22 03:26:02 +02:00
parent 72608e4e0b
commit 46b2554d38
3 changed files with 330 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
content/static/datenspuren/2013/images/logo-part1.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
version="1.1"
width="180.14285"
height="180.14285"
id="svg3883">
<defs
id="defs3885" />
<metadata
id="metadata3888">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<path
d="m 25.78329,80.173688 c 1.333585,-7.954499 3.929408,-15.728929 8.052544,-22.684637 3.387285,-5.929464 7.814669,-11.229129 12.867215,-15.814609 -1.728038,-1.973921 -3.456076,-3.947843 -5.184086,-5.921736 -6.534083,5.867192 -12.020928,12.88343 -16.086485,20.669999 -3.658291,6.983725 -6.100935,14.579573 -7.363313,22.354564 -0.224835,1.92792 -0.449643,3.85584 -0.674478,5.783788 2.61673,0.171247 5.233459,0.342466 7.850161,0.513741 0.179481,-1.633703 0.358933,-3.267406 0.538442,-4.90111 z"
id="path5788"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 93.920888,25.988985 0.596217,-8.972512 A 73.062397,73.062397 0 0 1 144.64755,41.79418 l -6.76611,5.922972 A 64.070102,64.070102 0 0 0 93.920888,25.988985 z"
id="path5790"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0" />
<path
d="m 141.89346,140.22266 c 4.68811,-5.07947 8.83704,-10.65725 12.02079,-16.80547 3.68465,-7.0714 6.18358,-14.75689 7.39158,-22.63611 0.21393,-1.834908 0.42792,-3.669786 0.64188,-5.504663 -2.6167,-0.171247 -5.23346,-0.342494 -7.85013,-0.51377 -0.78143,9.774683 -3.72461,19.384773 -8.72612,27.832113 -3.3833,5.81995 -7.73574,11.04852 -12.72379,15.56543 1.72806,1.97393 3.45607,3.94782 5.18411,5.92174 1.35388,-1.2864 2.70778,-2.57286 4.06168,-3.85927 z"
id="path5792"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 85.425052,153.84722 -0.596217,8.97252 A 73.062397,73.062397 0 0 1 34.69842,138.04203 l 6.766112,-5.92294 a 64.070102,64.070102 0 0 0 43.96052,21.72813 z"
id="path5794"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0" />
<path
d="M 76.339968,50.523872 73.45715,42.006173 a 50.581669,50.581669 0 1 1 32.43167,95.823837 l -2.88285,-8.51767 A 41.589365,41.589365 0 1 0 76.339968,50.523872 z"
id="path5800"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0" />
<circle
cx="0"
cy="0"
r="1"
transform="matrix(-0.26617729,0.09008792,-0.09008792,-0.26617729,89.672984,89.918105)"
id="circle5804"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0.1" />
<path
d="m 178.64285,90.07143 a 88.571426,88.571426 0 1 1 -177.14285,0 88.571426,88.571426 0 1 1 177.14285,0 z"
id="path3022"
style="fill:none;stroke:#ffffff;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

79
content/static/datenspuren/2013/images/logo-part2.svg Normal file
View File

@ -0,0 +1,79 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
version="1.1"
width="180.14285"
height="180.14285"
id="svg3883">
<defs
id="defs3885" />
<metadata
id="metadata3888">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<path
d="m 13.852959,92.777795 c -0.08281,-6.850611 0.39996,-13.734213 2.081295,-20.394132 1.284184,-2.286909 -1.734642,-1.946635 -3.178411,-2.568031 -1.404737,0.05463 -4.2028583,-2.183919 -4.309417,0.007 -1.7769337,7.04535 -2.5066023,14.312249 -2.4583811,21.569958 -0.00871,2.944274 0.4398356,5.878432 0.6094809,8.81919 2.5976773,-0.341507 5.1954112,-0.682961 7.7930882,-1.024444 -0.179228,-2.136569 -0.358427,-4.273082 -0.537655,-6.409623 z"
id="path5772"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 34.043977,38.319726 c 4.764793,-4.913812 9.991789,-9.420525 15.883597,-12.94084 2.525655,-0.70761 0.151632,-2.603017 -0.429157,-4.063703 -0.995532,-0.834288 -1.352217,-4.283367 -2.816387,-3.19988 -6.137635,3.673325 -11.767655,8.151937 -16.781983,13.250006 -2.297363,2.16009 -4.146432,4.744139 -6.249758,7.088261 2.076209,1.596498 4.152417,3.192968 6.228598,4.789465 1.388354,-1.641094 2.776736,-3.282216 4.16509,-4.923309 z"
id="path5774"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 110.86212,8.9274257 C 103.72811,7.1507168 96.397169,6.1792118 89.040123,6.25278 85.813519,6.1238811 82.605462,6.6674372 79.386389,6.8422249 c 0.338728,2.5986328 0.677457,5.1972651 1.016157,7.7959261 6.805875,-0.77744 13.694647,-0.712864 20.474074,0.285674 2.68488,0.323554 5.29599,1.102933 7.95161,1.608019 0.67799,-2.534843 1.35595,-5.069631 2.03389,-7.6044183 z"
id="path5776"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 161.9286,47.63993 c -3.68411,-6.125158 -8.01303,-11.871515 -13.11981,-16.884551 -2.29846,-2.560472 -5.11235,-4.573847 -7.67245,-6.85758 -1.59647,2.076208 -3.19294,4.152388 -4.78944,6.228625 5.37197,4.256194 10.18349,9.186079 14.27763,14.685317 1.6681,2.125245 2.96299,4.518235 4.48235,6.750123 2.27393,-1.307283 4.54783,-2.614594 6.82172,-3.921934 z"
id="path5778"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 164.34795,80.15531 8.91645,-1.16571 a 84.302766,84.302766 0 0 1 -2.18085,32.82092 l -8.68381,-2.33519 a 75.310471,75.310471 0 0 0 1.94821,-29.32002 z"
id="path5780"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0" />
<path
d="m 137.99443,158.31328 c 4.84957,-3.6434 9.51657,-7.5614 13.5762,-12.07767 1.37476,-1.61451 2.74954,-3.22893 4.12429,-4.84342 -2.07711,-1.59928 -4.15427,-3.19853 -6.23141,-4.79775 -4.25611,5.36826 -9.17734,10.18504 -14.67863,14.27277 -2.12729,1.66992 -4.5225,2.96641 -6.75678,4.48721 1.31007,2.27294 2.62013,4.54591 3.93022,6.81885 2.01203,-1.28665 4.02408,-2.57331 6.03611,-3.85999 z"
id="path5782"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 98.948227,165.19651 c -6.805734,0.78225 -13.694591,0.71169 -20.474107,-0.2857 -2.687347,-0.32395 -5.301548,-1.10088 -7.959951,-1.60521 -0.677935,2.53482 -1.355898,5.06963 -2.033861,7.60445 7.136314,1.77969 14.470879,2.74186 21.830258,2.67414 3.22666,0.12954 6.434689,-0.41682 9.653762,-0.59178 -0.3387,-2.59863 -0.677428,-5.19726 -1.016101,-7.7959 z"
id="path5784"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 43.003844,149.70821 c -5.371969,-4.25619 -10.183521,-9.18605 -14.277629,-14.68532 -1.668661,-2.12569 -2.968834,-4.51615 -4.490696,-6.74731 -2.273898,1.30731 -4.547797,2.61462 -6.821695,3.92196 3.684115,6.12513 8.013034,11.87152 13.119814,16.88453 2.298459,2.56044 5.112317,4.57384 7.672423,6.85758 1.59928,-2.07714 3.198531,-4.15427 4.797783,-6.23144 z"
id="path5786"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 42.312477,66.509475 34.251109,62.525017 A 61.822028,61.822028 0 0 1 117.06604,34.496258 l -3.98443,8.061311 A 52.829733,52.829733 0 0 0 42.312477,66.509475 z"
id="path5796"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0" />
<path
d="m 114.21692,146.04832 c 7.19521,-3.23815 13.79974,-7.75001 19.3089,-13.40892 4.3303,-4.45276 7.93677,-9.57418 10.80155,-15.08266 -2.35003,-1.16386 -4.70011,-2.32771 -7.05016,-3.49157 -5.21618,10.22601 -13.76841,18.70976 -24.09432,23.75118 -9.6643,4.77446 -20.781531,6.44543 -31.439818,4.88023 -5.267517,-0.81599 -10.399504,-2.40254 -15.213586,-4.69606 -1.162001,2.35562 -2.324002,4.71121 -3.485975,7.06682 10.024582,4.80091 21.349956,6.85882 32.424305,5.79107 6.462984,-0.60085 12.765544,-2.30894 18.749104,-4.81009 z"
id="path5798"
style="fill:none;stroke:#ffffff;stroke-width:1.40504611;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="m 118.42014,80.18861 8.51765,-2.882817 A 39.341291,39.341291 0 0 1 52.408155,102.53042 l 8.517698,-2.882821 A 30.348996,30.348996 0 0 0 118.42014,80.18861 z"
id="path5802"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0" />
<circle
cx="0"
cy="0"
r="1"
transform="matrix(-0.26617729,0.09008792,-0.09008792,-0.26617729,89.672984,89.918105)"
id="circle5804"
style="fill:#ffffff;stroke:#ffffff;stroke-width:0.1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

196
content/static/datenspuren/2013/style/style.css
View File

@ -52,11 +52,37 @@ header, article, footer {
padding: 8px;
}
header {
padding-left: 144px;
background:url("../images/logo.svg") no-repeat;
background-size: 128px;
background-position: 0 50%;
position: relative;
height: 128px;
padding-left: 144px;
}
header:after {
content: '';
position: absolute;
background:url("../images/logo-part1.svg") no-repeat;
background-size: 128px;
left: 0;
top: 8px;
width: 128px;
height: 128px;
-webkit-animation: spin 16s infinite linear;
-moz-animation: spin 16s infinite linear;
-ms-animation: spin 16s infinite linear;
-o-animation: spin 16s infinite linear;
}
header a:before {
content: '';
position: absolute;
background:url("../images/logo-part2.svg") no-repeat;
background-size: 128px;
left: 0;
top: 8px;
width: 128px;
height: 128px;
-webkit-animation: rspin 8s infinite linear;
-moz-animation: rspin 8s infinite linear;
-ms-animation: rspin 8s infinite linear;
-o-animation: rspin 8s infinite linear;
}
header a, header a:hover {
vertical-align: middle;
@ -222,3 +248,165 @@ footer a:hover, aside a:hover {
height: 32px;
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rspin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-moz-keyframes rspin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-ms-keyframes rspin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-o-keyframes rspin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes rspin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}