squircle

commit 0e66d6aa1ac0e872e6cbeb8cffccd9eff8ce6d4f
parent be1ecdfea445ae0ba8f9b7349c686e11593f7a91
Author: George Francis <georgedoescode@gmail.com>
Date:   Sat,  4 Jul 2020 08:27:10 +0100

remove lots of wrapper divs

Diffstat:
M
src/components/GeneratorControls.vue
 | 
11
+++++++++--
M
src/components/GeneratorPreview.vue
 | 
2
+-
M
src/components/TheGenerator.vue
 | 
10
+++-------

3 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -15,8 +15,8 @@ export default {
 </script>
 
 <template>
-    <div>
-        <div class="generator-controls">
+    <div class="generator-controls">
+        <div class="generator-controls__inputs">
             <label for="scaleX" class="generator-controls__label">
                 Scale X
             </label>
@@ -49,10 +49,17 @@ export default {
 
 <style scoped>
 .generator-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.generator-controls__inputs {
     display: grid;
     grid-template-columns: max-content 1fr;
     grid-auto-rows: minmax(var(--spacing-5), max-content);
     grid-row-gap: var(--spacing-5);
+    justify-content: center;
     width: 100%;
 }
 
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -6,7 +6,7 @@ export default {
 
 <template>
     <div class="generator-preview">
-        <svg width="320" height="320" viewbox="0 0 320 320">
+        <svg>
             <rect
                 x="25%"
                 y="25%"
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -16,13 +16,9 @@ export default {
 <template>
     <div class="generator-wrapper">
         <div class="generator">
-            <div class="generator__preview-section">
-                <GeneratorPreview />
-            </div>
-            <div class="generator__control-section">
-                <GeneratorControls />
-                <GeneratorExportOptions class="generator__export-opts" />
-            </div>
+            <GeneratorPreview />
+            <GeneratorControls />
+            <GeneratorExportOptions class="generator__export-opts" />
         </div>
     </div>
 </template>