Add assets (they are mounted at each site as /assets/

7 files changed, 1258 insertions, 0 deletions

diff --git a/assets/css/mobile.css b/assets/css/mobile.css
new file mode 100644
index 0000000..bdb2046
--- /dev/null
+++ b/assets/css/mobile.css
@@ -0,0 +1,133 @@
+@charset "UTF-8";
+/**
+ * SCSS Variables
+ **/
+html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; }
+  html[lang='en'] :lang(fr), html[lang='fr'] :lang(en) {
+    display: none; }
+
+:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019'; }
+
+:lang(fr) {
+  quotes: '« ' ' »'; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Cormorant Garamond", serif; }
+
+body {
+  background: url(../img/logo-ps.svg) center 10vh/60vh no-repeat fixed, rgba(173, 151, 56, 0.68);
+  color: #f3f0e4;
+  font-family: Abel, "Open Sans", sans-serif;
+  font-size: 1.6rem;
+  min-height: 1000px;
+  margin: 0;
+  padding: 0; }
+  body > header {
+    background-color: #6d4e80;
+    position: absolute;
+    top: 50vh;
+    height: 50vh;
+    width: 100%; }
+    body > header > h1 {
+      margin-top: calc(25vh -1vh);
+      text-align: center;
+      width: 100%; }
+      body > header > h1.fixed {
+        background-color: #6d4e80;
+        position: fixed;
+        z-index: 999;
+        margin-top: 0;
+        top: 0;
+        padding: 0.5vh 1vw;
+        text-align: left;
+        font-size: 3.5vh;
+        line-height: 5vh; }
+        body > header > h1.fixed img {
+          display: inline-block; }
+      body > header > h1 a {
+        display: inline-block;
+        text-decoration: none;
+        color: #dcc985; }
+      body > header > h1 img {
+        display: none; }
+    body > header section, body > header footer {
+      display: none; }
+  body > main {
+    position: relative;
+    top: 100vh;
+    margin: 0 auto;
+    max-width: 42vh; }
+
+#gfx, #gfx h3 {
+  background-color: rgba(191, 138, 112, 0.7); }
+
+#txt, #txt h3 {
+  background-color: rgba(166, 191, 112, 0.7); }
+
+#vdo, #vdo h3 {
+  background-color: rgba(112, 166, 191, 0.5); }
+
+.fixed.libre > h2 {
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.9);
+  color: rgba(255, 255, 255, 0.95);
+  position: fixed;
+  z-index: 999;
+  margin-top: 0;
+  top: 12vh;
+  padding: 0.5vh 1vw;
+  text-align: left;
+  line-height: 5vh; }
+.fixed.libre > section.fixed#cooperation h3 {
+  background-color: red;
+  clip: rect(0, 0, 100vw, 100vh); }
+.fixed.libre > section.fixed > h3 {
+  background-color: rgba(0, 0, 0, 0.9);
+  color: black;
+  position: fixed;
+  z-index: 999;
+  margin-top: 0;
+  top: 12vh;
+  left: 50vw;
+  right: 0;
+  padding: 0.5vh;
+  text-align: center;
+  line-height: 5vh; }
+  .fixed.libre > section.fixed > h3 a {
+    color: rgba(255, 255, 255, 0.95);
+    text-decoration: none; }
+
+.fixed.media > h2 {
+  left: 0;
+  right: 0;
+  background-color: rgba(173, 151, 56, 0.68);
+  position: fixed;
+  z-index: 999;
+  margin-top: 0;
+  top: 6vh;
+  padding: 0.5vh 1vw;
+  text-align: left;
+  line-height: 5vh; }
+.fixed.media > section.fixed#gfx h3 {
+  right: 34vw; }
+.fixed.media > section.fixed#txt h3 {
+  right: 18vw; }
+.fixed.media > section.fixed#vdo h3 {
+  right: 2vw; }
+.fixed.media > section.fixed > h3 {
+  background-color: rgba(173, 151, 56, 0.68);
+  position: fixed;
+  z-index: 999;
+  margin-top: 0;
+  top: 6vh;
+  padding: 0.5vh 1vw;
+  text-align: center;
+  line-height: 5vh;
+  width: 14vw; }
+
+/*# sourceMappingURL=mobile.css.map */
diff --git a/assets/css/mobile.css.map b/assets/css/mobile.css.map
new file mode 100644
index 0000000..b406e9f
--- /dev/null
+++ b/assets/css/mobile.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["../scss/variables.scss","../scss/mobile.scss"],
+"names": [],
+"file": "mobile.css"
+}
\ No newline at end of file
diff --git a/assets/css/reset.css b/assets/css/reset.css
new file mode 100644
index 0000000..54c5d62
--- /dev/null
+++ b/assets/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/assets/css/rideau.css b/assets/css/rideau.css
new file mode 100644
index 0000000..8522229
--- /dev/null
+++ b/assets/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/assets/css/screen.css b/assets/css/screen.css
new file mode 100644
index 0000000..d17af98
--- /dev/null
+++ b/assets/css/screen.css
@@ -0,0 +1,403 @@
+html[lang='en'] :lang(fr) {
+    display: none;
+}
+html[lang='fr'] :lang(en) {
+    display: none;
+}
+
+:lang(en) {
+    quotes: '\201C' '\201D' '\2018' '\2019';
+}
+:lang(fr) {
+    quotes: '« ' ' »';
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Cormorant Garamond', serif;
+}
+
+body {
+    background: rgba(173, 151, 56, 0.68);
+    color: #f3f0e4;
+    font-family: Abel, 'Open Sans', sans-serif;
+}
+
+body > header {
+    background-color: rgba(109, 78, 128, 1);
+    position: fixed;
+    right: 5vw;
+    bottom: -2vh;
+    left: 5vw;
+    z-index: 999;
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+body > header :link,
+body > header :visited,
+header > footer :link,
+header > footer :visited {
+/*    color: #DCCD85; */
+    color: rgba(220, 201, 133, 1);
+    text-decoration: none;
+}
+
+body :visited {
+    text-decoration: underline;
+}
+
+body > header h1 {
+    text-align: center;
+    margin: 0;
+    font-family: 'Cormorant Garamond', serif;
+/*    font-size: 2.8rem; */
+    font-size: 7vh;
+    transform: rotate(1.5deg) translateX(5vh) translateY(-1vh);
+}
+    
+body > header h1 img {
+    display: none;
+    vertical-align: -1.6rem;
+}
+
+body > header section {
+    display: none;
+    max-width: 42rem;
+    margin: 0 auto;
+    padding-bottom: 7rem;
+}
+
+body > header footer {
+    background-color: rgba(109, 78, 128, 1);
+    display: none;
+    font-size: 1rem;
+}
+body > header footer > p {
+    text-align: center;
+    margin: 4rem auto 2rem auto;
+}
+body > header footer > nav {
+    max-width: 42rem;
+    margin: 0 auto -3.5rem auto;
+    padding: 0;
+}
+footer > nav ul {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+footer > nav li {
+    display: inline-block;
+    margin: 0 0.75rem;
+    width: 4rem;
+    height: 3rem;
+    border: 1px solid;
+    border-bottom: 3px solid;
+    border-color: transparent;
+    border-top-right-radius: 0.5rem;
+    text-align: center;
+}
+footer > nav li a {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    line-height: 3rem;
+    margin: 0;
+    padding: 0;
+    background: rgba(0,0,0,0.25);
+    border-top-right-radius: 0.5rem;
+}
+footer > nav li:hover {
+    border-color: rgba(220, 201, 133, 1);
+}
+footer > nav li:hover a {
+    font-weight: bold;
+    background: rgba(0,0,0,0.5);
+}
+
+body > header:hover {
+    top: 5vh;
+}
+body > header:hover h1 {
+    font-size: 2.6rem;
+/*    transform: rotate(1.5deg) translateX(5vh) translateY(-1vh);
+    transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); */
+    transform: rotate(2.7deg) translate(0, 0) skewX(0);
+}
+
+body > header:hover img {
+    display: inline-block;
+}
+body > header:hover section,
+body > header:hover footer {
+    display: block;
+    width: 80vw;
+    margin: 0 auto;
+    padding-bottom: 3rem;
+}
+
+body > main {
+    background: url(../img/logo-ps.svg) 40% calc(50% - 5vh) / 50vw no-repeat fixed;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 50%;
+    left: 0;
+    padding: 1rem;
+    min-height: 80vh;
+}
+
+header > footer {
+    z-index: 999;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+}
+
+header > footer > nav {
+    display:none;
+}
+
+header > footer h4 {
+    display: inline-block;
+}
+
+header > footer:hover nav {
+    display: block;
+}
+/**
+ * Copyleft magic
+ **/
+header > footer:hover > p > span:first-child {
+    display: inline-block;
+    color: transparent;
+    line-height: 0;
+}
+header > footer:hover > p > span:first-child:before {
+    content: 'Copyleft';
+    display: block;
+    color: #f3f0e4;
+    padding-right: 0.4rem;
+}
+header > footer:hover > p > span + span {
+    display: inline-block;
+    transform: rotate(180deg);
+    padding-bottom: -0.05rem;
+}
+
+@media screen and (min-device-width: 1024px) {
+
+/**
+ * Scrollbar
+ *
+ *  ::-webkit-scrollbar the background of the bar itself.
+ *  ::-webkit-scrollbar-button the directional buttons on the scrollbar.
+ *  ::-webkit-scrollbar-track the empty space “below” the progress bar.
+ *  ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
+ *  ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element.
+ *  ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet.
+ *  ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.
+ **/
+
+    body > header::-webkit-scrollbar {
+	background-color: rgba(109, 78, 128, 1);
+	box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4) inset;
+    }
+    body > header::-webkit-scrollbar-button {
+	background-color: black;
+    }
+    body > header::-webkit-scrollbar-track {
+	background-color: rgba(0, 0, 0, 0.5);
+    }
+    body > header::-webkit-scrollbar-track-piece {
+	background-color: rgba(255, 255, 255, 0.5);
+    }
+    body > header::-webkit-scrollbar-thumb {
+	background-color: rgba(220, 201, 133, 1);
+	box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
+    }
+    body > header::-webkit-scrollbar-corner {
+	background-color: red;
+    }
+    body > header {
+	padding: 1rem;
+	overflow: auto;
+	transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg);
+    }
+    body > header:hover {
+	min-height: 1000px;
+	overflow-y: scroll;
+    }
+
+    
+
+    body > header:hover ~ footer {
+	position: fixed;
+	bottom: 0;
+	display: block;
+    }
+    
+    body > header:hover ~ footer > nav {
+	display: block;
+    }
+
+    .media, .libre {
+	display: block;
+	position: absolute;
+	top: 0;
+	bottom: 5rem;
+	height: 100vh;
+/*	overflow: hidden; */
+    }
+
+    .media:hover {
+	width: 70vw;
+	z-index: 500;
+    }
+    .media h2, .libre h2 {
+	display: none;
+    }
+
+    .media {
+	left: 0;
+    }
+    
+    .media section {
+	float: left;
+	position: relative;
+/*	border: 1px solid black; */
+	height: 100%;
+	width: 15vw;
+	top: -5vh;
+	left: 0;
+	padding-top: 5vh;
+	padding-left: 1rem;
+	z-index: 400;
+	overflow: hidden;
+    }
+    .media section h3 {
+	font-size: 5rem;
+	color: rgba(0,0,0,0.2);
+    }
+    .media section:hover {
+	box-shadow: 0px -2px 4px 2px rgba(0, 0, 0, 0.68) inset;
+	transform: rotate(0deg);
+	width: 40vw;
+/*	max-width: 42rem; */
+	z-index: 500;
+    }
+    .media section:hover h3 {
+	color: rgba(0, 0, 0, 1);
+    }
+    
+    .media #gfx {
+	background: rgba(191, 138, 112,0.7);
+	transform: rotate(-4deg);
+	margin: 0 -5vw 0 -2vw;
+	left: 0;
+    }
+    .media #gfx h3 {
+	transform: rotate(4deg) translateX(1vw);
+	font-size: 5rem;
+    }
+    .media #gfx:hover {
+	background: rgba(191, 138, 112, 0.9);
+	transform: rotate(0);
+	margin: 0;
+    }
+    .media #gfx:hover h3 {
+	transform: rotate(0) translateX(0) translateY(-4rem);
+    }
+    .media #gfx:hover + #txt {
+	margin-left: -3vw;
+    }
+
+    .media #txt {
+	background: rgba(166, 191, 112, 0.7);
+	transform: rotate(6deg);
+	margin: 0 -3vw 0 0;
+    }
+    .media #txt h3 {
+	transform: rotate(-6deg) translateX(-3vw) translateY(-0.1rem);
+    }
+    .media #txt:hover {
+	background: rgba(166, 191, 112, 0.9);
+	transform: rotate(0);
+	margin: 0;
+    }
+    .media #txt:hover h3 {
+	transform: rotate(0) translateX(0) translateY(-4.1rem);
+    }
+    
+    .media #vdo {
+	left: 0;
+	background: rgba(112, 166, 191, 0.5);
+	transform: rotate(-5deg);
+	margin: 0 0 0 -2vw;
+	width: 10vw;
+    }
+    .media #vdo:hover {
+	background: rgba(112, 166, 191, 0.9); 
+	margin: 0;
+	transform: rotate(0);
+	width: 40vw;
+    }
+    .media #vdo h3 {
+	transform: rotate(5deg) translateX(-2vw);
+    }
+    .media #vdo:hover h3 {
+	transform: rotate(0) translateX(0) translateY(-4rem);
+    }
+
+    .libre {
+	right: 0;
+	width: 32vw;
+    }
+    .libre > section h3 {
+	color: rgba(109, 78, 128, 1);
+	font-size: 7vh;
+	margin: 0;
+	padding: 0;
+    }
+    .libre > section p {
+	color: rgba(0, 0, 0, 0.7);
+	font-size: 4.9vh;
+	margin: 0;
+    }
+    .libre > section h3 a {
+	color: rgba(109, 78, 128, 1);
+	text-decoration: none;
+    }
+    
+    .libre #participation {
+/*	transform: rotate(-4deg) translateY(4.5rem); */
+	transform: rotate(-4deg) translateY(6vh);
+    }
+    .libre #engagement {
+/*	transform: translate(0.5rem, 7rem); */
+	transform: translate(0.5vw, 14vh);
+    }
+    .libre #cooperation {
+/*	transform: rotate(2deg) translate(0rem, 9.8rem); */
+	transform: rotate(2deg) translate(0rem, 19.5vh);
+    }
+
+}
+
+@media screen and (max-device-width: 1023px) {
+
+    body > header h1 {
+	font-size: 10rem;
+	margin: 5rem auto;
+	width: 80%
+    }
+
+    body > main {
+	background: url(../img/logo-ps.svg) center calc(92% - 50vh) / contain no-repeat fixed;
+    }
+    
+}
diff --git a/assets/css/variables.css b/assets/css/variables.css
new file mode 100644
index 0000000..a0608f8
--- /dev/null
+++ b/assets/css/variables.css
@@ -0,0 +1,5 @@
+/**
+ * SCSS Variables
+ **/
+
+/*# sourceMappingURL=variables.css.map */
diff --git a/assets/css/variables.css.map b/assets/css/variables.css.map
new file mode 100644
index 0000000..b3d0bc0
--- /dev/null
+++ b/assets/css/variables.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA;;IAEI",
+"sources": ["../scss/variables.scss"],
+"names": [],
+"file": "variables.css"
+}
\ No newline at end of file