1 files changed, 158 insertions, 0 deletions
diff --git a/assets/css/screen.css b/assets/css/screen.css
index cc0b7dc..c496125 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -1017,14 +1017,22 @@ img {
 /**
  * Layout
  **/
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 h1, h2, h3, h4, h5, h6 {
   font-family: "Cormorant Garamond", serif;
   font-weight: 600;
 }
+
 h1 a, h1 a:hover, h1 a:focus, h1 a:link, h1 a:visited, h2 a, h2 a:hover, h2 a:focus, h2 a:link, h2 a:visited, h3 a, h3 a:hover, h3 a:focus, h3 a:link, h3 a:visited, h4 a, h4 a:hover, h4 a:focus, h4 a:link, h4 a:visited, h5 a, h5 a:hover, h5 a:focus, h5 a:link, h5 a:visited, h6 a, h6 a:hover, h6 a:focus, h6 a:link, h6 a:visited {
   text-decoration: none;
   color: inherit;
 }
+
 h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
   text-decoration: underline;
   color: rgb(240, 240, 242);
@@ -1040,21 +1048,25 @@ body.ps > header {
   padding: 0 2rem;
   color: rgb(240, 240, 242);
 }
+
 body.ps > header h1 {
   margin: 0 auto;
 }
+
 body.ps > header h1:before {
   background: url(../assets/img/logo-ps.svg) center left/5rem no-repeat;
   display: block;
   width: 5rem;
   height: 5rem;
 }
+
 body.ps > header h2 {
   font-weight: 100;
   margin-top: -2.6rem;
   font-size: 3.7rem;
   transform: rotate(180deg);
 }
+
 body.ps > header p {
   font-family: "Cormorant Garamond", serif;
   font-size: 2rem;
@@ -1062,9 +1074,11 @@ body.ps > header p {
   margin: -3.8rem 0 0 0;
   padding: 0 0 0.4rem 0.3rem;
 }
+
 body.ps > header p span {
   color: black;
 }
+
 body.ps.home > header {
   background-color: rgb(109, 78, 128);
   top: unset;
@@ -1077,21 +1091,25 @@ body.ps.home > header {
   overflow: auto;
   transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg);
 }
+
 body.ps.home > header h1 {
   font-size: 7vh;
   text-align: center;
   transform: rotate(1.5deg) translateX(5vh) translateY(-1vh);
 }
+
 body.ps.home > header h1 img {
   display: none;
   vertical-align: -1.6rem;
 }
+
 body.ps.home > header section {
   display: none;
   max-width: 42rem;
   margin: 0 auto;
   padding-bottom: 7rem;
 }
+
 body.ps.home > header footer {
   background-color: rgb(109, 78, 128);
   display: none;
@@ -1103,28 +1121,35 @@ body.ps.home > header footer {
   right: 0;
   display: none;
 }
+
 body.ps.home > header footer > h4 {
   display: inline-block;
 }
+
 body.ps.home > header footer > nav {
   display: none;
 }
+
 body.ps.home > header footer > p {
   display: none;
   max-width: 42rem;
   margin: 0 auto;
   padding-bottom: 7rem;
 }
+
 body.ps.home > header:hover {
   top: 5vh;
 }
+
 body.ps.home > header:hover h1 {
   font-size: 2.6rem;
   transform: rotate(2.7deg) translate(0, 0) skewX(0);
 }
+
 body.ps.home > header:hover img {
   display: inline-block;
 }
+
 body.ps.home > header:hover section, body.ps.home > header:hover footer {
   display: block;
   width: 80vw;
@@ -1132,6 +1157,12 @@ body.ps.home > header:hover section, body.ps.home > header:hover footer {
   padding-bottom: 3rem;
 }
 
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 body > main {
   position: relative;
   top: 0rem;
@@ -1141,6 +1172,7 @@ body > main {
   margin: 0 auto;
   max-width: 96rem;
 }
+
 body > main > article {
   /* background: $bg-txt-ps-on; */
   background-color: rgb(240, 240, 242);
@@ -1160,15 +1192,18 @@ article > header p {
   padding: 0rem 4rem;
   text-align: justify;
 }
+
 article > header p:last-child {
   padding-bottom: 2rem;
 }
+
 article section:after {
   display: table;
   content: "";
   clear: both;
   margin-bottom: 2rem;
 }
+
 article aside ul {
   display: table;
   position: relative;
@@ -1176,10 +1211,12 @@ article aside ul {
   margin: 0 -8rem 1rem -8rem;
   width: calc(100% + 16rem);
 }
+
 article aside ul li {
   display: table-cell;
   text-align: center;
 }
+
 article aside ul img {
   display: block;
   background-color: black;
@@ -1187,6 +1224,7 @@ article aside ul img {
   height: 9rem;
   margin: 1rem auto;
 }
+
 article .intro {
   background-color: rgba(255, 255, 255, 0.1);
   box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
@@ -1197,28 +1235,35 @@ article .intro {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 article .intro p {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 article .intro:hover {
   max-height: 100vh;
 }
+
 article .intro:hover p {
   white-space: normal;
   overflow: auto;
 }
+
 article .outro p {
   font-size: 2rem;
   text-align: justify;
 }
+
 article video, article iframe {
   max-width: 100%;
 }
+
 article .video {
   margin: 0 -6rem 0 -4rem;
 }
+
 article .video video {
   width: 30rem;
   height: 18.875rem;
@@ -1226,9 +1271,11 @@ article .video video {
   float: left;
   margin: 0 2rem 0 -4rem;
 }
+
 article .video p {
   line-height: 1.25;
 }
+
 article .video:hover {
   /*	    video {
   		width: calc(100% + 6rem);
@@ -1236,6 +1283,7 @@ article .video:hover {
   		float: none;
   	    } */
 }
+
 article .video:hover video, article .video:hover iframe {
   width: 68rem;
   height: 38.25rem;
@@ -1272,6 +1320,12 @@ span.note {
   display: none;
 }
 
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 body > aside {
   position: fixed;
   top: calc(50% - 150px);
@@ -1281,6 +1335,7 @@ body > aside {
   width: 20rem;
   padding: 1rem;
 }
+
 body > aside:hover, body > aside:focus {
   left: 0;
   background: rgb(240, 240, 242) url(../img/aside-on.png) center left no-repeat;
@@ -1289,44 +1344,56 @@ body > aside:hover, body > aside:focus {
   border-right: 2rem solid black;
   padding: 0;
 }
+
 body > aside:hover nav, body > aside:focus nav {
   display: block;
   background: rgb(240, 240, 242) url(../img/aside-on.png) center left no-repeat;
   height: 100%;
 }
+
 body > aside:hover nav h3 a:link, body > aside:hover nav h3 a:hover, body > aside:hover nav h3 a:active, body > aside:hover nav h3 a:visited, body > aside:focus nav h3 a:link, body > aside:focus nav h3 a:hover, body > aside:focus nav h3 a:active, body > aside:focus nav h3 a:visited {
   color: transparent;
 }
+
 body > aside:hover ul li:hover a:hover, body > aside:focus ul li:hover a:hover {
   text-decoration: none;
 }
+
 body > aside:hover ul li:hover span, body > aside:focus ul li:hover span {
   display: block;
 }
+
 body > aside:hover ul li:hover:first-child, body > aside:focus ul li:hover:first-child {
   transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
 }
+
 body > aside:hover ul li:hover:first-child a, body > aside:focus ul li:hover:first-child a {
   transform: rotate(-4deg);
 }
+
 body > aside:hover ul li:hover:nth-child(2), body > aside:focus ul li:hover:nth-child(2) {
   transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
 }
+
 body > aside:hover ul li:hover:nth-child(2) a, body > aside:focus ul li:hover:nth-child(2) a {
   transform: rotate(6deg);
 }
+
 body > aside:hover ul li:hover:last-child, body > aside:focus ul li:hover:last-child {
   transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
 }
+
 body > aside:hover ul li:hover:last-child a, body > aside:focus ul li:hover:last-child a {
   transform: rotate(-5deg);
 }
+
 body > aside nav {
   position: relative;
   margin-left: 3rem;
   display: none;
   line-height: 30rem;
 }
+
 body > aside nav h3 {
   display: inline-block;
   background: url(../img/logo-ps.svg) 3rem center/10rem fixed no-repeat;
@@ -1335,6 +1402,7 @@ body > aside nav h3 {
   vertical-align: top;
   color: transparent;
 }
+
 body > aside nav h3 a {
   display: block;
   height: 100%;
@@ -1342,14 +1410,17 @@ body > aside nav h3 a {
   line-height: 30rem;
   color: transparent;
 }
+
 body > aside nav h3 a:hover {
   color: transparent;
 }
+
 body > aside nav ul {
   list-style: none;
   display: inline-block;
   height: 100%;
 }
+
 body > aside nav ul li {
   display: block;
   padding: 0 2rem;
@@ -1361,6 +1432,7 @@ body > aside nav ul li {
   width: 10rem;
   height: 100%;
 }
+
 body > aside nav ul li a {
   color: black;
   text-decoration: none;
@@ -1369,14 +1441,17 @@ body > aside nav ul li a {
   width: 100%;
   z-index: 404;
 }
+
 body > aside nav ul li a:link, body > aside nav ul li a:visited {
   color: inherit;
 }
+
 body > aside nav ul li a:hover {
   font-size: 200%;
   color: inherit;
   z-index: 404;
 }
+
 body > aside nav ul li span {
   display: none;
   z-index: 400;
@@ -1386,12 +1461,15 @@ body > aside nav ul li span {
   text-align: center;
   margin: -3rem -2rem 0 -1rem;
 }
+
 body > aside nav ul li:first-child {
   background: rgba(191, 138, 112, 0.7);
 }
+
 body > aside nav ul li:nth-child(2) {
   background: rgba(166, 191, 112, 0.9);
 }
+
 body > aside nav ul li:last-child {
   background: rgba(109, 144, 162, 0.7);
 }
@@ -1406,32 +1484,39 @@ body > footer {
   max-width: 60rem;
   font-size: 1.15rem;
 }
+
 body > footer h4 {
   margin: 0;
   font-size: 1.6rem;
 }
+
 body > footer h4 a {
   text-decoration: none;
 }
+
 body > footer a {
   white-space: nowrap;
 }
+
 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.07rem;
 }
+
 body > footer:hover > p > span:first-child + span {
   display: inline-block;
   transform: rotate(180deg) translateY(0.1rem);
@@ -1443,6 +1528,7 @@ footer > nav ul {
   padding: 0;
   list-style: none;
 }
+
 footer > nav li {
   display: inline-block;
   margin: 0 0.75rem;
@@ -1454,6 +1540,7 @@ footer > nav li {
   border-top-right-radius: 0.5rem;
   text-align: center;
 }
+
 footer > nav li a {
   position: relative;
   display: block;
@@ -1465,15 +1552,23 @@ footer > nav li a {
   background: rgba(0, 0, 0, 0.25);
   border-top-right-radius: 0.5rem;
 }
+
 footer > nav li:hover {
   border-color: rgb(220, 201, 133);
 }
+
 footer > nav li:hover a {
   font-weight: bold;
   background: rgba(0, 0, 0, 0.5);
 }
 
 /**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
+/**
  * Branding
  **/
 span.ps {
@@ -1487,9 +1582,11 @@ body {
   font-family: Abel, "Open Sans", sans-serif;
   font-size: 1em; /* No rem here, bug workaround */
 }
+
 body > header :link, body > header :visited, body > footer :link, body > footer :visited {
   color: rgb(20, 20, 20);
 }
+
 body :visited {
   text-decoration: underline;
 }
@@ -1497,28 +1594,40 @@ body :visited {
 /**
  * Page overrides
  **/
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 body.gfx {
   background-color: rgb(205, 168, 150);
 }
+
 body.gfx > aside:hover, body.gfx > aside:focus {
   background-color: rgb(205, 168, 150);
 }
+
 body.gfx > aside:hover nav ul li:first-child, body.gfx > aside:focus nav ul li:first-child {
   background: rgb(205, 168, 150);
 }
+
 body.gfx #krto img {
   float: left;
   padding-right: 2rem;
   margin-left: -6rem;
 }
+
 body.gfx #cw {
   clear: both;
   position: relative;
   z-index: 0;
 }
+
 body.gfx #cw a {
   z-index: 200;
 }
+
 body.gfx #cw #gfx {
   position: absolute;
   margin-top: -1.5rem;
@@ -1528,34 +1637,54 @@ body.gfx #cw #gfx {
   width: 72rem;
   animation: fade-in 1s linear;
 }
+
 body.gfx #cw #gfx svg {
   position: relative;
   margin-left: -7rem; /* Something is wrong with sine.js and reload */
   height: 100%;
 }
+
 body.gfx #cw:hover #gfx {
   opacity: 0.2;
   animation: fade-out 1s linear;
 }
+
 body.gfx .sinewave.w0 {
   fill: rgba(240, 40, 142, 0.5);
 }
+
 body.gfx .sinewave.w1 {
   fill: rgba(140, 140, 42, 0.5);
 }
+
 body.gfx .sinewave.w2 {
   fill: rgba(240, 142, 1, 0.5);
 }
+
 body.gfx .sinewave.w3 {
   fill: rgba(0, 110, 12, 0.5);
 }
 
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 body.txt {
   background-color: rgb(187, 205, 150);
+  /**
+   * Variables
+   **/
+  /**
+   * SCSS Variables
+   **/
 }
+
 body.txt article > header > nav {
   margin: 0 auto;
 }
+
 body.txt article > header > nav ul {
   list-style: none;
   margin: 0 auto;
@@ -1564,6 +1693,7 @@ body.txt article > header > nav ul {
   width: 100%;
   background-color: rgb(124, 118, 146);
 }
+
 body.txt article > header > nav ul li {
   margin: 0 auto;
   flex: 1;
@@ -1571,6 +1701,7 @@ body.txt article > header > nav ul li {
   width: 12rem;
   background-color: rgb(187, 205, 150);
 }
+
 body.txt article > header > nav ul li a {
   display: inline-block;
   position: relative;
@@ -1582,22 +1713,28 @@ body.txt article > header > nav ul li a {
   background-color: rgba(166, 191, 112, 0.7);
   color: black;
 }
+
 body.txt article > header > nav ul li a:last {
   padding-right: 0;
 }
+
 body.txt article > header > nav ul li a:hover, body.txt article > header > nav ul li a:active {
   background-color: rgb(187, 205, 150);
   color: black;
 }
+
 body.txt > aside:hover, body.txt > aside:focus {
   background-color: rgb(187, 205, 150);
 }
+
 body.txt > aside:hover nav ul li:nth-child(2), body.txt > aside:focus nav ul li:nth-child(2) {
   background: rgb(187, 205, 150);
 }
+
 body.txt > header h1 {
   min-height: 10rem;
 }
+
 body.txt > header h2 {
   position: absolute;
   font-size: 4.8rem;
@@ -1609,9 +1746,11 @@ body.txt > header h2 {
   margin-left: 39rem;
   margin-top: auto;
 }
+
 body.txt article aside ul img { /* see _main */
   height: 22.55rem; /* 1:1.41 for books */
 }
+
 body.txt #lang-switch {
   position: absolute;
   top: 0.1rem;
@@ -1653,15 +1792,24 @@ h3 + p.tagline {
   margin: auto;
 }
 
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 body.vda {
   background: rgb(109, 144, 162);
 }
+
 body.vda > aside:hover, body.vda > aside:focus {
   background-color: rgb(109, 144, 162);
 }
+
 body.vda > aside:hover nav ul li:last-child, body.vda > aside:focus nav ul li:last-child {
   background: rgb(109, 144, 162);
 }
+
 body.vda #HeLa p > span {
   display: block;
   background-color: teal;
@@ -1671,6 +1819,7 @@ body.vda #HeLa p > span {
   padding: 1rem;
   border-top-left-radius: 2rem;
 }
+
 body.vda #HeLa button {
   border: 1rem solid #ff667f;
   height: auto;
@@ -1681,17 +1830,26 @@ body.vda #HeLa button {
   border-bottom-right-radius: 3rem;
   font-size: larger;
 }
+
 body.vda #HeLa button:hover, body.vda #HeLa button:focus {
   border-color: teal;
   background-color: #ff667f;
 }
 
+/**
+ * Variables
+ **/
+/**
+ * SCSS Variables
+ **/
 body.vdo {
   background: rgb(109, 144, 162);
 }
+
 body.vdo > aside:hover, body.vdo > aside:focus {
   background-color: rgb(109, 144, 162);
 }
+
 body.vdo > aside:hover nav ul li:last-child, body.vdo > aside:focus nav ul li:last-child {
   background: rgb(109, 144, 162);
 }