From d827582cc459d8874fb83463a44ae3fadb27c151 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Mon, 28 Jun 2021 20:53:18 +0200
Subject: [PATCH] fix: waves

---
 src/App.vue                  |  3 +--
 src/assets/wave.invert.1.svg | 31 ++++++++++++++++---------------
 src/assets/wave.invert.2.svg | 31 ++++++++++++++++---------------
 src/components/Banner.vue    | 31 ++++++++++---------------------
 4 files changed, 43 insertions(+), 53 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ea01f20..91c09fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,9 +38,8 @@ export default class App extends Vue {
 		// align-items: auto;
 
 		background: url('./assets/wave.footer.svg') bottom no-repeat;
-		background-size: 100% 4vw;
+		background-size: 100vw auto;
 
 		overflow: hidden;
-
 	}
 </style>
diff --git a/src/assets/wave.invert.1.svg b/src/assets/wave.invert.1.svg
index 328ca63..61e3567 100644
--- a/src/assets/wave.invert.1.svg
+++ b/src/assets/wave.invert.1.svg
@@ -2,21 +2,21 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="420.00018mm"
    height="20.821516mm"
    viewBox="0 0 420.00018 20.821516"
    version="1.1"
    id="svg2775"
    sodipodi:docname="wave.invert.1.svg"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
   <defs
      id="defs2769">
     <linearGradient
@@ -52,16 +52,16 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="706.05076"
-     inkscape:cy="109.92134"
+     inkscape:zoom="0.50001213"
+     inkscape:cx="1379.9665"
+     inkscape:cy="465.98869"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:window-width="1920"
-     inkscape:window-height="1016"
+     inkscape:window-height="1011"
      inkscape:window-x="0"
-     inkscape:window-y="34"
+     inkscape:window-y="37"
      inkscape:window-maximized="1"
      inkscape:object-paths="false"
      inkscape:snap-intersection-paths="true"
@@ -70,7 +70,8 @@
      fit-margin-right="0"
      fit-margin-bottom="0"
      inkscape:snap-midpoints="true"
-     inkscape:object-nodes="true" />
+     inkscape:object-nodes="true"
+     inkscape:pagecheckerboard="0" />
   <metadata
      id="metadata2772">
     <rdf:RDF>
diff --git a/src/assets/wave.invert.2.svg b/src/assets/wave.invert.2.svg
index d85919f..9b02092 100644
--- a/src/assets/wave.invert.2.svg
+++ b/src/assets/wave.invert.2.svg
@@ -2,21 +2,21 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="420.00018mm"
    height="20.821516mm"
    viewBox="0 0 420.00018 20.821516"
    version="1.1"
    id="svg2775"
    sodipodi:docname="wave.invert.2.svg"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
   <defs
      id="defs2769">
     <linearGradient
@@ -52,16 +52,16 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.5"
-     inkscape:cx="532.26558"
-     inkscape:cy="-66.114037"
+     inkscape:zoom="1.0230171"
+     inkscape:cx="867.04315"
+     inkscape:cy="141.73761"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:window-width="1920"
-     inkscape:window-height="1016"
+     inkscape:window-height="1011"
      inkscape:window-x="0"
-     inkscape:window-y="34"
+     inkscape:window-y="37"
      inkscape:window-maximized="1"
      inkscape:object-paths="false"
      inkscape:snap-intersection-paths="true"
@@ -71,7 +71,8 @@
      fit-margin-bottom="0"
      inkscape:snap-midpoints="true"
      inkscape:object-nodes="true"
-     inkscape:snap-page="true" />
+     inkscape:snap-page="true"
+     inkscape:pagecheckerboard="0" />
   <metadata
      id="metadata2772">
     <rdf:RDF>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index cd06d73..151902d 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -59,7 +59,7 @@
 <style scoped lang="scss">
 	$banner-size: 14rem;
 	$icon-size: 9rem;
-	$wave-height: 5rem;
+	$wave-height: 6.3rem;
 
 	$mq-noresize: 1250px;
 	$mq-noicon: 940px;
@@ -82,7 +82,7 @@
 
 		color: #fff;
 		font-size: 1rem;
-		font-family: 'Roboto';
+		font-family: 'Fira Code';
 		font-weight: 300;
 		white-space: nowrap;
 
@@ -90,12 +90,7 @@
 
 		@keyframes wave {
 			from{ background-position-x: 0; }
-			to{ background-position-x: 1000%; }
-		}
-
-		@keyframes sink {
-			from{ background-position-y: 0; }
-			to{ background-position-y: #{$wave-height/2}; }
+			to{ background-position-x: 100vw; }
 		}
 
 		.wave {
@@ -103,24 +98,18 @@
 			position: absolute;
 				top: calc( 100% - #{$wave-height} );
 				left: 0;
-				// waves are too "bumpy" on mobile
-				min-width: 40rem;
-				width: 100%;
-				height: calc( #{$wave-height} + 1px );
+				width: 100vw;
+				height: #{$wave-height};
 
-			/* OPTI ? */// will-change: background-position;
-
-			background: url('../assets/wave.invert.1.svg') repeat-x;
-			background-position: 0 0;
-			background-size: 200% 100%;
-
-			animation: 200s linear wave infinite;
+			background-image: url('../assets/wave.invert.1.svg');
+			background-repeat: repeat-x;
+			background-size: 100vw auto;
 
+			animation: 100s linear wave infinite;
 
 			&.w2{
 				background-image: url('../assets/wave.invert.2.svg');
-				background-size: 150% 100%;
-				animation: 100s linear wave infinite reverse;//, 2s ease sink infinite alternate;
+				animation: 100s linear wave infinite reverse;
 			}
 		}