aboutsummaryrefslogtreecommitdiff
path: root/assets/scss/home.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/scss/home.scss')
-rw-r--r--assets/scss/home.scss188
1 files changed, 114 insertions, 74 deletions
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);
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-04 20:00:54 +0000