aboutsummaryrefslogtreecommitdiff
path: root/assets/scss
diff options
context:
space:
mode:
authorYour Name <you@example.com>2017-12-23 20:10:15 +0100
committerYour Name <you@example.com>2017-12-23 20:10:33 +0100
commit95c3bad65fb93e5de5d36889e186b55e3f7c6446 (patch)
tree9a293fea117b902292989d7a962889274c405e47 /assets/scss
parentd0cf5f9e4a5df1c4fb77425c51160d0f81a1bddc (diff)
downloadlesoiseaux.io-95c3bad65fb93e5de5d36889e186b55e3f7c6446.tar.gz
Add assets (they are mounted at each site as /assets/
Diffstat (limited to 'assets/scss')
-rw-r--r--assets/scss/mobile.scss199
-rw-r--r--assets/scss/variables.scss24
2 files changed, 223 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;
+ }
+
+ }
+
+
+
+}
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
new file mode 100644
index 0000000..1cc22c5
--- /dev/null
+++ b/assets/scss/variables.scss
@@ -0,0 +1,24 @@
+/**
+ * SCSS Variables
+ **/
+
+// Colors
+
+$bg-dark: rgba(109, 78, 128, 1);
+$fg-header-h1: rgba(220, 201, 133, 1);
+
+$bg-fair: rgba(173, 151, 56, 0.68);
+$fg-color: #f3f0e4;
+
+$bg-gfx-off: rgba(191, 138, 112, 0.7);
+$bg-gfx-on: rgba(191, 138, 112, 0.9);
+$bg-txt-off: rgba(166, 191, 112, 0.7);
+$bg-txt-on: rgba(166, 191, 112, 0.9);
+$bg-vdo-off: rgba(112, 166, 191, 0.5);
+$bg-vdo-on: rgba(112, 166, 191, 0.9);
+
+// Fonts
+
+$font-h: 'Cormorant Garamond', serif;
+$font-t: Abel, 'Open Sans', sans-serif;
+