squircle

commit 0458f65e88a7d42f30ea5a7c933df5d6e3aeb85b
parent 479cfad9604cf7f2cb747701475fa36789aa810f
Author: George Francis <georgedoescode@gmail.com>
Date:   Sun,  5 Jul 2020 08:26:52 +0100

componentise the wave

Diffstat:
M
src/App.vue
 | 
33
+++++++--------------------------
M
src/components/GeneratorPreview.vue
 | 
10
++--------
A
src/components/TheWaveBackground.vue
 | 
38
++++++++++++++++++++++++++++++++++++++

3 files changed, 47 insertions(+), 34 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,24 @@
 <script>
 import TheHeader from './components/TheHeader.vue';
 import TheGenerator from './components/TheGenerator.vue';
+import TheWaveBackground from './components/TheWaveBackground.vue';
 
 export default {
     name: 'App',
     components: {
         TheHeader,
         TheGenerator,
+        TheWaveBackground,
     },
 };
 </script>
 
 <template>
     <div class="app">
-        <TheHeader />
-        <TheGenerator />
-        <div class="app__background">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
-                <path
-                    fill-opacity="1"
-                    d="M0,64L80,96C160,128,320,192,480,181.3C640,171,800,85,960,69.3C1120,53,1280,107,1360,133.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
-                ></path>
-            </svg>
-            <div class="app__background-fill"></div>
+        <TheHeader class="app__header" />
+        <TheWaveBackground class="app__background" />
+        <div class="app__content">
+            <TheGenerator />
         </div>
     </div>
 </template>
@@ -38,24 +34,9 @@ export default {
     grid-row: 1;
 }
 
-.generator-wrapper,
+.app__content,
 .app__background {
     grid-column: -1 / 1;
     grid-row: 2;
 }
-
-.app__background {
-    display: flex;
-    flex-direction: column;
-}
-
-.app__background svg {
-    margin-top: var(--spacing-7);
-    fill: #fff;
-}
-
-.app__background-fill {
-    flex-grow: 1;
-    background: #fff;
-}
 </style>
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -6,14 +6,8 @@ export default {
 
 <template>
     <div class="generator-preview">
-        <svg>
-            <rect
-                x="25%"
-                y="25%"
-                width="50%"
-                height="50%"
-                fill="#f5f7fa"
-            ></rect>
+        <svg viewBox="0 0 320 320" preserveAspectRatio>
+            <rect x="80" y="80" width="160" height="160" fill="#f5f7fa"></rect>
         </svg>
     </div>
 </template>
diff --git a/src/components/TheWaveBackground.vue b/src/components/TheWaveBackground.vue
@@ -0,0 +1,38 @@
+<script>
+export default {
+    name: 'TheWaveBackground',
+};
+</script>
+
+<template>
+    <div class="wave-background">
+        <svg
+            class="wave-background__svg"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1440 320"
+        >
+            <path
+                fill-opacity="1"
+                d="M0,64L80,96C160,128,320,192,480,181.3C640,171,800,85,960,69.3C1120,53,1280,107,1360,133.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
+            ></path>
+        </svg>
+        <div class="wave-background__fill"></div>
+    </div>
+</template>
+
+<style scoped>
+.wave-background {
+    display: flex;
+    flex-direction: column;
+}
+
+.wave-background__svg {
+    margin-top: var(--spacing-7);
+    fill: #fff;
+}
+
+.wave-background__fill {
+    flex-grow: 1;
+    background: #fff;
+}
+</style>