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 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + 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 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + 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); + } +}