Adjust curtain margins

2 files changed, 69 insertions, 86 deletions

diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 57ebccc..8f31726 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -425,11 +425,11 @@ body > footer {
     .media #gfx {
 	background: rgba(191, 138, 112,0.7);
 	transform: rotate(-4deg);
-	margin: 0 -3vw 0 0;
+	margin: 0 -3vw 0 -2vw;
 	left: 0;
 
 	h3 {
-	    transform: rotate(4deg) translateX(1vw);
+	    transform: rotate(4deg) translateX(3vw);
 	    font-size: 5rem;
 	}
 
@@ -443,7 +443,7 @@ body > footer {
 	&:hover {
 	    background: rgba(191, 138, 112, 0.9);
 	    transform: rotate(0);
-	    margin: 0;
+	    margin: 1vw 0 0 0;
 	    color: black;
 	    padding: 1rem;
 
@@ -471,23 +471,29 @@ body > footer {
 
     .media #txt {
 	background: rgba(166, 191, 112, 0.7);
-	transform: rotate(6deg);
-	margin: 0 -3vw 0 0;
+	transform: rotate(6deg) translateX(-1.5vw);
+	margin: 1vw -3vw 0 0;
 	color: transparent;
+
+	h3 {
+	    transform: rotate(-6deg) translateX(1.5vw) translateY(-1.2rem);
+	    margin-left: -1vw;
+	}
+
+	&:hover {
+	    background: rgba(166, 191, 112, 0.9);
+	    transform: rotate(0);
+	    margin: 1vw 0 0 0;
+	    color: black;
+	    padding: 1rem;
+
+	    h3 {
+		transform: rotate(0) translateX(0) translateY(-4rem);
+		margin-left: 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;
-	color: black;
-	padding: 1rem;
-    }
-    .media #txt:hover h3 {
-	transform: rotate(0) translateX(0) translateY(-4.1rem);
-    }
+
     .media section h3 a {
 	position: relative;
 	display: block;
@@ -512,52 +518,54 @@ body > footer {
     .media #vda {
 	left: 0;
 	background: rgba(112, 166, 191, 0.5);
-	transform: rotate(-5deg);
-	margin: 0 0 0 -2vw;
-	width: 10vw;
+	transform: rotate(-2.5deg) translateX(1vw);
+	margin: 0 0 0 -3vw;
+	width: 12.5vw;
+
+	h3 {
+	    padding-left: 1.5vw;
+	    transform: rotate(2.5deg) translateX(-1vw);
+	    font-size: 5rem;
+	}
 
 	p, h4 {
 	    display: none;
 	}
-    }
-    .media #vdo video,
-    .media #vda video {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	min-width: 100%;
-	min-height: 100%;
-	width: auto;
-	height: auto;
-	transform: translate(-50%, -50%);
-	z-index: -101;
-	opacity: 0.1;
-    }
-    .media #vdo:hover video,
-    .media #vda:hover video {
-	opacity: 1;
-    }
-    .media #vdo:hover,
-    .media #vda:hover {
-	background: rgba(112, 166, 191, 0.9);
-	margin: 0;
-	transform: rotate(0);
-	width: 40vw;
-    }
-    .media #vdo h3,
-    .media #vda h3 {
-	transform: rotate(5deg) translateX(-2vw);
-    }
-    .media #vdo:hover h3,
-    .media #vda:hover h3 {
-	transform: rotate(0) translateX(0) translateY(-5rem);
-	color: rgba(109, 144, 162, 0.7);
-	font-size: 18vw;
+    
+	video {
+	    position: absolute;
+	    top: 50%;
+	    left: 50%;
+	    min-width: 100%;
+	    min-height: 100%;
+	    width: auto;
+	    height: auto;
+	    transform: translate(-50%, -50%);
+	    z-index: -101;
+	    opacity: 0.2;
+	}
 
-	a {
-	    display: block;
-	    height: 100%;
-	    width: 100%;
+	&:hover {
+	    background: rgba(112, 166, 191, 0.9);
+	    margin: 0;
+	    transform: rotate(0);
+	    width: 40vw;
+
+	    h3 {
+		transform: rotate(0) translateX(0) translateY(-4rem);
+		color: rgba(109, 144, 162, 0.7);
+		font-size: 18vw;
+
+		a {
+		    display: block;
+		    height: 100%;
+		    width: 100%;
+		}
+	    }
+
+	    video {
+		opacity: 1;
+	    }
 	}
     }
 
diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss
index a18c9b9..858a783 100644
--- a/assets/scss/screen.scss
+++ b/assets/scss/screen.scss
@@ -62,6 +62,7 @@ img {
 @import 'main';
 @import 'aside';
 @import 'footer';
+@import 'branding';
 
 /**
  * Page overrides
@@ -71,6 +72,7 @@ img {
 @import 'vda';
 @import 'vdo';
 
+
 /**
  * Languages
  **/
@@ -90,30 +92,3 @@ html[lang='fr'] :lang(en) {
 :lang(fr) {
     quotes: '« ' ' »';
 }
-
-/**
- * Branding
- **/
-
-span.ps {
-    background: url(../img/logo-ps.svg) top left / 3rem no-repeat;
-    opacity: 0.75;
-    color: transparent;
-    padding: 0.25rem;
-}
-
-body {
-    font-family: $sans-serif;
-    font-size: 1em; /* No rem here, bug workaround */
-
-    > header, > footer {
-	      :link, :visited {
-	          color: $fg-main;
-	      }
-    }
-
-    :visited {
-	      text-decoration: underline;
-    }
-}
-