diff options
Diffstat (limited to 'assets/scss')
-rw-r--r-- | assets/scss/_aside.scss | 246 | ||||
-rw-r--r-- | assets/scss/_branding.scss | 25 | ||||
-rw-r--r-- | assets/scss/_footer.scss | 112 | ||||
-rw-r--r-- | assets/scss/_header-nav.scss | 31 | ||||
-rw-r--r-- | assets/scss/_header.scss | 234 | ||||
-rw-r--r-- | assets/scss/_icons.scss | 4 | ||||
-rw-r--r-- | assets/scss/_main.scss | 180 | ||||
-rw-r--r-- | assets/scss/_txt.scss | 35 | ||||
-rw-r--r-- | assets/scss/_variables.scss | 1 | ||||
-rw-r--r-- | assets/scss/home.scss | 188 | ||||
-rw-r--r-- | assets/scss/screen.scss | 29 |
11 files changed, 590 insertions, 495 deletions
diff --git a/assets/scss/_aside.scss b/assets/scss/_aside.scss index 77ef35f..6ec573f 100644 --- a/assets/scss/_aside.scss +++ b/assets/scss/_aside.scss @@ -9,136 +9,136 @@ body > aside { padding: 1rem; &:hover, &:focus { - left: 0; - background: $bg-main url(../img/aside-on.png) center left no-repeat; - box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); - width: auto; - border-right: 2rem solid black; - padding: 0; - - nav { - display: block; - background: $bg-main url(../img/aside-on.png) center left no-repeat; - height: 100%; + left: 0; + background: $bg-main url(../img/aside-on.png) center left no-repeat; + box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); + width: auto; + border-right: 2rem solid black; + padding: 0; + + nav { + display: block; + background: $bg-main url(../img/aside-on.png) center left no-repeat; + height: 100%; h3 { - a:link, a:hover, a:active, a:visited { - color: transparent; - } - } - } - - ul li:hover { - a:hover { - text-decoration: none; - } + a:link, a:hover, a:active, a:visited { + color: transparent; + } + } + } + + ul li:hover { + a:hover { + text-decoration: none; + } span { - display: block; - } - &:first-child { - transform: scale(1.4) rotate(4deg) translateX(-0.75vw); - a { - transform: rotate(-4deg); - } - } - &:nth-child(2) { - transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); - a { - transform: rotate(6deg); - } - } - &:last-child { - transform: scale(1.4) rotate(5deg) translateX(-0.5vw); - a { - transform: rotate(-5deg); - } - } - } + display: block; + } + &:first-child { + transform: scale(1.4) rotate(4deg) translateX(-0.75vw); + a { + transform: rotate(-4deg); + } + } + &:nth-child(2) { + transform: scale(1.4) rotate(-6deg) translateX(-0.5vw); + a { + transform: rotate(6deg); + } + } + &:last-child { + transform: scale(1.4) rotate(5deg) translateX(-0.5vw); + a { + transform: rotate(-5deg); + } + } + } } nav { - position: relative; - margin-left: 3rem; - display: none; - line-height: 30rem; - - h3 { - display: inline-block; - background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; - width: 10rem; - height: 100%; - vertical-align: top; - color: transparent; - - a { - display: block; - height: 100%; - width: 100%; - line-height: 30rem; - color: transparent; - &:hover { - color: transparent; - } - } - } - - ul { - list-style: none; - display: inline-block; - height: 100%; - - li { - display: block; - padding: 0 2rem; - font-size: 3rem; - float: left; - padding-left: 1rem; - z-index: 400; - overflow: hidden; - width: 10rem; - height: 100%; - - a { - color: black; - text-decoration: none; - display: block; - height: 100%; - width: 100%; - z-index: 404; + position: relative; + margin-left: 3rem; + display: none; + line-height: 30rem; + + h3 { + display: inline-block; + background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat; + width: 10rem; + height: 100%; + vertical-align: top; + color: transparent; + + a { + display: block; + height: 100%; + width: 100%; + line-height: 30rem; + color: transparent; + &:hover { + color: transparent; + } + } + } + + ul { + list-style: none; + display: inline-block; + height: 100%; + + li { + display: block; + padding: 0 2rem; + font-size: 3rem; + float: left; + padding-left: 1rem; + z-index: 400; + overflow: hidden; + width: 10rem; + height: 100%; + + a { + color: black; + text-decoration: none; + display: block; + height: 100%; + width: 100%; + z-index: 404; &:link, &:visited { - color: inherit; - } - - &:hover { - font-size: 200%; - color: inherit; - z-index: 404; - } - } - - span { - display: none; - z-index: 400; - position: relative; - font-size: 1.25rem; - line-height: 1.6rem; - text-align: center; - margin: -3rem -2rem 0 -1rem; - } - - &:first-child { - background: $bg-gfx; - } - - &:nth-child(2) { - background: $bg-txt; - } - - &:last-child { - background: $bg-vda; - } - } - } + color: inherit; + } + + &:hover { + font-size: 200%; + color: inherit; + z-index: 404; + } + } + + span { + display: none; + z-index: 400; + position: relative; + font-size: 1.25rem; + line-height: 1.6rem; + text-align: center; + margin: -3rem -2rem 0 -1rem; + } + + &:first-child { + background: $bg-gfx; + } + + &:nth-child(2) { + background: $bg-txt; + } + + &:last-child { + background: $bg-vda; + } + } + } } } 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/_footer.scss b/assets/scss/_footer.scss index 8d944ff..6119a00 100644 --- a/assets/scss/_footer.scss +++ b/assets/scss/_footer.scss @@ -10,81 +10,81 @@ body > footer { font-size: 1.15rem; h4 { - margin: 0; - font-size: 1.6rem; + margin: 0; + font-size: 1.6rem; - a { - text-decoration:none; - } + a { + text-decoration:none; + } } a { - white-space: nowrap; + white-space: nowrap; } &:hover > p { - > span:first-child { - display: inline-block; - color: transparent; - line-height: 0; - } - > span:first-child:before { - content: 'Copyleft'; - display: block; - color: black; - padding-right: 0.4rem; - } - > span + span { - display: inline-block; - transform: rotate(180deg); - padding-bottom: -0.07rem; - } + > span:first-child { + display: inline-block; + color: transparent; + line-height: 0; + } + > span:first-child:before { + content: 'Copyleft'; + display: block; + color: black; + padding-right: 0.4rem; + } + > span + span { + display: inline-block; + transform: rotate(180deg); + padding-bottom: -0.07rem; + } > span:first-child + span { - display: inline-block; - transform: rotate(180deg) translateY(0.1rem); - } + display: inline-block; + transform: rotate(180deg) translateY(0.1rem); + } } } footer > nav { ul { - display: inline-block; - margin: 0; - padding: 0; - list-style: none; + display: inline-block; + margin: 0; + padding: 0; + list-style: none; } li { - display: inline-block; - margin: 0 0.75rem; - width: 4rem; - height: 3rem; - border: 1px solid; - border-bottom: 3px solid; - border-color: transparent; - border-top-right-radius: 0.5rem; - text-align: center; + display: inline-block; + margin: 0 0.75rem; + width: 4rem; + height: 3rem; + border: 1px solid; + border-bottom: 3px solid; + border-color: transparent; + border-top-right-radius: 0.5rem; + text-align: center; - a { - position: relative; - display: block; - width: 100%; - height: 100%; - line-height: 3rem; - margin: 0; - padding: 0; - background: rgba(0,0,0,0.25); - border-top-right-radius: 0.5rem; - } + a { + position: relative; + display: block; + width: 100%; + height: 100%; + line-height: 3rem; + margin: 0; + padding: 0; + background: rgba(0,0,0,0.25); + border-top-right-radius: 0.5rem; + } - &:hover { - border-color: rgba(220, 201, 133, 1); + &:hover { + border-color: rgba(220, 201, 133, 1); - a { - font-weight: bold; - background: rgba(0,0,0,0.5); - } - } + a { + font-weight: bold; + background: rgba(0,0,0,0.5); + } + } } } diff --git a/assets/scss/_header-nav.scss b/assets/scss/_header-nav.scss new file mode 100644 index 0000000..49e9d86 --- /dev/null +++ b/assets/scss/_header-nav.scss @@ -0,0 +1,31 @@ +article > header > nav { + margin: 0 auto; + + ul { + list-style: none; + margin: 1rem auto; + padding: 0; + display: flex; + width: 100%; + + li { + margin: 0 auto; + padding: 0.5rem; + flex: 1; + text-align: center; + border: 1px solid; + width: 12rem; + + a { + display: inline-block; + position: relative; + width: 100%; + height: 100%; + } + } + } +} + +body.txt article > header > nav a { + background-color: $bg-txt-on; +} diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 331bce7..bee374f 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -3,133 +3,133 @@ h1,h2,h3,h4,h5,h6 { font-weight: 600; a, a:hover, a:focus, a:link, a:visited { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } a:active { - text-decoration: underline; - color: $bg-main; + text-decoration: underline; + color: $bg-main; } } body.ps { > header { - position: fixed; - z-index: 999; - top: 0; - left: 0; - right: 0; - background: $bg-header; - padding: 0 2rem; - color: $fg-header; - - h1 { - margin: 0 auto; - - &:before { - background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; - display: block; - width: 5rem; - height: 5rem; - } - } - - h2 { - font-weight: 100; - margin-top: -2.6rem; - font-size: 3.7rem; - transform: rotate(180deg); - } - - p { - font-family: $serif; - font-size: 2rem; - font-style: italic; - margin: -3.8rem 0 0 0; - padding: 0 0 0.4rem 0.3rem; - - span { - color: black; - } - } + position: fixed; + z-index: 999; + top: 0; + left: 0; + right: 0; + background: $bg-header; + padding: 0 2rem; + color: $fg-header; + + h1 { + margin: 0 auto; + + &:before { + background: url(../assets/img/logo-ps.svg) center left / 5rem no-repeat; + display: block; + width: 5rem; + height: 5rem; + } + } + + h2 { + font-weight: 100; + margin-top: -2.6rem; + font-size: 3.7rem; + transform: rotate(180deg); + } + + p { + font-family: $serif; + font-size: 2rem; + font-style: italic; + margin: -3.8rem 0 0 0; + padding: 0 0 0.4rem 0.3rem; + + span { + color: black; + } + } } &.home > header { - background-color: $bg-dark; - top: unset; - right: 5vw; - bottom: -2vh; - left: 5vw; - padding: 1rem; - font-size: 1.2rem; - color: $fg-white-85; - overflow: auto; - transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); - - h1 { - font-size: 7vh; - text-align: center; - transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); - - img { - display: none; - vertical-align: -1.6rem; - } - } - - section { - display: none; - max-width: 42rem; - margin: 0 auto; - padding-bottom: 7rem; - } - - footer { - background-color: rgba(109, 78, 128, 1); - display: none; - font-size: 1rem; - z-index: 999; - position: fixed; - bottom: 0; - left: 0; - right: 0; - display: none; - - > h4 { - display: inline-block; - } - - > nav { - display: none; - } - - > p { - display: none; - max-width: 42rem; - margin: 0 auto; - padding-bottom: 7rem; - } - } - - &:hover { - top: 5vh; - - h1 { - font-size: 2.6rem; - transform: rotate(2.7deg) translate(0, 0) skewX(0); - } - - img { - display: inline-block; - } - - section, footer { - display: block; - width: 80vw; - margin: 0 auto; - padding-bottom: 3rem; - } - } + background-color: $bg-dark; + top: unset; + right: 5vw; + bottom: -2vh; + left: 5vw; + padding: 1rem; + font-size: 1.2rem; + color: $fg-white-85; + overflow: auto; + transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); + + h1 { + font-size: 7vh; + text-align: center; + transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); + + img { + display: none; + vertical-align: -1.6rem; + } + } + + section { + display: none; + max-width: 42rem; + margin: 0 auto; + padding-bottom: 7rem; + } + + footer { + background-color: rgba(109, 78, 128, 1); + display: none; + font-size: 1rem; + z-index: 999; + position: fixed; + bottom: 0; + left: 0; + right: 0; + display: none; + + > h4 { + display: inline-block; + } + + > nav { + display: none; + } + + > p { + display: none; + max-width: 42rem; + margin: 0 auto; + padding-bottom: 7rem; + } + } + + &:hover { + top: 5vh; + + h1 { + font-size: 2.6rem; + transform: rotate(2.7deg) translate(0, 0) skewX(0); + } + + img { + display: inline-block; + } + + section, footer { + display: block; + width: 80vw; + margin: 0 auto; + padding-bottom: 3rem; + } + } } } diff --git a/assets/scss/_icons.scss b/assets/scss/_icons.scss new file mode 100644 index 0000000..ca44689 --- /dev/null +++ b/assets/scss/_icons.scss @@ -0,0 +1,4 @@ +a[href~=*.rss] { + background: url(../img/rss.svg) left top/1rem no-repeat; + padding-left: 1rem; +} diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 0327543..335ccca 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -9,141 +9,141 @@ body > main { max-width: 96rem; > article { - /* background: $bg-txt-ps-on; */ + /* background: $bg-txt-ps-on; */ background-color: $bg-main; - margin: 0 auto; - max-width: 60rem; - min-height: calc(100vh - 24rem); - height: auto; - padding: 12rem 9rem; + margin: 0 auto; + max-width: 60rem; + min-height: calc(100vh - 24rem); + height: auto; + padding: 12rem 9rem; } } article { > header { - p { - font-size: 2rem; - line-height: 1.25; - font-family: $serif; - text-variant: italic; - /* padding: 2rem 4rem; */ + p { + font-size: 2rem; + line-height: 1.25; + font-family: $serif; + text-variant: italic; + /* padding: 2rem 4rem; */ padding: 0rem 4rem; - text-align: justify; + text-align: justify; &:last-child { - padding-bottom: 2rem; - } - } + padding-bottom: 2rem; + } + } } section:after { - display: table; - content: ""; - clear: both; - margin-bottom: 2rem; + display: table; + content: ""; + clear: both; + margin-bottom: 2rem; } aside { - ul { - display: table; - position: relative; - list-style: none; - margin: 0 -8rem 1rem -8rem; - width: calc(100% + 16rem); + ul { + display: table; + position: relative; + list-style: none; + margin: 0 -8rem 1rem -8rem; + width: calc(100% + 16rem); - li { - display: table-cell; - text-align: center; - } + li { + display: table-cell; + text-align: center; + } - img { - display: block; + img { + display: block; background-color: black; - width: 16rem; /* 16:9 for video */ - height: 9rem; - margin: 1rem auto; - } - } + width: 16rem; /* 16:9 for video */ + height: 9rem; + margin: 1rem auto; + } + } } .intro { - background-color: rgba(255, 255, 255, 0.1); - box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); - height: auto; - max-height: 2rem; - margin: 2rem; - padding: 2rem; - overflow: hidden; - text-overflow: ellipsis; + background-color: rgba(255, 255, 255, 0.1); + box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); + height: auto; + max-height: 2rem; + margin: 2rem; + padding: 2rem; + overflow: hidden; + text-overflow: ellipsis; - p { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &:hover { - max-height: 100vh; - p { - white-space: normal; - overflow: auto; - } - } + p { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &:hover { + max-height: 100vh; + p { + white-space: normal; + overflow: auto; + } + } } .outro { - p { - font-size: 2rem; - text-align: justify; - } + p { + font-size: 2rem; + text-align: justify; + } } video, iframe { - max-width: 100%; + max-width: 100%; } .video { - margin: 0 -6rem 0 -4rem; + margin: 0 -6rem 0 -4rem; - video { - width: 30rem; + video { + width: 30rem; height: 18.875rem; - background: black; - float: left; - margin: 0 2rem 0 -4rem; - } - p { - line-height: 1.25; - } - &:hover { - video, iframe { - width: 68rem; + background: black; + float: left; + margin: 0 2rem 0 -4rem; + } + p { + line-height: 1.25; + } + &:hover { + video, iframe { + width: 68rem; height: 38.25rem; - float: none; + float: none; margin: auto; - } -/* video { - width: calc(100% + 6rem); - height: auto; - float: none; - } */ - } + } +/* video { + width: calc(100% + 6rem); + height: auto; + float: none; + } */ + } } } section { h2 + h3 { - font-size: 2.5rem; - font-style: italic; - margin-top: -2rem; + font-size: 2.5rem; + font-style: italic; + margin-top: -2rem; } } article { #intro h2 { - transform: rotate(270deg) translate(13.6rem, -34rem); + transform: rotate(270deg) translate(13.6rem, -34rem); } } @@ -161,3 +161,7 @@ span.note { background-color: rgba(240, 240, 242, 0.3); } +/* Hide elements with display attribute set to none: display="none" */ +[display=none] { + display: none; +} diff --git a/assets/scss/_txt.scss b/assets/scss/_txt.scss index 19bf047..d28d3f1 100644 --- a/assets/scss/_txt.scss +++ b/assets/scss/_txt.scss @@ -1,14 +1,16 @@ body.txt { - background-color: $bg-txt-on; + background-color: $bg-txt-on; - > aside { - &:hover, &:focus { - background-color: $bg-txt-on; - nav ul li:nth-child(2) { - background: $bg-txt-on; - } - } - } + @import 'header-nav'; + + > aside { + &:hover, &:focus { + background-color: $bg-txt-on; + nav ul li:nth-child(2) { + background: $bg-txt-on; + } + } + } > header { h1 { min-height: 10rem; @@ -29,4 +31,19 @@ body.txt { height: 22.55rem; /* 1:1.41 for books */ } + #lang-switch { + position: absolute; + top: 0.1rem; + right: 0.1rem; + z-index: 1000; + } +} + +.phonetic { + font-family: "Noto Sans"; +} + +h3 + p.tagline { + font-style: italic; + margin-top: -2rem; } diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index b959d3b..8cb9dc4 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -27,7 +27,6 @@ $bg-vda-ps-on: rgba(112, 166, 191, 0.9); $bg-vdo-ps-off: rgba(112, 166, 191, 0.5); $bg-vdo-ps-on: rgba(112, 166, 191, 0.9); - // On other pages: $bg-main: $fg-header; $fg-main: rgba(20, 20, 20, 1); diff --git a/assets/scss/home.scss b/assets/scss/home.scss index 7009d26..8f31726 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; @@ -40,7 +42,7 @@ body > header { left: 5vw; padding: 1rem; z-index: 999; - font-size: 1.2rem; + font-size: 1.4rem; color: rgba(255, 255, 255, 0.85); overflow: auto; transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); @@ -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,11 +425,11 @@ body > footer { .media #gfx { background: rgba(191, 138, 112,0.7); transform: rotate(-4deg); - margin: 0 -5vw 0 -2vw; + margin: 0 -3vw 0 -2vw; left: 0; h3 { - transform: rotate(4deg) translateX(1vw); + transform: rotate(4deg) translateX(3vw); font-size: 5rem; } @@ -438,24 +437,30 @@ body > footer { position: absolute; top: 0; left: 0; - opacity: 0.1; + opacity: 0.9; } &:hover { background: rgba(191, 138, 112, 0.9); transform: rotate(0); - margin: 0; - - p, h4 { - display: none; - } + margin: 1vw 0 0 0; + color: black; + padding: 1rem; h3 { transform: rotate(0) translateX(0) translateY(-4rem); } + figure { + display: inline-block; + width: 197px; + padding: 0; + margin: 1rem; + } + svg { - opacity: 0.9; + opacity: 0.3; + width: calc(100% + 4rem); } + #txt { @@ -466,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; @@ -493,6 +504,7 @@ body > footer { text-decoration: none; color: inherit; } + .media #gfx:hover p.tagline, .media #txt:hover p.tagline { position: absolute; top: 6rem; @@ -506,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; + } } } @@ -575,19 +589,32 @@ body > footer { text-decoration: none; } - .libre #participation { + .libre #participation, + .libre #share { /* transform: rotate(-4deg) translateY(4.5rem); */ transform: rotate(-4deg) translateY(6vh); } - .libre #engagement { + .libre #engagement, + .libre #engage { /* transform: translate(0.5rem, 7rem); */ transform: translate(0.5vw, 14vh); } - .libre #cooperation { + .libre #cooperation, + .libre #care { /* transform: rotate(2deg) translate(0rem, 9.8rem); */ 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) { @@ -602,9 +629,22 @@ 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{ + z-index: 0; &.w0 { fill: rgba(240, 40, 142, 0.5); } 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; - } -} - |