Fix CSS

7 files changed, 598 insertions, 1233 deletions

diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 1cc22c5..638e678 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -17,8 +17,9 @@ $bg-txt-on:  rgba(166, 191, 112, 0.9);
 $bg-vdo-off: rgba(112, 166, 191, 0.5);
 $bg-vdo-on:  rgba(112, 166, 191, 0.9);
 
+
 // Fonts
 
-$font-h: 'Cormorant Garamond', serif;
-$font-t: Abel, 'Open Sans', sans-serif;
+$serif:      'Cormorant Garamond', serif;
+$sans-serif: Abel, 'Open Sans', sans-serif;
 
diff --git a/assets/scss/mobile.css b/assets/scss/mobile.css
deleted file mode 100644
index bdb2046..0000000
--- a/assets/scss/mobile.css
+++ /dev/null
@@ -1,133 +0,0 @@
-@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/scss/mobile.css.map b/assets/scss/mobile.css.map
deleted file mode 100644
index c1488e0..0000000
--- a/assets/scss/mobile.css.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "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",
-"sources": ["_variables.scss","mobile.scss"],
-"names": [],
-"file": "mobile.css"
-}
\ No newline at end of file
diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss
new file mode 100644
index 0000000..4bc59a9
--- /dev/null
+++ b/assets/scss/txt.scss
@@ -0,0 +1,385 @@
+@import 'variables';
+@import 'normalize';
+@import 'skeleton';
+
+$bg-main:   rgba(240, 240, 242, 1);
+$bg-gfx:    rgba(191, 138, 112, 0.7);
+$bg-gfx-on: rgba(205, 168, 150, 1);
+$bg-txt:    rgba(166, 191, 112, 0.9);
+$bg-txt-on: rgba(187, 205, 150, 1);
+$bg-vdo:    rgba(109, 144, 162, 0.7);
+$bg-vdo-on: rgba(109, 144, 162, 1);
+
+h1,h2,h3,h4,h5,h6 {
+    font-family: $serif;
+    font-weight: 600;
+
+    a, a:hover, a:focus {
+	text-decoration: none;
+	color: inherit;
+    }
+}
+
+
+
+
+body {
+    font-family: $sans-serif;
+    font-size: 1em; /* No rem here, bug workaround */
+    background: $bg-main;
+    color: rgba(0, 0, 0, 1);
+}
+
+body > header {
+
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgba(124, 118, 146, 1);
+    padding: 0 2rem;
+    color: rgba(240, 240, 242, 1);
+
+    h1 {
+	margin: 0 auto;
+
+	&:before {
+	    background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat;
+	    display: block;
+	    width: 5rem;
+	    height: 5rem;
+	}
+    }
+
+    h2 {
+	font-weight: 100;
+	margin-top: -2.6rem;
+	font-size: 3.7rem;
+	transform: rotate(180deg);
+    }
+
+    p {
+	font-family: $serif;
+	font-size: 2rem;
+	font-style: italic;
+	margin: -3.8rem 0 0 0;
+	padding: 0 0 0.4rem 0.3rem;
+
+	span {
+	    color: black;
+	}
+    }
+    
+}
+
+body > main {
+
+    position: relative;
+    top: 0rem;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    max-width: 96rem;
+    font-size: 1.6rem;
+    
+    > article {
+	margin: 0 auto;
+	background: $bg-txt;
+	max-width: 60rem;
+	min-height: calc(100vh - 24rem);
+	padding: 12rem 9rem;	
+    }
+
+}
+
+body {
+
+    &.gfx {
+	> main > article {
+	    background: $bg-gfx-on;
+	}
+	> aside {
+	    &:hover, &:focus {
+		background-color: $bg-gfx-on;
+		nav ul li:first-child {
+		    background: $bg-gfx-on;
+		}
+	    }
+	}
+    }
+    
+    &.txt {
+	> main > article {
+	    background: $bg-txt-on;
+	}
+	> aside {
+	    &:hover, &:focus {
+		background-color: $bg-txt-on;
+		nav ul li:nth-child(2) {
+		    background: $bg-txt-on;
+		}
+	    }
+	}
+    }
+    
+    &.vdo {
+	> main > article {
+	    background: $bg-vdo-on;
+	}
+	> aside {
+	    &:hover, &:focus {
+		background-color: $bg-vdo-on;
+		nav ul li:last-child {
+		    background: $bg-vdo-on;
+		}
+	    }
+	}
+    }
+
+    > aside {
+
+	position: fixed;
+	top: calc(50% - 150px);
+	height: 300px;
+	background: black url(../img/aside-off.png) center right no-repeat;
+	left: -20rem;
+	width: 20rem;
+	padding: 1rem;
+
+	&:hover, &:focus {
+	    left: 0;
+	    background: $bg-main url(../img/aside-on.png) center left no-repeat;
+	    box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
+	    width: auto;
+	    border-right: 2rem solid black;
+	    padding: 0;
+
+	    nav {
+		display: block;
+		background: $bg-main url(../img/aside-on.png) center left no-repeat;
+		height: 100%;
+	    }
+
+	    ul li:hover {
+		span {
+		    display: block;
+		}
+		&:first-child {
+		    transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
+		    a {
+			transform: rotate(-4deg);
+		    }
+		}
+		&:nth-child(2) {
+		    transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
+		    a {
+			transform: rotate(6deg);
+		    }
+		}
+		&:last-child {
+		    transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
+		    a {
+			transform: rotate(-5deg);
+		    }
+		}
+	    }
+	}
+	
+	nav {
+	    position: relative;
+	    margin-left: 3rem;
+	    display: none;
+	    line-height: 30rem;
+
+	    h3 {
+		display: inline-block;
+		background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat;
+		width: 10rem;
+		height: 100%;
+		vertical-align: top;
+		color: transparent;
+
+		
+		a {
+		    display: block;
+		    height: 100%;
+		    width: 100%;
+		    line-height: 30rem;
+		    color: transparent;
+		    &:hover {
+			color: transparent;
+		    }
+		}
+	    }
+
+	    ul {
+		list-style: none;
+		display: inline-block;
+		height: 100%;
+
+		li {
+		    display: block;
+		    padding: 0 2rem;
+		    font-size: 3rem;
+		    float: left;
+		    padding-left: 1rem;
+		    z-index: 400;
+		    overflow: hidden;
+		    width: 10rem;
+		    height: 100%;
+
+		    a {
+			color: black;
+			text-decoration: none;
+			display: block;
+			height: 100%;
+			width: 100%;
+			z-index: 404;
+
+			&:hover {
+			    font-size: 200%;
+			    color: inherit;
+			    z-index: 404;
+			}
+		    }
+
+		    span {
+			display: none;
+			z-index: 400;
+			position: relative;
+			font-size: 1.25rem;
+			line-height: 1.6rem;
+			text-align: center;
+			margin: -3rem -2rem 0 -1rem;
+		    }
+
+		    &:first-child {
+			background: $bg-gfx;
+		    }
+
+		    &:nth-child(2) {
+			background: $bg-txt;
+		    }
+
+		    &:last-child {
+			background: $bg-vdo;
+		    }
+		}
+	    }
+	}
+    }
+}
+
+body > footer {
+
+    position: relative;
+    left: 0;
+    right: 0;
+    max-width: 60rem;
+    margin: 5rem auto 2rem auto;
+
+}
+
+article > header {
+
+    p {
+	font-size: 2rem;
+	line-height: 1.25;
+	font-family: $serif;
+	text-variant: italic;
+	padding: 2rem 4rem;
+	text-align: justify;
+    }
+
+}
+
+article {
+
+    section:after {
+	display: table;
+	content: "";
+	clear: both;
+	margin-bottom: 2rem;
+    }
+
+    aside {
+
+	
+	ul {
+	    display: table;
+	    position: relative;
+	    list-style: none;
+	    margin: 0 -8rem 1rem -8rem;
+	    width: calc(100% + 16rem);
+
+	    
+	    li {
+		display: table-cell;
+		text-align: center;
+	    }
+
+	    img {
+		display: block;
+		width: 16rem;
+		height: 9rem;
+		background-color: black;
+		margin: 1rem auto;
+	    }
+	}
+    }
+
+    .outro {
+	p {
+	    font-size: 2rem;
+	    text-align: justify;
+	}
+    }
+
+    .intro {
+	background-color: rgba(255, 255, 255, 0.1);
+	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
+	height: auto;
+	max-height: 2rem;
+	margin: 2rem;
+	padding: 2rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	
+	p {
+	    white-space: nowrap;
+	    overflow: hidden;
+	    text-overflow: ellipsis;
+	}
+
+	&:hover {
+	    max-height: 100vh;
+	    p {
+		white-space: normal;
+		overflow: auto;
+	    }
+	}
+    }
+
+    .video {
+	margin: 0 -6rem 0 -4rem;
+	
+	video {
+	    width: 30rem;
+	    background: black;
+	    float: left;
+	    margin: 0 2rem 0 -4rem;
+	}
+	p {
+	    line-height: 1.25;
+	}
+	&:hover {
+	    video {
+		width: calc(100% + 6rem);
+		height: auto;
+		float: none;
+	    }
+	}
+    }
+
+}
diff --git a/assets/scss/www.css b/assets/scss/www.css
deleted file mode 100644
index 943dd2a..0000000
--- a/assets/scss/www.css
+++ /dev/null
@@ -1,1072 +0,0 @@
-@charset "UTF-8";
-/**
- * Dyne:BXL screen stylesheet
-**/
-/*! 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"],
-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; }
-
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
-*
-* Adapted for Devuan.org by hellekin, 2016
-*/
-/* Table of contents
-––––––––––––––––––––––––––––––––––––––––––––––––––
-- Grid
-- Base Styles
-- Typography
-- Links
-- Buttons
-- Forms
-- Lists
-- Code
-- Tables
-- Spacing
-- Utilities
-- Clearing
-- Media Queries
-*/
-/* Grid
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box; }
-
-.column,
-.columns {
-  width: 100%;
-  float: left;
-  box-sizing: border-box; }
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
-  .container {
-    width: 85%;
-    padding: 0; } }
-/* For devices larger than 550px */
-@media (min-width: 550px) {
-  .container {
-    width: 80%; }
-
-  .column,
-  .columns {
-    margin-left: 4%; }
-
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }
-
-  .one.column,
-  .one.columns {
-    width: 4.66666666667%; }
-
-  .two.columns {
-    width: 13.3333333333%; }
-
-  .three.columns {
-    width: 22%; }
-
-  .four.columns {
-    width: 30.6666666667%; }
-
-  .five.columns {
-    width: 39.3333333333%; }
-
-  .six.columns {
-    width: 48%; }
-
-  .seven.columns {
-    width: 56.6666666667%; }
-
-  .eight.columns {
-    width: 65.3333333333%; }
-
-  .nine.columns {
-    width: 74.0%; }
-
-  .ten.columns {
-    width: 82.6666666667%; }
-
-  .eleven.columns {
-    width: 91.3333333333%; }
-
-  .twelve.columns {
-    width: 100%;
-    margin-left: 0; }
-
-  .one-third.column {
-    width: 30.6666666667%; }
-
-  .two-thirds.column {
-    width: 65.3333333333%; }
-
-  .one-half.column {
-    width: 48%; }
-
-  /* Offsets */
-  .offset-by-one.column,
-  .offset-by-one.columns {
-    margin-left: 8.66666666667%; }
-
-  .offset-by-two.column,
-  .offset-by-two.columns {
-    margin-left: 17.3333333333%; }
-
-  .offset-by-three.column,
-  .offset-by-three.columns {
-    margin-left: 26%; }
-
-  .offset-by-four.column,
-  .offset-by-four.columns {
-    margin-left: 34.6666666667%; }
-
-  .offset-by-five.column,
-  .offset-by-five.columns {
-    margin-left: 43.3333333333%; }
-
-  .offset-by-six.column,
-  .offset-by-six.columns {
-    margin-left: 52%; }
-
-  .offset-by-seven.column,
-  .offset-by-seven.columns {
-    margin-left: 60.6666666667%; }
-
-  .offset-by-eight.column,
-  .offset-by-eight.columns {
-    margin-left: 69.3333333333%; }
-
-  .offset-by-nine.column,
-  .offset-by-nine.columns {
-    margin-left: 78.0%; }
-
-  .offset-by-ten.column,
-  .offset-by-ten.columns {
-    margin-left: 86.6666666667%; }
-
-  .offset-by-eleven.column,
-  .offset-by-eleven.columns {
-    margin-left: 95.3333333333%; }
-
-  .offset-by-one-third.column,
-  .offset-by-one-third.columns {
-    margin-left: 34.6666666667%; }
-
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns {
-    margin-left: 69.3333333333%; }
-
-  .offset-by-one-half.column,
-  .offset-by-one-half.columns {
-    margin-left: 52%; } }
-/* Base Styles
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-html {
-  font-size: 62.5%; }
-
-body {
-  font-size: 1.5em;
-  /* currently ems cause chrome bug misinterpreting rems on body element */
-  line-height: 1.6;
-  font-weight: 400;
-  font-family: 'Open Sans', open-sans, Lato, 'Fira Sans', Helvetica, Arial, sans-serif;
-  color: #222; }
-
-/* Typography
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
-
-h1 {
-  font-size: 4.0rem;
-  line-height: 1.2;
-  letter-spacing: -.1rem; }
-
-h2 {
-  font-size: 3.6rem;
-  line-height: 1.25;
-  letter-spacing: -.1rem; }
-
-h3 {
-  font-size: 3.0rem;
-  line-height: 1.3;
-  letter-spacing: -.1rem; }
-
-h4 {
-  font-size: 2.4rem;
-  line-height: 1.35;
-  letter-spacing: -.08rem; }
-
-h5 {
-  font-size: 1.8rem;
-  line-height: 1.5;
-  letter-spacing: -.05rem; }
-
-h6 {
-  font-size: 1.5rem;
-  line-height: 1.6;
-  letter-spacing: 0; }
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 {
-    font-size: 5.0rem; }
-
-  h2 {
-    font-size: 4.2rem; }
-
-  h3 {
-    font-size: 3.6rem; }
-
-  h4 {
-    font-size: 3.0rem; }
-
-  h5 {
-    font-size: 2.4rem; }
-
-  h6 {
-    font-size: 1.5rem; } }
-p {
-  margin-top: 0; }
-
-/* Links
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
-  color: #1EAEDB; }
-
-a:hover {
-  color: #0FA0CE; }
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  display: inline-block;
-  height: 3.8rem;
-  padding: 0 2rem;
-  color: #555;
-  text-align: center;
-  font-size: 1.1rem;
-  font-weight: 600;
-  line-height: 3.8rem;
-  letter-spacing: .1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 0.4rem;
-  border: 1px solid #bbb;
-  cursor: pointer;
-  box-sizing: border-box; }
-
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
-  color: #333;
-  border-color: #888;
-  outline: 0; }
-
-.button.button-primary,
-button.button-primary,
-input[type="submit"].button-primary,
-input[type="reset"].button-primary,
-input[type="button"].button-primary {
-  color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
-
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-button.button-primary:focus,
-input[type="submit"].button-primary:focus,
-input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
-  color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-  height: 38px;
-  padding: 6px 10px;
-  /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
-  border: 1px solid #D1D1D1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box; }
-
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none; }
-
-textarea {
-  min-height: 65px;
-  padding-top: 6px;
-  padding-bottom: 6px; }
-
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-  border: 1px solid #33C3F0;
-  outline: 0; }
-
-label,
-legend {
-  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600; }
-
-fieldset {
-  padding: 0;
-  border-width: 0; }
-
-input[type="checkbox"],
-input[type="radio"] {
-  display: inline; }
-
-label > .label-body {
-  display: inline-block;
-  margin-left: .5rem;
-  font-weight: normal; }
-
-/* Lists
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul {
-  list-style: circle outside; }
-
-ol {
-  list-style: decimal inside; }
-
-ol, ul {
-  padding-left: 0;
-  margin-top: 0; }
-
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%; }
-
-li {
-  margin-bottom: 0.25rem; }
-
-/* Code
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-code {
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
-  font-size: 90%;
-  white-space: nowrap;
-  background: #F1F1F1;
-  border: 1px solid #E1E1E1;
-  border-radius: 4px; }
-
-pre > code {
-  display: block;
-  padding: 1rem 1.5rem;
-  white-space: pre; }
-
-/* Tables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-th,
-td {
-  padding: 12px 15px;
-  text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
-
-th:first-child,
-td:first-child {
-  padding-left: 0; }
-
-th:last-child,
-td:last-child {
-  padding-right: 0; }
-
-/* Spacing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
-  margin-bottom: 1rem; }
-
-input,
-textarea,
-select,
-fieldset {
-  margin-bottom: 1.5rem; }
-
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form {
-  margin-bottom: 2.5rem; }
-
-/* Utilities
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-
-.u-pull-right {
-  float: right; }
-
-.u-pull-left {
-  float: left; }
-
-/* Misc
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-hr {
-  margin-top: 3rem;
-  margin-bottom: 3.5rem;
-  border-width: 0;
-  border-top: 1px solid #E1E1E1; }
-
-/* Clearing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* Self Clearing Goodness */
-.container:after,
-.row:after,
-.u-cf {
-  content: "";
-  display: table;
-  clear: both; }
-
-/* Media Queries
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
-Note: The best way to structure the use of media queries is to create the queries
-near the relevant code. For example, if you wanted to change the styles for buttons
-on small devices, paste the mobile query code up in the buttons section and style it
-there.
-*/
-/* Larger than mobile */
-/* Larger than phablet (also point when grid becomes active) */
-/* Larger than tablet */
-/* Larger than desktop */
-/* Larger than Desktop HD */
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Cormorant Garamond", serif;
-  font-weight: 600; }
-
-body {
-  font-family: "Open Sans", sans-serif;
-  font-size: 1em;
-  /* No rem here, bug workaround */
-  background-color: #f0f0f2;
-  color: #090807; }
-  body > header {
-    position: fixed;
-    z-index: 999;
-    background-color: rgba(120, 120, 125, 0.85);
-    width: 100%;
-    height: 3rem;
-    overflow: hidden;
-    box-shadow: 0.1rem 0.2rem 0.3rem black;
-    /* Rotate a bit */
-    transform: rotate(-1.75deg);
-    top: -2.5rem;
-    left: -1rem; }
-    body > header h1 {
-      transform: rotate(1.75deg);
-      font-weight: bold;
-      font-size: 2rem;
-      padding: 2.8rem 3rem 2rem 2rem; }
-    body > header p.lead {
-      display: none; }
-    body > header:focus, body > header:hover {
-      background-color: rgba(90, 90, 90, 0.95);
-      overflow: none;
-      height: auto;
-      transform: rotate(0);
-      top: 0;
-      left: 0;
-      padding: 1rem; }
-      body > header:focus h1, body > header:hover h1 {
-        display: none; }
-      body > header:focus p.lead, body > header:hover p.lead {
-        display: block;
-        position: relative;
-        margin: 0 auto;
-        padding: 2rem 3rem 2rem 2rem;
-        max-width: 43rem;
-        text-align: justify;
-        font-size: 2rem;
-        color: white; }
-  body :target {
-    padding-top: 3rem; }
-  body > main {
-    margin: 0 auto;
-    width: 85%;
-    max-width: 96rem;
-    padding-top: 4rem;
-    background-color: inherit; }
-    body > main > article {
-      z-index: 20; }
-      body > main > article svg {
-        margin: 0 auto;
-        padding: 0;
-        overflow: hidden;
-        position: fixed;
-        display: block;
-        left: 0;
-        height: 20rem;
-        top: calc(50% - 100px);
-        margin-top: calc(- 105px); }
-  body > aside {
-    position: fixed;
-    display: block;
-    left: 0;
-    width: 92rem;
-    height: 20rem;
-    top: 50%;
-    margin-top: -10rem;
-    margin-left: -90rem;
-    background: url(../img/aside-off.png) right center no-repeat, rgba(30, 174, 219, 0.9); }
-    body > aside:hover, body > aside:focus {
-      background: url(../img/aside-on.png) left center no-repeat, white;
-      margin-left: 0;
-      width: auto;
-      padding: 1rem 2rem;
-      animation: navbar 1s ease-in;
-      border-right: 2rem solid rgba(120, 120, 125, 0.85);
-      box-shadow: 0.1rem 0.2rem 0.3rem black; }
-    body > aside ul {
-      font-size: 2rem;
-      list-style: none;
-      font-family: 'Cormorant Garamond', serif;
-      font-weight: 700;
-      margin: 0;
-      padding: 1rem; }
-  body > footer {
-    position: fixed;
-    bottom: 0;
-    border-top: 1rem; }
-
-article {
-  font-size: 1.6rem;
-  margin: 0 auto; }
-  article p {
-    margin: 0 3% 2.5rem 3%;
-    max-width: 42rem;
-    font-size: 105%;
-    text-align: justify; }
-  article video {
-    background: white;
-    height: 40rem;
-    margin-top: 5rem; }
-
-div.map {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  width: auto;
-  min-width: 50rem;
-  max-width: 50%;
-  z-index: 5; }
-  div.map:hover {
-    max-width: 90%; }
-
-@-webkit-keyframes navbar,
-@keyframes navbar {
-  from {
-    margin-left: -100rem; }
-  to {
-    margin-lefT: 0; } }
-@media screen and (max-width: 1024px) {
-  body > header {
-    width: 110%;
-    height: 4.5rem; }
-    body > header:focus, body > header:hover {
-      width: 100%;
-      padding-right: 4rem; }
-
-  iframe[src*="openstreetmap."] {
-    width: auto;
-    min-width: 2rem;
-    max-width: 50%; } }
-.DB {
-  font-family: 'Open Sans', sans-serif;
-  font-weight: bold; }
-
-body.article main > article h2 + h3 {
-  font-size: 3.2rem;
-  font-style: italic;
-  font-weight: normal;
-  margin-top: -3rem; }
-
-blockquote {
-  font-family: "Cormorant Garamond", serif;
-  font-size: 2.4rem;
-  font-style: italic; }
-
-body > header > nav ul {
-  display: inline-flex;
-  font-size: 1.8rem;
-  list-style: none;
-  margin: 0 auto;
-  width: 100%; }
-body > header > nav li {
-  text-align: center;
-  width: 11%; }
-  body > header > nav li a {
-    color: white; }
-  body > header > nav li .current {
-    font-size: 125%; }
-
-body.people figure {
-  display: inline-block; }
-  body.people figure img {
-    max-width: 20rem; }
-  body.people figure p {
-    margin: 0;
-    padding: 0; }
-
-.player path {
-  opacity: 0.5; }
-
-/**
- * Copyleft magic
- **/
-body > footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: block;
-  width: 80vw;
-  margin: 0 auto;
-  padding-bottom: 3rem; }
-  body > footer:hover > p > span:first-child {
-    display: inline-block;
-    color: transparent;
-    line-height: 0; }
-  body > footer:hover > p > span:first-child:before {
-    content: 'Copyleft';
-    display: block;
-    color: black;
-    padding-right: 0.4rem; }
-  body > footer:hover > p > span + span {
-    display: inline-block;
-    transform: rotate(180deg);
-    padding-bottom: -0.05rem; }
-
-/*# sourceMappingURL=www.css.map */
diff --git a/assets/scss/www.css.map b/assets/scss/www.css.map
deleted file mode 100644
index be004a3..0000000
--- a/assets/scss/www.css.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "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",
-"sources": ["www.scss","_normalize.scss","_skeleton.scss"],
-"names": [],
-"file": "www.css"
-}
\ No newline at end of file
diff --git a/assets/scss/www.scss b/assets/scss/www.scss
index f75a975..c290599 100755
--- a/assets/scss/www.scss
+++ b/assets/scss/www.scss
@@ -5,6 +5,13 @@
 $header-height: 3rem;
 $serif: 'Cormorant Garamond', serif;
 $sans-serif: 'Open Sans', sans-serif;
