Add sinewaves to home page

1 files changed, 47 insertions, 17 deletions

diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 7a1a0e3..d20d5a3 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -425,25 +425,40 @@ 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;
 
-	p, h4 {
-	    display: none;
+	h3 {
+	    transform: rotate(4deg) translateX(1vw);
+	    font-size: 5rem;
+	}
+
+	svg {
+	    position: absolute;
+	    top: 0;
+	    left: 0;
+	    opacity: 0.1;
+	}
+
+	&:hover {
+	    background: rgba(191, 138, 112, 0.9);
+	    transform: rotate(0);
+	    margin: 0;
+
+	    p, h4 {
+		display: none;
+	    }
+
+	    h3 {
+		transform: rotate(0) translateX(0) translateY(-4rem);
+	    }
+
+	    svg {
+		opacity: 0.9;
+	    }
+
+	    + #txt {
+		margin-left: -3vw;
+	    }
 	}
-    }
-    .media #gfx:hover h3 {
-	transform: rotate(0) translateX(0) translateY(-4rem);
-    }
-    .media #gfx:hover + #txt {
-	margin-left: -3vw;
     }
 
     .media #txt {
@@ -579,3 +594,18 @@ body > footer {
     }
     
 }
+
+.sinewave{
+    &.w0 {
+        fill: rgba(240, 40, 142, 0.5);
+    }
+    &.w1 {
+        fill: rgba(140, 140, 42, 0.5);
+    }
+    &.w2 {
+        fill: rgba(240, 142, 1, 0.5);
+    }
+    &.w3 {
+        fill: rgba(0, 110, 12, 0.5);
+    }
+}