1 files changed, 199 insertions, 0 deletions
diff --git a/assets/scss/mobile.scss b/assets/scss/mobile.scss
new file mode 100644
index 0000000..e568feb
--- /dev/null
+++ b/assets/scss/mobile.scss
@@ -0,0 +1,199 @@
+@import 'variables';
+
+html {
+    &[lang='en'] :lang(fr),
+    &[lang='fr'] :lang(en) {
+	display: none;
+    }
+
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:lang(en) {
+    quotes: '\201C' '\201D' '\2018' '\2019';
+}
+
+:lang(fr) {
+    quotes: '« ' ' »';
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: $font-h;
+}
+
+@media screen and (max-device-width: 799px) {
+
+    body {
+
+    }
+}
+
+body {
+    background: url(../img/logo-ps.svg) center 10vh / 60vh no-repeat fixed, $bg-fair;
+    color: $fg-color;
+    font-family: $font-t;
+    font-size: 1.6rem;
+    min-height: 1000px;
+    margin: 0;
+    padding: 0;
+
+    > header {
+	background-color: $bg-dark;
+	position: absolute;
+	top: 50vh;
+	height: 50vh;
+	width: 100%;
+
+	> h1 {
+	    margin-top: calc(25vh -1vh);
+	    text-align: center;
+	    width: 100%;
+	    
+	    &.fixed {
+		background-color: $bg-dark;
+		position: fixed;
+		z-index: 999;
+		margin-top: 0;
+		top: 0;
+		padding: 0.5vh 1vw;
+		text-align: left;
+		font-size: 3.5vh;
+		line-height: 5vh;
+		
+		img {
+		    display: inline-block;
+		}
+	    }
+
+	    a {
+		display: inline-block;
+		text-decoration: none;
+		color: $fg-header-h1;
+	    }
+	    
+	    img {
+		display: none;
+	    }
+
+	}
+
+	section, footer {
+	    display: none;
+	}
+
+    }
+
+    > main {
+	position: relative;
+	top: 100vh;
+	margin: 0 auto;
+	max-width: 42vh;
+
+    }
+
+}
+
+#gfx, #gfx h3 {
+    background-color: $bg-gfx-off;
+}
+#txt, #txt h3 {
+    background-color: $bg-txt-off;
+}
+#vdo, #vdo h3 {
+    background-color: $bg-vdo-off;
+}
+
+.fixed.libre {
+
+    > h2 {
+	left: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.9);
+	color: rgba(255, 255, 255, 0.95);
+	position: fixed;
+	z-index: 999;
+	margin-top: 0;
+	top: 12vh;
+	padding: 0.5vh 1vw;
+	text-align: left;
+	line-height: 5vh;
+    }
+
+    > section.fixed {
+
+	&#participation h3 {
+	}
+	&#engagement h3 {
+	}
+	&#cooperation h3 {
+	    background-color: red;
+	    clip: rect(0,0,100vw,100vh);
+	}
+
+    	> h3 {
+	    background-color: rgba(0, 0, 0, 0.9);
+	    color: black;
+	    position: fixed;
+	    z-index: 999;
+	    margin-top: 0;
+	    top: 12vh;
+	    left: 50vw;
+	    right: 0;
+	    padding: 0.5vh;
+	    text-align: center;
+	    line-height: 5vh;
+
+	    a {
+		color: rgba(255, 255, 255, 0.95);
+		text-decoration: none;
+	    }
+	}
+    }
+}
+
+.fixed.media {
+
+    > h2 {
+	left: 0;
+	right: 0;
+	background-color: $bg-fair;
+	position: fixed;
+	z-index: 999;
+	margin-top: 0;
+	top: 6vh;
+	padding: 0.5vh 1vw;
+	text-align: left;
+	line-height: 5vh;
+    }
+
+    > section.fixed {
+
+	&#gfx h3 {
+	    right: 34vw;
+	}
+	&#txt h3 {
+	    right: 18vw;
+	}
+	&#vdo h3 {
+	    right: 2vw;
+	}
+
+	> h3 {
+	    background-color: $bg-fair;
+	    position: fixed;
+	    z-index: 999;
+	    margin-top: 0;
+	    top: 6vh;
+	    padding: 0.5vh 1vw;
+	    text-align: center;
+	    line-height: 5vh;
+	    width: 14vw;
+	}
+
+    }
+    
+	
+	
+}