added hideshow to main page

3 files changed, 28 insertions, 4 deletions

diff --git a/README.md b/README.md
index aa01e7a..784700c 100644
--- a/README.md
+++ b/README.md
@@ -24,9 +24,9 @@ If you want to use it feel free to do so, but be prepared to learn some SVG if y
 - responsive webdesign
 
 # TODO:
-- "Last Page" / "First Page" Lippen
-- Titlescreen automatischer Bilderwechsel
-- playground als eingene section, alle artikel untereinander (content liste)
+- globales seiten icon
+- "Last Page" / "First Page" Lippen oder Brille
+- playground verbessern (title container)
 - 404 Page (viele kleine 404 zeichen über svg)
 
 - mehr Farbe in die Timeline [?]
\ No newline at end of file
diff --git a/themes/dj_blog/layouts/partials/start-screen.svg b/themes/dj_blog/layouts/partials/start-screen.svg
index e7e6643..5ca3da9 100755
--- a/themes/dj_blog/layouts/partials/start-screen.svg
+++ b/themes/dj_blog/layouts/partials/start-screen.svg
@@ -22,7 +22,9 @@
       <feComposite operator="atop" in="offset" in2="SourceGraphic" result="composite2" id="feComposite3555"/>
     </filter>
   </defs>
-  <image y="234.615" x="1114.735" id="image3662" xlink:href="/images/ladder.png" preserveAspectRatio="none" height="2009.184" width="2008.671" image-rendering="optimizeQuality"/>
+  <image y="234.615" x="1114.735" id="svg-image-3" xlink:href="/images/start-screen/mallorca.png" preserveAspectRatio="none" height="2009" width="2009" image-rendering="optimizeQuality"/>
+  <image y="234.615" x="1114.735" id="svg-image-2" xlink:href="/images/start-screen/ladder.png" preserveAspectRatio="none" height="2009" width="2009" image-rendering="optimizeQuality"/>
+  <image y="234.615" x="1114.735" id="svg-image-1" xlink:href="/images/start-screen/tioman.png" preserveAspectRatio="none" height="2009" width="2009" image-rendering="optimizeQuality"/>
   <g id="g3557">
     <g fill="#4cabab" id="g3559">
       <path d="M169.38 3.41c37.375 29.125 76.875 66.875 99.5 95.25 55.375 69.375 92.375 147.75 108 228.25 2 10.875 4.375 23 5.125 26.75s1.875 18.375 2.5 32.5c3.75 82.25-15.125 217.875-41.375 296.25-18.5 55.125-26.375 85.5-37.5 143.125-10.125 52.875-15.5 114.25-15.5 176.25 0 57.5 3.375 100.125 12.875 161.875 2.625 16.625 10.125 52.625 15.75 75.625 34.75 140.75 101.125 272.625 194.25 386.125 39.875 48.625 93.375 101.75 143.125 142 28.5 23 78.5 58.25 105.75 74.375 4.5 2.625 17.125 10.75 28.125 18 118.5 77.875 250.125 124.75 437.5 155.75 15.125 2.5 35.625 5.875 45.625 7.5 49.875 8.25 110.75 15.75 166.875 20.625 15.875 1.25 30.625 3 33 3.75 2.375.625 4.5 1 4.75.875.125-.25-1.75-2.125-4.25-4.125-2.625-2-11.5-9.5-19.75-16.75-101.875-89.125-184.375-195.125-245.375-315.875-87.875-173.75-124.875-369.125-107-564.75 37.25-409.125 313.125-758.75 703.375-891.75 184.375-62.875 388-72.125 579.25-26.25 234.75 56.125 444 193.625 590.125 387.75 105.375 139.875 175.125 307.875 198.375 477.75 1.75 13 3.75 25.75 4.375 28.125s2.875 13.625 5 25c33.875 179.125 133.375 342.75 278.75 458 9.25 7.375 22.875 17.625 30.25 22.875 7.5 5.25 13.5 10 13.5 10.625 0 .5 2.375 2.5 5.375 4.375 2.875 1.875 7.75 5.5 10.875 8 13.375 10.75 51.625 38 80 56.75 98.25 65.125 215.375 127 442.375 233.875 19.5 9.25 35.75 16.75 36 16.75 2.125 0-1.625-13-7.75-26.875-9-20.375-22.875-61.875-28.625-85.625-9.25-38-13.75-70.25-15.75-111.25-4.25-90.875 13-179.75 51.625-265 18.75-41.5 61.25-153.625 84.75-223.75 47.125-141.25 71.25-255.625 80.375-381.875 12.625-173.75-5.75-361.875-50-513.5-30.875-105.75-75-203.375-149-329l-12.5-21.25-1933.625-.25-1933.5-.25 4.375 3.375z" id="path3561"/>
diff --git a/themes/dj_blog/static/css/default.css b/themes/dj_blog/static/css/default.css
index 1a3b990..d4cc01a 100644
--- a/themes/dj_blog/static/css/default.css
+++ b/themes/dj_blog/static/css/default.css
@@ -72,6 +72,28 @@
 	x: 2114.7;
 }
 
+#svg-image-1 {
+	animation: hideshow 30s ease-in-out infinite;
+}
+
+#svg-image-2 {
+	opacity: 0.3;
+	animation: hideshow 30s 10s ease-in-out infinite;
+}
+
+#svg-image-3 {
+	opacity: 0.3;
+	animation: hideshow 30s 20s ease-in-out infinite;
+}
+
+@keyframes hideshow {
+  0% { opacity: 1; }
+  26% { opacity: 1; }
+  41% { opacity: 0; }
+  90% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
 .timeline-container {
 	max-width: 900px;
 	position: relative;