+$bg-main:   rgba(240, 240, 242, 1);
+$bg-gfx:    rgba(191, 138, 112, 0.7);
+$bg-gfx-on: rgba(205, 168, 150, 1);
+$bg-txt:    rgba(166, 191, 112, 0.9);
+$bg-txt-on: rgba(187, 205, 150, 1);
+$bg-vdo:    rgba(109, 144, 162, 0.7);
+$bg-vdo-on: rgba(109, 144, 162, 1);
 
 @import 'normalize';
 @import 'skeleton';
@@ -40,8 +47,46 @@ body {
 	    padding: 2.8rem 3rem 2rem 2rem;
 	}
 
-	p.lead {
+	p.lead, nav {
 	    display:none;
+	    position: relative;
+	    margin: 0 auto;
+	    padding: 2rem;
+	    max-width: 43rem;
+	    text-align: justify;
+	    font-size: 2rem;
+	    color: rgba(255,255,255,1);
+	}
+
+	nav ul {
+	    list-style: none;
+	    margin-bottom: 1rem;
+	    padding: 0;
+
+	    li {
+		font-variant: small-caps;
+		margin: 0 auto;
+		padding: 0;
+		text-align: center;
+		width: 100%;
+		background: rgba(0, 0, 0, 0.1);
+		border: 1px solid transparent;
+		&:hover, &:focus {
+		    background-color: rgba(255,255,255,0.1);
+		    border-color: black;
+		    border-top-right-radius: 1rem;
+		}
+	    }
+
+	    a {
+		display: block;
+		height: 100%;
+		padding: 1rem;
+		text-decoration: none;
+		&:hover {
+		    color: white;
+		}
+	    }
 	}
 
 	&:focus,
@@ -60,13 +105,10 @@ body {
 
 	    p.lead {
 	        display: block;
-		position: relative;
-		margin: 0 auto;
-		padding: 2rem 3rem 2rem 2rem;
-		max-width: 43rem;
-		text-align: justify;
-		font-size: 2rem;
-		color: rgba(255,255,255,1);
+	    }
+
+	    nav {
+		display: block;
 	    }
 	}
     }
