From 7f42d61161ae010e5a970934d9f827ddafa0d586 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
Date: Sat, 31 Mar 2018 15:47:05 +0200
Subject: Initial commit

---
 rsrc/main.css | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 rsrc/main.css

(limited to 'rsrc/main.css')

diff --git a/rsrc/main.css b/rsrc/main.css
new file mode 100644
index 0000000..65de888
--- /dev/null
+++ b/rsrc/main.css
@@ -0,0 +1,107 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+/* Main
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+html{margin:0;padding:0;height:100%;font-size:1.25rem;background:#DDD;}
+body{margin:0;padding:0;height:100%;font-size:1.00rem;display:flex;}
+
+main{margin:auto;padding:1rem;background:#FFF;width:60rem;border:0.05rem solid #AAA;}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+/* Slideshow
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.slideshow {
+	display:flex;
+	width:100%;
+	height:30rem;
+	border:0.05rem solid #AAA;
+}
+
+.slideshow > ul,
+.slideshow > div {
+	display:flex;
+	box-sizing:border-box;
+	align-items:center;
+}
+
+.slideshow > div {
+	width:5%;
+	background:#DDD;
+	justify-content:center;
+	cursor:pointer;
+	font-weight:600;
+	padding:0.25rem;
+}
+
+.slideshow > ul {
+	list-style:none;
+	margin:0;
+	padding:0;
+	width:90%;
+	border:0.05rem solid #AAA;
+	border-top:none;
+	border-bottom:none;
+	box-sizing:border-box;
+	z-index:0;
+	position:relative;
+	overflow:hidden;
+}
+
+.slideshow > ul > li {
+	transition:visibility 0.5s linear, opacity 0.5s linear;
+	position:absolute;
+	top:0;
+	padding:0.5rem;
+	box-sizing:border-box;
+}
+
+.slideshow > ul > li.show {
+	visibility:visible;
+	opacity:1;
+}
+
+.slideshow > ul > li.show img {
+	animation-name:animation;
+	animation-duration:0.5s;
+	animation-fill-mode:both;
+}
+
+.slideshow > ul > li.show.next img{
+	animation-name:nextAnimation;
+}
+
+.slideshow > ul > li.show.prev img{
+	animation-name:prevAnimation;
+}
+
+.slideshow > ul > li.hide {
+	visibility:hidden;
+	opacity:0;
+}
+
+/* The "object-fit" attribute is equivalent to "background-size".  */
+.slideshow > ul,
+.slideshow > ul > li,
+.slideshow > ul > li > img {
+	width:100%;
+	height:100%;
+	object-fit:contain;
+	background:#DDD;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+/* Animation
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@keyframes animation {
+	0%  {transform:translateY(-50rem);}
+	100%{transform:translateY(0);}
+}
+
+@keyframes prevAnimation {
+	0%  {transform:translateX(-50rem);}
+	100%{transform:translateX(0);}
+}
+
+@keyframes nextAnimation {
+	0%  {transform:translateX(50rem);}
+	100%{transform:translateX(0);}
+}
\ No newline at end of file
-- 
cgit v1.2.3