squircle

commit 479cfad9604cf7f2cb747701475fa36789aa810f
parent 0e66d6aa1ac0e872e6cbeb8cffccd9eff8ce6d4f
Author: George Francis <georgedoescode@gmail.com>
Date:   Sun,  5 Jul 2020 08:10:25 +0100

add wave svg and background, quite a nice way of handling the overlap using grid

Diffstat:
M
src/App.vue
 | 
44
+++++++++++++++++++++++++++++++++++++++++++-
A
src/assets/img/clipboard.svg
 | 
2
++
A
src/assets/img/download-cloud.svg
 | 
2
++
M
src/components/GeneratorControls.vue
 | 
1
+
M
src/components/GeneratorExportOptions.vue
 | 
18
++++++++++++++----
M
src/components/GeneratorPreview.vue
 | 
2
+-
M
src/components/TheGenerator.vue
 | 
14
+++-----------

7 files changed, 66 insertions(+), 17 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -12,8 +12,50 @@ export default {
 </script>
 
 <template>
-    <div>
+    <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>
+        </div>
     </div>
 </template>
+
+<style scoped>
+.app {
+    display: grid;
+    grid-template-rows: max-content 1fr;
+    min-height: 100vh;
+}
+
+.header {
+    grid-row: 1;
+}
+
+.generator-wrapper,
+.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/assets/img/clipboard.svg b/src/assets/img/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
+\ No newline at end of file
diff --git a/src/assets/img/download-cloud.svg b/src/assets/img/download-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
+\ No newline at end of file
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -52,6 +52,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 0 var(--spacing-3);
 }
 
 .generator-controls__inputs {
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -1,14 +1,24 @@
 <script>
+import DownloadIcon from '@/assets/img/download-cloud.svg';
+import ClipBoardIcon from '@/assets/img/clipboard.svg';
+
 export default {
     name: 'GeneratorExportOptions',
-    components: {},
+    components: {
+        DownloadIcon,
+        ClipBoardIcon,
+    },
 };
 </script>
 
 <template>
     <div class="generator-export-controls">
-        <button class="generator-export-controls__btn"></button>
-        <button class="generator-export-controls__btn"></button>
+        <button class="generator-export-controls__btn">
+            <DownloadIcon />
+        </button>
+        <button class="generator-export-controls__btn">
+            <ClipBoardIcon />
+        </button>
     </div>
 </template>
 
@@ -26,7 +36,7 @@ export default {
     align-items: center;
     width: var(--spacing-6);
     height: var(--spacing-6);
-    margin-left: var(--spacing-5);
+    margin-left: var(--spacing-4);
     padding: 0;
     border-radius: 50%;
     outline: none;
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -31,7 +31,7 @@ export default {
     width: 100%;
     height: 100%;
     content: '';
-    border: 2px dashed var(--grey-100);
+    border: 1px dashed var(--grey-100);
     border-radius: 24px;
 }
 
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -33,22 +33,14 @@ export default {
     position: relative;
     display: grid;
     grid-template-columns: 320px 1fr;
-    grid-gap: var(--spacing-5);
+    grid-gap: var(--spacing-4);
     margin: 0 auto;
-    padding: var(--spacing-5);
+    padding: var(--spacing-4);
     background: #fff;
+    border: 1px solid var(--grey-100);
     border-radius: 24px;
 }
 
-.generator__control-section {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    justify-content: center;
-    padding: 0 var(--spacing-3);
-}
-
 .generator__export-opts {
     position: absolute;
     bottom: -24px;