Update index.html

2 files changed, 60 insertions, 6 deletions

diff --git a/assets/scss/_branding.scss b/assets/scss/_branding.scss
new file mode 100644
index 0000000..2efdc4d
--- /dev/null
+++ b/assets/scss/_branding.scss
@@ -0,0 +1,25 @@
+/**
+ * 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;
+    }
+}
diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index a80e473..57ebccc 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -1,5 +1,7 @@
 @charset 'UTF-8';
 
+@import 'variables';
+@import 'branding';
 
 html[lang='en'] :lang(fr) {
     display: none !important;
@@ -351,14 +353,11 @@ body > footer {
 	overflow-y: auto;
     }
 
-
-
     body > header:hover ~ footer {
 	position: fixed;
 	bottom: 0;
 	display: block;
     }
-
     body > header:hover ~ footer > nav {
 	display: block;
     }
@@ -400,7 +399,7 @@ body > footer {
 		color: rgba(0,0,0,0.2);
 	    }
 
-	    h4, p {
+	    h4, p, figure {
 		display: none;
 	    }
 
@@ -414,7 +413,7 @@ body > footer {
 		    color: rgba(0, 0, 0, 1);
 		}
 
-		h4, p {
+		h4, p, figure {
 		    display: block;
 		    padding: 1rem;
 		    color: black;
@@ -426,7 +425,7 @@ body > footer {
     .media #gfx {
 	background: rgba(191, 138, 112,0.7);
 	transform: rotate(-4deg);
-	margin: 0 -5vw 0 -2vw;
+	margin: 0 -3vw 0 0;
 	left: 0;
 
 	h3 {
@@ -452,6 +451,13 @@ body > footer {
 		transform: rotate(0) translateX(0) translateY(-4rem);
 	    }
 
+	    figure {
+		display: inline-block;
+		width: 197px;
+		padding: 0;
+		margin: 1rem;
+	    }
+
 	    svg {
 		opacity: 0.3;
 		width: calc(100% + 4rem);
@@ -492,6 +498,7 @@ body > footer {
 	text-decoration: none;
 	color: inherit;
     }
+    .media #gfx:hover p.tagline,
     .media #txt:hover p.tagline {
 	position: absolute;
 	top: 6rem;
@@ -590,6 +597,16 @@ body > footer {
 	transform: rotate(2deg) translate(0rem, 19.5vh);
     }
 
+    footer {
+	position: fixed;
+	left: 0;
+	right: 0;
+	font-size: smaller;
+	background-color: rgba(109, 78, 128, 1);
+	display: none;
+	margin: 5rem auto 2rem auto;
+	width: 80vw;
+    }
 }
 
 @media screen and (max-device-width: 1023px) {
@@ -604,6 +621,18 @@ body > footer {
 	background: url(../img/logo-ps.svg) center calc(92% - 50vh) / contain no-repeat fixed;
     }
 
+    body > footer {
+	position: relative;
+	left: 0;
+	right: 0;
+	font-size: smaller;
+	background-color: rgba(109, 78, 128, 1);
+	display: none;
+	margin: 1rem auto;
+	width: 80vw;
+	font-size: smaller;
+    }
+
 }
 
 .sinewave{