squircle

commit 17f64e7c5d564f0b05fb85d501a66406a19c23a6
parent df786c18a9fc9812a23e9d4ec71d846be6e515e0
Author: George Francis <georgedoescode@gmail.com>
Date:   Sun,  5 Jul 2020 09:57:48 +0100

various mobile tweaks added

Diffstat:
M
src/components/GeneratorControls.vue
 | 
24
++++++++++++++++++++++--
M
src/components/GeneratorPreview.vue
 | 
10
++++++++++
M
src/components/SocialSharing.vue
 | 
8
++++++++
M
src/components/TheGenerator.vue
 | 
5
++++-
M
src/components/TheHeader.vue
 | 
19
++++++++++++++++++-

5 files changed, 62 insertions(+), 4 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -32,7 +32,7 @@ export default {
                 name="roundness"
                 class="generator-controls__slider"
             />
-            <label class="generator-controls__label">Fill</label>
+
             <ColorSwatch
                 class="generator-controls__color-picker"
                 :colors="[
@@ -49,9 +49,12 @@ export default {
 
 <style scoped>
 .generator-controls {
+    justify-self: center;
     display: flex;
     justify-content: center;
     align-items: center;
+    max-width: var(--spacing-13);
+    width: 100%;
     padding: 0 var(--spacing-3);
 }
 
@@ -68,11 +71,28 @@ export default {
     grid-column: 1;
     align-self: center;
     margin-right: var(--spacing-4);
-    font-size: var(--font-size-3);
+    font-size: var(--font-size-4);
     font-weight: 700;
 }
 
 .generator-controls__slider {
     grid-column: 2;
 }
+
+.generator-controls__color-picker {
+    grid-column: -1 / 1;
+}
+
+@media only screen and (max-width: 48rem) {
+    .generator-controls {
+        padding: 0 var(--spacing-4);
+        padding-bottom: var(--spacing-6);
+    }
+    .generator-controls__inputs {
+        grid-row-gap: var(--spacing-5);
+    }
+    .generator-controls__label {
+        font-size: var(--font-size-3);
+    }
+}
 </style>
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -22,6 +22,9 @@ export default {
 .generator-preview {
     position: relative;
     width: 100%;
+    justify-self: center;
+    background: #fff;
+    border-radius: 24px;
 }
 
 .generator-preview::after {
@@ -49,4 +52,11 @@ export default {
     height: 100%;
     fill: var(--grey-900);
 }
+
+@media only screen and (max-width: 48rem) {
+    .generator-preview {
+        max-width: 280px;
+        margin-bottom: var(--spacing-3);
+    }
+}
 </style>
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -71,4 +71,12 @@ export default {
 .social-sharing__icon:active {
     transform: scale(0.875);
 }
+
+@media only screen and (max-width: 48rem) {
+    .social-sharing__icon {
+        width: var(--spacing-3);
+        height: var(--spacing-3);
+        margin-left: var(--spacing-3);
+    }
+}
 </style>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -13,7 +13,7 @@ export default {
     data() {
         return {
             squircleOpts: {
-                n: 4,
+                n: 1.5,
                 a: 50,
                 b: 50,
             },
@@ -86,6 +86,9 @@ export default {
 
     .generator {
         grid-template-columns: 1fr;
+        padding: 0;
+        background: none;
+        box-shadow: none;
     }
 
     .generator__preview-section {
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -12,7 +12,7 @@ export default {
 <template>
     <header class="header">
         <div class="header__logo"></div>
-        <h1 class="header__title">Squircle Maker</h1>
+        <h1 class="header__title">Squircley!</h1>
         <SocialSharing class="header__social" />
     </header>
 </template>
@@ -51,4 +51,21 @@ export default {
     grid-row: 1;
     justify-content: flex-end;
 }
+
+@media only screen and (max-width: 48rem) {
+    .header {
+        padding: var(--spacing-5) var(--spacing-4);
+        margin-bottom: var(--spacing-3);
+    }
+
+    .header__logo {
+        width: var(--spacing-5);
+        height: var(--spacing-5);
+        border-radius: 12px;
+    }
+
+    .header__title {
+        font-size: var(--font-size-5);
+    }
+}
 </style>