Review gfx section

1 files changed, 56 insertions, 0 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 749c3ad..8b89c08 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -2059,6 +2059,18 @@ there.
 /* Larger than tablet */
 /* Larger than desktop */
 /* Larger than Desktop HD */
+html[lang='en'] :lang(fr) {
+  display: none !important; }
+
+html[lang='fr'] :lang(en) {
+  display: none !important; }
+
+:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019'; }
+
+:lang(fr) {
+  quotes: '« ' ' »'; }
+
 a {
   text-decoration: none; }
   a:link {
@@ -2350,6 +2362,50 @@ span.note {
 :hover + span.note {
   display: inline; }
 
+body.gfx #krto img {
+  float: left;
+  padding-right: 2rem;
+  margin-left: -6rem; }
+body.gfx #cw {
+  position: relative;
+  z-index: 0; }
+  body.gfx #cw a {
+    z-index: 200; }
+  body.gfx #cw #gfx {
+    position: absolute;
+    z-index: -1;
+    opacity: 1;
+    margin: 0 auto;
+    width: 72rem;
+    height: 22.5rem;
+    margin-left: -6rem;
+    animation: fade-in 1s linear; }
+    body.gfx #cw #gfx svg {
+      position: relative;
+      width: 100%;
+      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); }
+
+@keyframes fade-in {
+  from {
+    opacity: 0.2; }
+  to {
+    opacity: 1; } }
+@keyframes fade-out {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0.2; } }
 body.vdo > main > article {
   background: #6d90a2; }
 body.vdo > aside:hover, body.vdo > aside:focus {