aboutsummaryrefslogtreecommitdiff
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/mobile.css133
-rw-r--r--assets/css/mobile.css.map7
-rw-r--r--assets/css/reset.css429
-rw-r--r--assets/css/rideau.css274
-rw-r--r--assets/css/screen.css403
-rw-r--r--assets/css/variables.css5
-rw-r--r--assets/css/variables.css.map7
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