aboutsummaryrefslogtreecommitdiff
path: root/assets/css/home.css
diff options
context:
space:
mode:
authorYour Name <you@example.com>2018-01-02 13:38:27 +0100
committerYour Name <you@example.com>2018-01-02 13:38:27 +0100
commitc2cb20f53b015388c8a84c824111fe844ce318ad (patch)
tree8ee3c35cbfb483c27f9dcb1e98780106270377d2 /assets/css/home.css
parentb50c7ddaca113317720c2c929cb5d1bfbb5ea2b0 (diff)
downloadlesoiseaux.io-c2cb20f53b015388c8a84c824111fe844ce318ad.tar.gz
Add sinewaves to home page
Diffstat (limited to 'assets/css/home.css')
-rw-r--r--assets/css/home.css45
1 files changed, 28 insertions, 17 deletions
diff --git a/assets/css/home.css b/assets/css/home.css
index 9b0d5f3..bf9ee02 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -312,23 +312,26 @@ body > footer {
transform: rotate(-4deg);
margin: 0 -5vw 0 -2vw;
left: 0; }
-
- .media #gfx h3 {
- transform: rotate(4deg) translateX(1vw);
- font-size: 5rem; }
-
- .media #gfx:hover {
- background: rgba(191, 138, 112, 0.9);
- transform: rotate(0);
- margin: 0; }
- .media #gfx:hover p, .media #gfx:hover h4 {
- display: none; }
-
- .media #gfx:hover h3 {
- transform: rotate(0) translateX(0) translateY(-4rem); }
-
- .media #gfx:hover + #txt {
- margin-left: -3vw; }
+ .media #gfx h3 {
+ transform: rotate(4deg) translateX(1vw);
+ font-size: 5rem; }
+ .media #gfx svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0.1; }
+ .media #gfx:hover {
+ background: rgba(191, 138, 112, 0.9);
+ transform: rotate(0);
+ margin: 0; }
+ .media #gfx:hover p, .media #gfx:hover h4 {
+ display: none; }
+ .media #gfx:hover h3 {
+ transform: rotate(0) translateX(0) translateY(-4rem); }
+ .media #gfx:hover svg {
+ opacity: 0.9; }
+ .media #gfx:hover + #txt {
+ margin-left: -3vw; }
.media #txt {
background: rgba(166, 191, 112, 0.7);
@@ -447,5 +450,13 @@ body > footer {
body > main {
background: url(../img/logo-ps.svg) center calc(92% - 50vh)/contain no-repeat fixed; } }
+.sinewave.w0 {
+ fill: rgba(240, 40, 142, 0.5); }
+.sinewave.w1 {
+ fill: rgba(140, 140, 42, 0.5); }
+.sinewave.w2 {
+ fill: rgba(240, 142, 1, 0.5); }
+.sinewave.w3 {
+ fill: rgba(0, 110, 12, 0.5); }
/*# sourceMappingURL=home.css.map */