squircle

commit 8b079447ff1aaf9223cf182a8bf7179ac2ca5012
parent f2c5615338a328169343d9a604f4b22533e36ead
Author: George Francis <georgedoescode@gmail.com>
Date:   Thu,  9 Jul 2020 22:40:47 +0100

subtle spacing tweaks

Diffstat:
M
src/components/BaseRangeInput.vue
 | 
2
+-
M
src/components/GeneratorControls.vue
 | 
3
++-
M
src/components/GeneratorPreview.vue
 | 
2
+-
M
src/components/TheGenerator.vue
 | 
4
++--

4 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -59,7 +59,7 @@ input[type='range'] {
     background: transparent;
     outline: none;
 
-    --thumb-width: 12px;
+    --thumb-width: 16px;
     --thumb-height: 32px;
     --thumb-radius: 16px;
     --thumb-bg: var(--grey-900);
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -80,7 +80,7 @@ export default {
                 class="generator-controls__slider"
                 :min="0"
                 :max="1"
-                :value="0.5"
+                :value="0.75"
                 :step="0.01"
                 @change="handleControlChange"
             />
@@ -124,6 +124,7 @@ export default {
     flex-direction: column;
     max-width: var(--spacing-13);
     width: 100%;
+    padding-right: var(--spacing-1);
 }
 
 .generator-controls__inputs {
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -53,7 +53,7 @@ export default {
     width: 100%;
     height: 100%;
     content: '';
-    border: 1px dashed var(--grey-100);
+    border: 2px dashed var(--grey-100);
     border-radius: 24px;
 }
 
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -11,7 +11,7 @@ export default {
     data() {
         return {
             squircleOpts: {
-                curvature: 0.5,
+                curvature: 0.75,
                 scale: '100',
                 fill: '#1f2933',
             },
@@ -69,7 +69,7 @@ export default {
     position: relative;
     display: grid;
     grid-template-columns: 368px 1fr;
-    grid-gap: var(--spacing-5);
+    grid-gap: var(--spacing-6);
     padding: var(--spacing-5);
     background: #fff;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.075);