aboutsummaryrefslogtreecommitdiff
path: root/ps/ui/css
diff options
context:
space:
mode:
Diffstat (limited to 'ps/ui/css')
-rw-r--r--ps/ui/css/dpdg.css22
-rw-r--r--ps/ui/css/dppg.css8
-rw-r--r--ps/ui/css/home.css33
-rw-r--r--ps/ui/css/parallax.css188
-rw-r--r--ps/ui/css/reset.css429
-rw-r--r--ps/ui/css/rideau.css274
-rw-r--r--ps/ui/css/screen.css411
-rw-r--r--ps/ui/css/waves.css99
8 files changed, 1464 insertions, 0 deletions
diff --git a/ps/ui/css/dpdg.css b/ps/ui/css/dpdg.css
new file mode 100644
index 0000000..f41de8b
--- /dev/null
+++ b/ps/ui/css/dpdg.css
@@ -0,0 +1,22 @@
+body {
+ font-family: 'Cormorant Garamond';
+}
+
+main {
+ margin: 0 auto;
+ width: 80%;
+}
+
+main article {
+ padding: 2%;
+ font-size: 150%;
+ max-width: 60rem;
+}
+
+section {
+ margin-top: 10rem;
+}
+
+section h3 + p, h2 + p {
+ font-size: 150%;
+} \ No newline at end of file
diff --git a/ps/ui/css/dppg.css b/ps/ui/css/dppg.css
new file mode 100644
index 0000000..c7ad3dd
--- /dev/null
+++ b/ps/ui/css/dppg.css
@@ -0,0 +1,8 @@
+body {
+ font-family: 'Cormorant Garamond';
+}
+
+main {
+ margin: 0 auto;
+ width: 80%;
+} \ No newline at end of file
diff --git a/ps/ui/css/home.css b/ps/ui/css/home.css
new file mode 100644
index 0000000..32f3896
--- /dev/null
+++ b/ps/ui/css/home.css
@@ -0,0 +1,33 @@
+/* Declare variables */
+:root {
+ /* colors */
+ --grey95: rgba(0,0,0,.95);
+ --grey30: rgba(0,0,0,.3);
+
+ --color: var(--grey95);
+ /* transformations */
+ /* animations */
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+body.home {
+ background: var(--grey30);
+ color: var(--color);
+ position: absolute;
+ left: 0;
+ right: 0;
+}
+
+body > main {
+ position: relative;
+ margin: 4rem auto;
+ right: calc(100% - 3%);
+ left: calc(0% + 3%);
+} \ No newline at end of file
diff --git a/ps/ui/css/parallax.css b/ps/ui/css/parallax.css
new file mode 100644
index 0000000..97a12f9
--- /dev/null
+++ b/ps/ui/css/parallax.css
@@ -0,0 +1,188 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+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);
+ transform: translateZ(0px);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+:link,
+:visited {
+ color: rgba(255,255,255,.8);
+ text-decoration: none;
+ font-family: 'Cormorant Garamond';
+ font-weight: 600;
+ text-transform: capitalize;
+}
+
+.slides {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ perspective: 42rem;
+ perspective-origin: bottom right;
+}
+
+.slide {
+ display: flex;
+ flex-flow: row wrap;
+ background: rgba(0,100,200,.31);
+ color: rgba(250,250,250,1);
+ width: 100%;
+ min-height: 100%;
+ border: 2px solid;
+ overflow: hidden;
+ transform-style: preserve-3d;
+ transform: translateZ(0);
+ position: relative;
+ padding: 40% 5%;
+}
+.slide .bg {
+ background: repeating-linear-gradient( rgba(102, 204, 102, .4), rgba(102, 204, 102, .3) 30px, rgba(92, 184, 92, .4) 30px, rgba(92, 184, 92, .5) 60px ),
+ url(../../media/x62.png) top left, rgba(170, 204, 0, 0.1);
+ background-attachment: fixed;
+ background-size: cover;
+ background-repeat: yes;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: -1;
+ opacity: 0.8;
+ /* transform: translateZ(-150px) scale(3) translateX(3.6rem) rotate(85.5deg) translateY(5rem) rotateZ(8deg); */
+ transform: scale(3);
+ transform-style: preserve-3d;
+ transform-origin: 100% 100%;
+}
+.slide:nth-child(odd) {
+ background: rgba(60,130,120,.51);
+}
+.slide:nth-child(odd) .bg {
+ transform: scale(2) translateZ(-200px);
+}
+.slide:nth-child(2n+1) .bg {
+ background: repeating-linear-gradient( rgba(102, 204, 102, .4), rgba(102, 204, 102, .3) 30px, rgba(92, 184, 92, .4) 30px, rgba(92, 184, 92, .5) 60px ),
+ url(../../media/x42.png) top left, rgba(170, 4, 120, 0.1);
+}
+
+.slide:nth-child(1) .bg {
+ transform-origin: 0 0;
+ background: url(../img/w1.svg) top left repeat-y,
+ url(../img/w2.svg) top left repeat-y,
+ url(../img/w3.svg) top left / 10% repeat-y,
+ url(../img/w4.svg) top left / 10% repeat-y,
+ rgba(0,0,0,1);
+ background-attachment: fixed;
+ background-size: contain;
+ animation: flow-y 40s infinite ease-in-out;
+}
+
+.slide:nth-child(1) .bg::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: -1;
+ opacity: 0.8;
+ transform-origin: 0 0;
+ background: url(../img/w1.svg) center center repeat-y,
+ url(../img/w2.svg) left center repeat-y,
+ url(../img/w3.svg) left center repeat-y,
+ url(../img/w4.svg) center center repeat-y,
+ rgba(0,255,0,.7);
+ background-attachment: fixed;
+ background-size: contain;
+ animation: flow-r 40s infinite ease-in-out;
+}
+
+@keyframes flow-y {
+ 50% { background-position: 0 11rem , 0 -22rem, 0 55rem, 0 -110rem, 0 30rem; }
+}
+@keyframes flow-r {
+ 50% { background-position: 0 -1rem , 0 2rem, 0 -5rem, 0 10rem, 0 -30rem; }
+}
+
+.sine {
+ text-align: center;
+}
+.sine_span {
+ display: inline-block;
+ margin:0;
+ padding:0;
+ height: 20px;
+ width: 40px;
+ border: 1px solid black;
+}
+.sine_span_first {
+ border-bottom: none;
+ border-radius: 20px 20px 0 0;
+ transform: translate(-20px, 0) scale(2,1);
+}
+.sine_span_second {
+ border-top: none;
+ border-radius: 0 0 20px 20px;
+ transform: translate(20px, 20px) scale(2,1);
+}
+.sine_span_first_2 {
+ transform: translate(0, 20px) scale(1,2);
+}
+.sine_span_second_2 {
+ transform: translate(0, 60px) scale(1,2);
+}
+
+
+nav {
+ position: fixed;
+ z-index: 50;
+ bottom: 0;
+ width: 100%;
+ background: rgba(90,60,20,.9);
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-end;
+}
+
+@media screen and (max-width: 1024px) {
+ nav {
+ justify-content: space-around;
+ }
+}
+@media screen and (max-width: 640px) {
+ nav {
+ flex-flow: column wrap;
+ width: 0%;
+ }
+ nav li {
+ display: block;
+ }
+}
+
+nav > ul {
+ display: block;
+ list-type: none;
+ padding: 0.5rem;
+ background: rgba(200,120,40,.4);
+}
+nav li {
+ margin: 0;
+ display: inline-block;
+ padding: 0;
+
+}
diff --git a/ps/ui/css/reset.css b/ps/ui/css/reset.css
new file mode 100644
index 0000000..54c5d62
--- /dev/null
+++ b/ps/ui/css/reset.css
@@ -0,0 +1,429 @@
+@charset "utf-8";
+
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/ps/ui/css/rideau.css b/ps/ui/css/rideau.css
new file mode 100644
index 0000000..8522229
--- /dev/null
+++ b/ps/ui/css/rideau.css
@@ -0,0 +1,274 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+@font-face {
+ font-family: 'Cormorant Garamond';
+ src: local('Cormorant Garamond Regular'),
+ local('CormorantGarmaond-Regular'),
+ local('Cormorant Garamond'),
+ url('../fonts/cormorant-garamond.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+body {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background: url(../img/logo-ps.svg) center center / contain no-repeat fixed, rgba(173, 151, 56, 0.68);
+ color: rgba(250,250,250,1);
+ transform: translateZ(0px);
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: 'Cormorant Garamond';
+}
+h1 {
+ font-size: 2rem;
+}
+
+:link,
+:visited {
+ color: rgba(255,255,255,.8);
+ text-decoration: none;
+ font-family: 'Cormorant Garamond';
+ font-weight: 600;
+ text-transform: capitalize;
+}
+
+article {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 3rem;
+ height: auto;
+ vertical-align: middle;
+ color: rgba(0,0,0,.98);
+}
+
+
+iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ max-height: 100%;
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+.fold:hover iframe {
+ overflow-x: hidden;
+}
+
+.folds {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ bottom: 0;
+}
+
+.fold {
+ display: inline-block;
+ flex-flow: row wrap;
+ background: rgba(0,100,200,.31);
+ color: rgba(45, 0, 93, 0.7);
+ width: 15%;
+ height: 100%;
+ max-height: 100%;
+ margin-left: -5%;
+ border: 2px solid;
+ overflow: hidden;
+ transform-style: preserve-3d;
+ transform: translateZ(0);
+ position: relative;
+ bottom: 0;
+ transition: 250ms ease-in all;
+ z-index: 2;
+}
+
+.fold.right {
+ float: right;
+ margin-left: -5%;
+}
+
+.fold:hover {
+ position: relative;
+ width: 50%;
+ margin-left: -10%;
+ transform: rotateZ(0deg);
+ z-index: 7;
+ opacity: 1;
+ background-opacity: 1;
+ background: rgba(0,100,200,.81);
+ height: 100%;
+ bottom: 1.5rem;
+ top: 0;
+}
+.fold article {
+ display: none;
+ position: absolute;
+}
+.fold:hover article {
+ display: block;
+ bottom: 2rem;
+}
+
+/* DPDG */
+.fold:nth-child(1) {
+ transform: rotateZ(-3deg);
+ z-index: 4;
+}
+.fold:nth-child(1):hover {
+ margin-left: 0;
+ transform: rotateZ(0deg) translateX(5%) scale(1);
+ z-index: 7;
+}
+.fold:nth-child(1):hover > article {
+ display: block;
+ top: 50%;
+ width: 80%;
+ margin: 2rem auto;
+ padding: 2rem;
+}
+
+/* VDO */
+.fold:nth-child(2) {
+ transform: rotateZ(2deg);
+ z-index: 5;
+}
+.fold:nth-child(2):hover {
+ margin-left: 0;
+ transform: rotateZ(0deg) translateX(5%) scale(1);
+ z-index: 7;
+}
+/* QW */
+.fold:nth-child(3) {
+ transform: rotateZ(-1deg);
+ z-index: 6;
+}
+.fold:nth-child(3):hover {
+ margin-left: 0;
+ transform: rotateZ(0deg) translateX(5%) scale(1);
+ z-index: 7;
+}
+/* .fold.right */
+/* KRTO */
+.fold:nth-child(4) {
+ transform: rotateZ(2deg);
+ z-index: 6;
+}
+.fold:nth-child(4):hover {
+ margin-right: 0;
+ transform: rotateZ(0deg) translateX(-5%) scale(1);
+ z-index: 7;
+}
+/* β×λ */
+.fold:nth-child(5) {
+ transform: rotateZ(1deg);
+ z-index: 5;
+}
+.fold:nth-child(5):hover {
+ margin-right: 0;
+ transform: rotateZ(0deg) translateX(-5%) scale(1);
+ z-index: 7;
+}
+/* SFYW */
+.fold:nth-child(6) {
+ transform: rotateZ(-1deg);
+ z-index: 4;
+}
+.fold:nth-child(6):hover {
+ margin-right: 0;
+ transform: rotateZ(0deg) translateX(-5%) scale(1);
+ z-index: 7;
+}
+
+.fold:nth-child(odd) .bg {
+ transform-origin: 0 0;
+ background: url(../img/w1.svg) top left repeat-y,
+ url(../img/w2.svg) top left repeat-y,
+ url(../img/w3.svg) top left / 10% repeat-y,
+ url(../img/w4.svg) top left / 10% repeat-y,
+ rgba(0,0,0,1);
+ background-attachment: fixed;
+ background-size: contain;
+ animation: flow-y 40s infinite ease-in-out;
+}
+
+.fold:nth-child(odd) .bg::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: -1;
+ opacity: 0.8;
+ transform-origin: 0 0;
+ background: url(../img/w1.svg) center center repeat-y,
+ url(../img/w2.svg) left center repeat-y,
+ url(../img/w3.svg) left center repeat-y,
+ url(../img/w4.svg) center center repeat-y,
+ rgba(0,255,0,.7);
+ background-attachment: fixed;
+ background-size: contain;
+ animation: flow-r 40s infinite ease-in-out;
+}
+
+@keyframes flow-y {
+ 50% { background-position: 0 11rem , 0 -22rem, 0 55rem, 0 -110rem, 0 30rem; }
+}
+@keyframes flow-r {
+ 50% { background-position: 0 -1rem , 0 2rem, 0 -5rem, 0 10rem, 0 -30rem; }
+}
+
+nav {
+ position: fixed;
+ z-index: 50;
+ bottom: 0;
+ width: 100%;
+ background: rgba(90,60,20,.9);
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-end;
+}
+
+@media screen and (max-width: 1024px) {
+ nav {
+ justify-content: space-around;
+ }
+}
+@media screen and (max-width: 640px) {
+ nav {
+ flex-flow: column wrap;
+ width: 0%;
+ }
+ nav li {
+ display: block;
+ }
+}
+
+nav > ul {
+ display: block;
+ list-type: none;
+ padding: 0.5rem;
+ background: rgba(200,120,40,.4);
+}
+nav li {
+ margin: 0;
+ display: inline-block;
+ padding: 0;
+
+}
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 */
+
diff --git a/ps/ui/css/waves.css b/ps/ui/css/waves.css
new file mode 100644
index 0000000..113443b
--- /dev/null
+++ b/ps/ui/css/waves.css
@@ -0,0 +1,99 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html, body { overflow: hidden; height: 100%; }
+
+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);
+ transform: translateZ(0px);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+:link,
+:visited {
+ color: rgba(255,255,255,.8);
+ text-decoration: none;
+ font-family: 'Cormorant Garamond';
+ font-weight: 600;
+ text-transform: capitalize;
+}
+
+.slides {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ perspective: 42rem;
+ perspective-origin: bottom right;
+}
+
+.slide {
+ display: flex;
+ flex-flow: row wrap;
+ background: rgba(0,100,200,.31);
+ color: rgba(250,250,250,1);
+ width: 100%;
+ min-height: 100%;
+ overflow: hidden;
+ transform-style: preserve-3d;
+ transform: translateZ(0);
+ position: relative;
+ padding: 40% 5%;
+}
+.slide .bg {
+ background: url(../img/w1.svg) top left repeat-y,
+ url(../img/w2.svg) top left repeat-y,
+ url(../img/w3.svg) top left / 10% repeat-y,
+ url(../img/w4.svg) top left / 10% repeat-y,
+ rgba(0,0,0,1);
+ background-attachment: fixed;
+ background-size: contain;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: -1;
+ opacity: 0.8;
+ transform: scale(2);
+ transform-style: preserve-3d;
+ transform-origin: 0 0;
+ animation: flow-y 40s infinite ease-in-out;
+}
+
+.slide:nth-child(1) .bg::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: -1;
+ opacity: 0.8;
+ transform-origin: 0 0;
+ background: url(../img/w1.svg) center center repeat-y,
+ url(../img/w2.svg) left center repeat-y,
+ url(../img/w3.svg) left center repeat-y,
+ url(../img/w4.svg) center center repeat-y,
+ rgba(0,255,0,.7);
+ background-attachment: fixed;
+ background-size: contain;
+ animation: flow-r 40s infinite ease-in-out;
+}
+
+@keyframes flow-y {
+ 50% { background-position: 0 11rem , 0 -22rem, 0 55rem, 0 -110rem, 0 30rem; }
+}
+@keyframes flow-r {
+ 50% { background-position: 0 -1rem , 0 2rem, 0 -5rem, 0 10rem, 0 -30rem; }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 23:57:16 +0000