Add existing ps.l.o site

1 files changed, 411 insertions, 0 deletions

diff --git a/ps/ui/css/screen.css b/ps/ui/css/screen.css
new file mode 100644
index 0000000..802c20a
--- /dev/null
+++ b/ps/ui/css/screen.css
@@ -0,0 +1,411 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(0,0,0,0.97);
+    color: rgba(250,250,250,1);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+body.grid {
+    position: absolute;
+    width: 16800px;
+    height: 10500px;
+}
+
+body.grid .viewport {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: auto;
+    grid-template-areas: "border-top-left border-top border-top border-top border-top border-top border-top border-top border-top border-top-right"
+			     "border-left main main main main main main main main border-right"
+			     "border-left main main main main main main main main border-right"			     
+			     "border-left main main main main main main main main border-right"
+			     "border-left main main main center center main main main border-right"			     
+			     "border-left main main main center center main main main border-right"
+			     "border-left main main main main main main main main border-right"			     
+			     "border-left main main main main main main main main border-right"
+			     "border-left main main main main main main main main border-right"			     
+			     "border-bottom-left border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom border-bottom-right";
+}
+
+body.grid section.view {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 1680px;
+    height: 1050px;
+    background: rgba(250, 240, 20, .4);
+    display: block;
+    float: left;
+    grid-area: main;
+    border: 1px solid;
+}
+body.grid section.view:nth-child(odd) {
+    background: rgba(250, 240, 20, .8);
+}
+body.grid section.view:nth-child(10n+0)::after {
+    display: table;
+    content: '';
+    clear: both;
+}
+
+body.grid section.view.center {
+    grid-area: center;
+    background: rgba(255,120,20, .8);
+}
+
+body.grid section.view:nth-child(10n) {
+    grid-area: border-right;
+    background: rgba(255,120,20, .6);
+}
+body.grid section.view:nth-child(10n):first-child {
+    grid-area: border-top-right;
+    background: rgba(255,120,20, .7);
+}
+body.grid section.view:nth-child(10n):last-child {
+    grid-area: border-bottom-right;
+    background: rgba(255,120,20, .7);
+}
+
+body.grid section.view:nth-child(10n+1) {
+    grid-area: border-left;
+    background: rgba(255,120,20, .6);
+}
+body.grid section.view:nth-child(10n+1):first-child {
+    grid-area: border-top-left;
+    background: rgba(255,120,20, .7);
+}
+body.grid section.view:nth-child(10n+1):last-child {
+    grid-area: border-bottom-left;
+    background: rgba(255,120,20, .7);
+}
+
+#info {
+    position: fixed;
+    top: 10rem;
+    left: 10rem;
+    width: 42rem;
+    min-height: 19rem;
+    z-index: 99;
+    padding: 1rem;
+    background: rgba(0,0,0,.75);
+    border: 1rem solid rgba(140,160,100,1);
+    border-radius: 2rem;
+    border-top-left-radius: 0;
+    display: block;
+    color: blue;
+    opacity: 0.25;
+}
+
+#info.on {
+    color: black;
+    opacity: 1;
+    transition: all 2s ease-out 0s;
+}
+#info.on::after {
+    display: block;
+    content: 'Information Panel';
+    text-align: center;
+    font-family: 'Cormorant Garamond';
+    font-weight: bold;
+    font-size: 2.4rem;
+    position: relative;
+    top: -5rem;
+}
+
+#info ul.features li::before {
+    content: attr(data-feature) + ' is: NOT SUPPORTED.';
+    color: #f00;
+    display: block;
+}
+#info ul.features li::after {
+    content: attr(data-feature) + ' is: DISABLED.';
+    color: #c00;
+}
+
+.slides {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 30rem;
+    perspective-origin: 100% 100%;
+}
+
+.slide, .slide-content {
+    transform-style: preserve-3d;
+    transform: translateZ(0); /* hw accel */
+}
+.slide-bg {
+    transform: translateZ(-20rem) scale(1.5);
+    transform-origin: 100% 100%;
+    background-image: repeating-linear-gradient( rgb(102, 204, 102), rgb(102, 204, 102) 30px, rgb(92, 184, 92) 30px, rgb(92, 184, 92) 60px );
+}
+
+
+.vdo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0 auto;
+    vertical-align: center;
+    width: 100%;
+    height: 100%;
+}
+
+
+
+/* Only add parallax effects to supporting browsers -- http://keithclark.co.uk/articles/practical-css-parallax/ */
+@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
+
+    #info ul.features li::before {
+	content: attr(data-feature) + ' is: SUPPORTED.';
+	color: #0c0;
+    }
+    @media screen and (min-width: 45em) {
+	#info ul.features li::after {
+	    content: attr(data-feature) + ' is: ENABLED.';
+	    color: #090;
+	}
+    }
+
+    body {
+	transform: translateZ(0px); /* Fix paint bugs on Edge and HW accel on Safari */
+	overflow: hidden;
+    }
+
+    body.grid {
+	perspective: auto;
+	transform-origin: center center;
+	transform: translateZ(0);
+	perspective: 150rem;
+	transform-origin: top left;
+    }
+
+    body.shift {
+	animation: colorshift 5s 3s 3 ease-in-out;
+	perspective: 1px;
+	transform-origin: center center;
+    }
+
+    .vdo {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: calc(100% + 0px);
+	height: calc(100% + 0px);
+	margin: auto;
+	z-index: 9;
+    }
+
+    .vdo .player {
+	position: relative;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: block;
+	opacity: 0.25;
+    }
+    .vdo .player:hover {
+	transition: all 3s ease-out;
+	opacity: .95;
+    }
+
+    .vdo .player video {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	opacity: 1;
+    }
+
+
+
+
+
+    
+    .anim {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	background: green;
+
+    	transition:
+	top 3s cubic-bezier(.34,.63,.26,.94),
+	left 3s cubic-bezier(.34,.63,.26,.94),
+	transform 1s linear;
+    }
+
+    
+
+    .anim.container {
+	position: relative;
+	top: 10rem;
+	left: 10rem;
+	width: 10rem;
+	height: 10rem;
+	background: green;
+	
+	transform: rotateX(90deg);
+	transform-style: preserve-3d;
+	overflow: visible;
+
+	transition:
+	top 3s cubic-bezier(.34,.63,.26,.94),
+	left 3s cubic-bezier(.34,.63,.26,.94),
+	transform 1s linear;
+    }
+
+    div.butterfly {
+	transform-style: preserve-3d;
+        position: absolute;
+        top: calc(7.5rem);
+        left: calc(50% - 7.5rem);
+    	display: block;
+        width: 15rem;
+        height: 15rem;
+        border: 1px solid white;
+        border-radius: 50%;
+        animation: moveXY 2s infinite ease-out;
+	transform-origin: center center;
+    }
+    .wing {
+	transform-style: preserve-3d;
+        animation: flap 1.2s linear infinite alternate;
+        background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 32%,rgba(28, 92, 42, 0.9) 100%);
+    	display: block;
+	   position: relative;
+        top: 30%;
+        margin-top: -1.5rem;
+        padding: 1rem;
+        border-bottom: 0.2rem solid green;
+        width: 6rem;
+        height: 8rem;
+        border-radius: 50%;
+    }
+    .rear.wing {
+        transform: scale(1.5);
+        margin-top: -6rem;
+	width: 5rem;
+	height: 10rem;
+        background: radial-gradient(ellipse at center, rgba(252, 180, 100, 0.9) 2%,rgba(28, 92, 42, 0.9) 100%);
+    }
+    .rear.left {
+        left: calc(50% - 5rem);
+    }
+    .rear.right {
+	left: calc(50% + 0px);
+    }
+    .left {
+        transform-origin: right center;
+        left: calc(50% - 6.2rem);
+        float: left;
+    }
+    .right {
+        transform-origin: left center;
+        left: calc(50% + 2px);
+    }
+
+
+    .triangle-left{
+	width: 0;
+	height: 0;
+	border-top: 50px solid transparent; /* this will fill the top gap */
+	border-right: 100px solid red; /* this will be the red triangle */
+	border-bottom: 50px solid transparent; /* this will fill the bottom gap */
+    }
+    
+    .triangle-right {
+	width: 0;
+	height: 0;
+	border-top: 50px solid transparent; /* this will fill the top gap */
+	border-left: 100px solid red; /* this will be the red triangle */
+	border-bottom: 50px solid transparent; /* this will fill the bottom gap */
+    }
+
+    .entry {
+	position: relative;
+	min-height: 40rem;
+	text-align: center;
+    }
+
+    .entry div {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+    }
+    .entry div::before,
+    .entry div::after {
+	position: absolute;
+	content: '';
+	display: block;
+   }
+
+    #building::after {
+	padding: 5rem;
+	content: 'Singularités';
+	left: -0.5rem;
+	top: 3.5rem;
+	color: #faf37e;
+	overflow: hidden;
+	font-size: 2.3rem;
+	text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 25px #ffa500, 0 0 40px #ffa500, 0 0 60px #f00, 0 0 80px #f00, 0 0 105px #f00;
+    }
+
+    
+    
+    @keyframes colorshift {
+	58% { background-color: rgba(77,13,158, .95); }
+    }
+
+    @keyframes shake {
+	0%   { background-position: 50% 50%; transform: scale(1,1); }
+	45%  { background-position: 45% 50%; transform: scale(.085,.095); }
+	75%  { background-position: 50% 45%; }
+	100% { background-position: 50% 50%; transform: scale(1,1); }
+    }
+    
+    @keyframes moveX {
+	0%   { transform: translateX(0%); }
+	100% { transform: translateX(100%); }
+    }
+
+    @keyframes moveY {
+	0%   { transform: translateY(0%); }
+	100% { transform: translateY(100%); }
+    }
+
+    @keyframes moveZ {
+	0%   { transform: translateZ(0%); }
+	100% { transform: translateZ(100%); }
+    }
+
+    @keyframes moveXY {
+	0%   { transform: translateX(0) translateY(0) translateZ(0) rotateX(45deg) rotateX(0); }
+	50%  { transform: translateX(-20rem) rotateX(-15deg) translateY(30rem); translateZ(1rem); rotateY(2deg); }
+	100% { transform: translateX(0) translateY(-20rem) translateZ(-1rem) rotateX(45deg); }
+    }
+
+    @keyframes flap {
+	0%   {
+	    transform: rotateY(80deg);
+	}
+	100% {
+	    transform: rotateY(-80deg);
+	}
+    }
+
+} /* Parallax Stuff */
+