@@ -99,6 +141,139 @@ body {
 	}
     }
 
+    > aside {
+
+	position: fixed;
+	top: calc(50% - 150px);
+	height: 300px;
+	background: black url(../img/aside-off.png) center right no-repeat;
+	left: -20rem;
+	width: 20rem;
+	padding: 1rem;
+
+	&:hover, &:focus {
+	    left: 0;
+	    background: $bg-main url(../img/aside-on.png) center left no-repeat;
+	    box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
+	    width: auto;
+	    border-right: 2rem solid black;
+	    padding: 0;
+
+	    nav {
+		display: block;
+		background: $bg-main url(../img/aside-on.png) center left no-repeat;
+		height: 100%;
+	    }
+
+	    ul li:hover {
+		span {
+		    display: block;
+		}
+		&:first-child {
+		    transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
+		    a {
+			transform: rotate(-4deg);
+		    }
+		}
+		&:nth-child(2) {
+		    transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
+		    a {
+			transform: rotate(6deg);
+		    }
+		}
+		&:last-child {
+		    transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
+		    a {
+			transform: rotate(-5deg);
+		    }
+		}
+	    }
+	}
+	
+	nav {
+	    position: relative;
+	    margin-left: 3rem;
+	    display: none;
+	    line-height: 30rem;
+
+	    h3 {
+		display: inline-block;
+		background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat;
+		width: 10rem;
+		height: 100%;
+		vertical-align: top;
+		color: transparent;
+
+		
+		a {
+		    display: block;
+		    height: 100%;
+		    width: 100%;
+		    line-height: 30rem;
+		    color: transparent;
+		    &:hover {
+			color: transparent;
+		    }
+		}
+	    }
+
+	    ul {
+		list-style: none;
+		display: inline-block;
+		height: 100%;
+
+		li {
+		    display: block;
+		    padding: 0 2rem;
+		    font-size: 3rem;
+		    float: left;
+		    padding-left: 1rem;
+		    z-index: 400;
+		    overflow: hidden;
+		    width: 10rem;
+		    height: 100%;
+
+		    a {
+			color: black;
+			text-decoration: none;
+			display: block;
+			height: 100%;
+			width: 100%;
+			z-index: 404;
+
+			&:hover {
+			    font-size: 200%;
+			    color: inherit;
+			    z-index: 404;
+			}
+		    }
+
+		    span {
+			display: none;
+			z-index: 400;
+			position: relative;
+			font-size: 1.25rem;
+			line-height: 1.6rem;
+			text-align: center;
+			margin: -3rem -2rem 0 -1rem;
+		    }
+
+		    &:first-child {
+			background: $bg-gfx;
+		    }
+
+		    &:nth-child(2) {
+			background: $bg-txt;
+		    }
+
+		    &:last-child {
+			background: $bg-vdo;
+		    }
+		}
+	    }
+	}
+    }
+/*
     >aside {
 	position: fixed;
 	display: block;
@@ -109,14 +284,15 @@ body {
 	margin-top: -10rem;
 	margin-left: -90rem;
 	background: url(../img/aside-off.png) right center no-repeat,rgba(30, 174, 219, 0.9) ;
-
+	animation: aside-off 250ms ease-in;
+	
 	&:hover,
 	&:focus {
 	    background: url(../img/aside-on.png) left center no-repeat, white;
 	    margin-left: 0;
 	    width: auto;
 	    padding: 1rem 2rem;
-	    animation: navbar 1s ease-in;
+	    animation: aside-on 250ms ease-in;
 	    border-right: 2rem solid rgba(120, 120, 125, 0.85);
 	    box-shadow: 0.1rem 0.2rem 0.3rem black;
 	}
@@ -130,11 +306,12 @@ body {
 	    padding: 1rem;
 	}
     }
-
+*/
     >footer {
-	position: fixed;
+	position: relative;
 	bottom: 0;
 	border-top: 1rem;
+	margin-top: 5rem;
     }
 }
 
@@ -297,3 +474,24 @@ body > footer {
 	}
     }
 }
+
+@keyframes aside-off {
+    from {
+	width: 0;
+	margin-left: 0;
+    }
+    to {
+	width: 92rem;
+	margin-left: -90rem;
+    }
+}
+@keyframes aside-on {
+    from {
+	width: 92rem;
+	margin-left: -90rem;
+    }
+    to {
+	width: 20rem;
+	margin-left: 0;
+    }
+}