squircle

commit 0153b17adf16786aa6dfe78c04fef708660ee9e5
parent 2832be053c6832a2026b26ffc8556f189d66f7ee
Author: George Francis <georgedoescode@gmail.com>
Date:   Thu,  2 Jul 2020 15:46:52 +0100

add generator wrapper and svg preview styling

Diffstat:
M
src/App.vue
 | 
7
++++++-
M
src/components/SocialSharing.vue
 | 
2
+-
A
src/components/TheGenerator.vue
 | 
52
++++++++++++++++++++++++++++++++++++++++++++++++++++
M
src/components/TheHeader.vue
 | 
3
++-

4 files changed, 61 insertions(+), 3 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,19 @@
 <script>
     import TheHeader from './components/TheHeader.vue';
+    import TheGenerator from './components/TheGenerator.vue';
 
     export default {
         name: 'App',
         components: {
             TheHeader,
+            TheGenerator,
         },
     };
 </script>
 
 <template>
-    <TheHeader />
+    <div>
+        <TheHeader />
+        <TheGenerator />
+    </div>
 </template>
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -48,7 +48,7 @@
         display: block;
         width: var(--spacing-4);
         height: var(--spacing-4);
-        margin-left: var(--spacing-4);
+        margin-left: var(--spacing-5);
         cursor: pointer;
         transition: transform 125ms ease-in-out;
     }
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -0,0 +1,52 @@
+<script>
+    export default {
+        name: 'TheGenerator',
+    };
+</script>
+
+<template>
+    <div class="generator">
+        <div class="generator__preview">
+            <svg></svg>
+        </div>
+        <div class="generator__control-panel"></div>
+    </div>
+</template>
+
+<style scoped>
+    .generator {
+        display: flex;
+        max-width: var(--spacing-15);
+        margin: 0 auto;
+        padding: var(--spacing-4);
+        background: #fff;
+        border-radius: 16px;
+    }
+
+    .generator__preview {
+        position: relative;
+        width: 50%;
+        flex-shrink: 0;
+        margin-right: var(--spacing-4);
+    }
+
+    .generator__preview::before {
+        content: '';
+        display: block;
+        padding-bottom: 100%;
+    }
+
+    .generator__preview svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--grey-000);
+    }
+
+    .generator__control-panel {
+        flex-grow: 1;
+        min-height: 100%;
+    }
+</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -23,7 +23,8 @@
         grid-template-columns: 1fr max-content 1fr;
         grid-template-rows: auto;
         align-items: center;
-        padding: var(--spacing-4);
+        padding: var(--spacing-5);
+        margin-bottom: var(--spacing-7);
     }
 
     .header__logo {