diff options
| author | Your Name <you@example.com> | 2018-01-02 13:38:27 +0100 |
|---|---|---|
| committer | Your Name <you@example.com> | 2018-01-02 13:38:27 +0100 |
| commit | c2cb20f53b015388c8a84c824111fe844ce318ad (patch) | |
| tree | 8ee3c35cbfb483c27f9dcb1e98780106270377d2 /assets/css/home.css | |
| parent | b50c7ddaca113317720c2c929cb5d1bfbb5ea2b0 (diff) | |
| download | lesoiseaux.io-c2cb20f53b015388c8a84c824111fe844ce318ad.tar.gz | |
Add sinewaves to home page
Diffstat (limited to 'assets/css/home.css')
| -rw-r--r-- | assets/css/home.css | 45 |
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 */ |