Review gfx section

1 files changed, 87 insertions, 0 deletions

diff --git a/assets/scss/txt.scss b/assets/scss/txt.scss
index b82f0f1..e16b96b 100644
--- a/assets/scss/txt.scss
+++ b/assets/scss/txt.scss
@@ -15,6 +15,25 @@ $a-hover:   black;
 $a-active:  white;
 $a-visited: rgba(23, 123, 93, 0.8);
 
+
+@charset 'UTF-8';
+
+
+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;
     
@@ -459,3 +478,71 @@ span.note {
 :hover + span.note {
     display: inline;
 }
+
+body.gfx {
+
+    #krto img {
+	float: left;
+	padding-right: 2rem;
+	margin-left: -6rem;
+    }
+
+    #cw {
+	position: relative;
+	z-index: 0;
+	a {
+	    z-index: 200;
+	}
+	#gfx {
+	    position: absolute;
+	    z-index: -1;
+	    opacity: 1;
+	    margin: 0 auto;
+	    width: 72rem;
+	    height: 22.5rem;
+	    margin-left: -6rem;
+	    animation: fade-in 1s linear;
+	    
+	    svg {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	    }
+	}
+	&:hover #gfx {
+	    opacity: 0.2;
+	    animation: fade-out 1s linear;
+	}
+    }
+
+    .sinewave{
+	&.w0 {
+            fill: rgba(240, 40, 142, 0.5);
+	}
+	&.w1 {
+            fill: rgba(140, 140, 42, 0.5);
+	}
+	&.w2 {
+            fill: rgba(240, 142, 1, 0.5);
+	}
+	&.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;
+    }
+}