diff --git a/content/static/datenspuren/2013/images/logo-part1.svg b/content/static/datenspuren/2013/images/logo-part1.svg
new file mode 100644
index 000000000..ea9b8fa65
--- /dev/null
+++ b/content/static/datenspuren/2013/images/logo-part1.svg
@@ -0,0 +1,59 @@
+
+
+
+
diff --git a/content/static/datenspuren/2013/images/logo-part2.svg b/content/static/datenspuren/2013/images/logo-part2.svg
new file mode 100644
index 000000000..45892f2b3
--- /dev/null
+++ b/content/static/datenspuren/2013/images/logo-part2.svg
@@ -0,0 +1,79 @@
+
+
+
+
diff --git a/content/static/datenspuren/2013/style/style.css b/content/static/datenspuren/2013/style/style.css
index 2faf3e463..f413fd9c7 100644
--- a/content/static/datenspuren/2013/style/style.css
+++ b/content/static/datenspuren/2013/style/style.css
@@ -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);
+ }
+}