From 0bb9a33da3b92067ceba13eeebd46d6945ba89ce Mon Sep 17 00:00:00 2001 From: Astro Date: Sun, 5 Apr 2015 02:46:33 +0200 Subject: [PATCH] some datenspuren 2015 decoration --- .../datenspuren/2015/images/cctv_arm_left.svg | 76 +++++ .../2015/images/cctv_arm_right.svg | 76 +++++ .../datenspuren/2015/images/cctv_left.svg | 94 ++++++ .../datenspuren/2015/images/cctv_right.svg | 94 ++++++ .../datenspuren/2015/images/satellite.svg | 275 ++++++++++++++++++ .../static/datenspuren/2015/style/style.css | 170 ++++++++++- xsl/datenspuren/xhtml5.xsl | 46 +-- 7 files changed, 798 insertions(+), 33 deletions(-) create mode 100644 content/static/datenspuren/2015/images/cctv_arm_left.svg create mode 100644 content/static/datenspuren/2015/images/cctv_arm_right.svg create mode 100644 content/static/datenspuren/2015/images/cctv_left.svg create mode 100644 content/static/datenspuren/2015/images/cctv_right.svg create mode 100644 content/static/datenspuren/2015/images/satellite.svg diff --git a/content/static/datenspuren/2015/images/cctv_arm_left.svg b/content/static/datenspuren/2015/images/cctv_arm_left.svg new file mode 100644 index 000000000..2ee803bc6 --- /dev/null +++ b/content/static/datenspuren/2015/images/cctv_arm_left.svg @@ -0,0 +1,76 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/content/static/datenspuren/2015/images/cctv_arm_right.svg b/content/static/datenspuren/2015/images/cctv_arm_right.svg new file mode 100644 index 000000000..392d77c7e --- /dev/null +++ b/content/static/datenspuren/2015/images/cctv_arm_right.svg @@ -0,0 +1,76 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/content/static/datenspuren/2015/images/cctv_left.svg b/content/static/datenspuren/2015/images/cctv_left.svg new file mode 100644 index 000000000..ab05a5950 --- /dev/null +++ b/content/static/datenspuren/2015/images/cctv_left.svg @@ -0,0 +1,94 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/content/static/datenspuren/2015/images/cctv_right.svg b/content/static/datenspuren/2015/images/cctv_right.svg new file mode 100644 index 000000000..e4d7350cb --- /dev/null +++ b/content/static/datenspuren/2015/images/cctv_right.svg @@ -0,0 +1,94 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/content/static/datenspuren/2015/images/satellite.svg b/content/static/datenspuren/2015/images/satellite.svg new file mode 100644 index 000000000..77c6633d8 --- /dev/null +++ b/content/static/datenspuren/2015/images/satellite.svg @@ -0,0 +1,275 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + Sa.24.10. + So.25.10. + Technische Sammlungen Dresden + Eintrittfrei! + 2015 + + + + diff --git a/content/static/datenspuren/2015/style/style.css b/content/static/datenspuren/2015/style/style.css index e88e19242..ffbf45066 100644 --- a/content/static/datenspuren/2015/style/style.css +++ b/content/static/datenspuren/2015/style/style.css @@ -1,5 +1,8 @@ body { - margin: 0; + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + margin: 0 auto; padding: 0; text-align: center; background: -moz-linear-gradient(top, #0f3f00 0%, #000000 100%) no-repeat; /* FF3.6+ */ @@ -13,16 +16,85 @@ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; } -aside ul { +nav ul { list-style-type: none; - margin: 0; + margin: 0 auto; padding: 0; - font-size: 70%; color: #0a0; } +nav li { + display: inline-block; + margin: 0 1em 1em; + background-color: #111; + border-radius: 0 0 2em 2em; + box-shadow: 0 4px 8px #111; +} +nav li a { + display: inline-block; + color: #7f7; + padding: 0.3em 2em 0.5em; +} +nav li a:hover { + color: #cfc; +} +#satellite img { + width: 10em; +} +#satellite { + z-index: -1; + position: absolute; + top: 2em; + left: 0; + -webkit-animation: hover 10s infinite alternate ease-in-out; + -moz-animation: hover 10s infinite alternate ease-in-out; + -ms-animation: hover 10s infinite alternate ease-in-out; + -o-animation: hover 10s infinite alternate ease-in-out; + animation: hover 10s infinite alternate ease-in-out; +} +@-webkit-keyframes hover { + from { + transform: scale(1.0) rotate(-9deg) translateY(0.1em); + } + to { + transform: scale(1.1) rotate(0deg) translateY(-0.5em); + } +} +@-moz-keyframes hover { + from { + transform: scale(1.0) rotate(-9deg) translateY(0.1em); + } + to { + transform: scale(1.1) rotate(0deg) translateY(-0.5em); + } +} +@keyframes hover { + from { + transform: scale(1.0) rotate(-9deg) translateY(0.1em); + } + to { + transform: scale(1.1) rotate(0deg) translateY(-0.5em); + } +} h1, h2 { - color: #0f0; + color: linear-gradient(top, #ddd 0%, #fff 100%) no-repeat; + color: white; margin: 0; + padding: 0; + text-shadow: 0 1px 0 black, 0 2px 0 black, 0 3px 0 black, 0 4px 0 black, 0 5px 0 black, 0 6px 0 black, 0 7px 0 black, 0 8px 0 black, 0 9px 0 black, 0 10px 0 black, 0 11px 0 black, 0 12px 0 black; + line-height: 0.95em; + text-transform: uppercase; + font-variant: small-caps; +} +h1 { + font-weight: 900; + font-size: 300%; + z-index: -2; +} +h2 { + font-weight: 700; + font-size: 247%; + z-index: -1; + overflow-y: hidden; } a { @@ -31,21 +103,91 @@ a { } article { - max-width: 55em; - margin: 0 auto; - padding: 0 2em 2em; + z-index: 0; + max-width: 600px; + margin: -1.7rem auto 0; + padding: 0 4em 8em; background-color: #eee; text-align: left; -} -article date { - font-size: 70%; - color: #777; - padding-left: 2em; + + /* transform: translateZ(50px); */ } article h3 { - padding: 2em 0 0; + padding: 6rem 0 0; + font-size: 120%; + /* leave room for date */ + padding-right: 7rem; + /* for absolute positioning of cctv */ + position: relative; +} +article h3 date { + position: absolute; + right: 0; + bottom: 0; + font-size: 70%; + color: #999; } +article h3:before { + content: url('../images/cctv_arm_left.svg'); + position: absolute; + left: -105px; + padding-right: 2rem; + bottom: -20px; + z-index: -1; +} +article h3:after { + content: url('../images/cctv_left.svg'); + position: absolute; + left: -128px; + padding-right: 2rem; + bottom: 32px; + z-index: 4; + transform-origin: 32px 24px; + -webkit-animation: cctv_left 8s infinite linear; + -moz-animation: cctv_left 8s infinite linear; + -ms-animation: cctv_left 8s infinite linear; + -o-animation: cctv_left 8s infinite linear; + animation: cctv_left 8s infinite linear; +} +@-webkit-keyframes cctv_left { + from { + transform: rotate(0); + } + 10% { + transform: rotate(9deg); + } + 20% { + transform: rotate(6deg); + } + 30% { + transform: rotate(9deg); + } + 32% { + transform: rotate(7.5deg); + } + 60% { + transform: rotate(7deg); + } + 80% { + transform: rotate(12deg); + } + 90% { + transform: rotate(1.5deg); + } + to { + transform: rotate(0); + } +} + +footer { + margin: 0; + background-color: #0f3f00; + color: #070; +} +footer a { + color: #7f7; +} #oldds { list-style-type: none; margin: 0 auto; diff --git a/xsl/datenspuren/xhtml5.xsl b/xsl/datenspuren/xhtml5.xsl index fdc7f6baa..df3ec4568 100644 --- a/xsl/datenspuren/xhtml5.xsl +++ b/xsl/datenspuren/xhtml5.xsl @@ -36,33 +36,41 @@ - -