aboutsummaryrefslogtreecommitdiff
path: root/assets/scss/mobile.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss/mobile.scss')
-rw-r--r--assets/scss/mobile.scss199
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;
+ }
+
+ }
+
+
+
+}