squircle

commit fc47313056101f52c5acfc65e499d0ac53624a6a
parent cd085f5244a9024ce9b389b68b5f7e499a5ed5b9
Author: George Francis <georgedoescode@gmail.com>
Date:   Thu, 23 Jul 2020 06:39:49 +0100

adjust mqs to be relative to 64rem, bump generator width to 64rem, bump preview width

Diffstat:
M
src/App.vue
 | 
4
++--
M
src/components/GeneratorControls.vue
 | 
16
++++++++--------
M
src/components/GeneratorPreview.vue
 | 
2
+-
M
src/components/SocialSharing.vue
 | 
2
+-
M
src/components/TheGenerator.vue
 | 
2
+-
M
src/components/TheHeader.vue
 | 
2
+-
M
src/components/TheInfoSection.vue
 | 
2
+-

7 files changed, 15 insertions(+), 15 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -60,7 +60,7 @@ export default {
 }
 
 .generator {
-    max-width: 56rem;
+    max-width: 64rem;
     margin: 0 auto;
     margin-bottom: var(--spacing-8);
 }
@@ -73,7 +73,7 @@ export default {
     height: 540px;
 }
 
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 64rem) {
     .generator {
         margin-bottom: var(--spacing-7);
     }
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -76,13 +76,13 @@ export default {
                 Rotation
             </label>
             <BaseRangeInput
-                    name="rotation"
-                    class="generator-controls__slider"
-                    :min="-45"
-                    :max="45"
-                    :value="rotation"
-                    :step="1"
-                    @change="handleControlChange"
+                name="rotation"
+                class="generator-controls__slider"
+                :min="-45"
+                :max="45"
+                :value="rotation"
+                :step="1"
+                @change="handleControlChange"
             />
             <label for="scale" class="generator-controls__label">
                 Scale
@@ -240,7 +240,7 @@ hr {
     margin: var(--spacing-1) 0;
 }
 
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 64rem) {
     .generator-controls {
         padding: 0 var(--spacing-4);
         padding-bottom: var(--spacing-3);
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -80,7 +80,7 @@ export default {
     height: 100%;
 }
 
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 64rem) {
     .generator-preview {
         max-width: 280px;
         margin-bottom: var(--spacing-3);
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -72,7 +72,7 @@ export default {
     transform: scale(0.875);
 }
 
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 64rem) {
     .social-sharing__icon {
         width: var(--spacing-3);
         height: var(--spacing-3);
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -83,7 +83,7 @@ export default {
     border-radius: 48px;
 }
 
-@media screen and (max-width: 60rem) {
+@media screen and (max-width: 64rem) {
     .generator-wrapper {
         width: 100%;
     }
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -60,7 +60,7 @@ export default {
     justify-content: flex-end;
 }
 
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 64rem) {
     .header {
         padding: var(--spacing-4);
         margin-bottom: var(--spacing-4);
diff --git a/src/components/TheInfoSection.vue b/src/components/TheInfoSection.vue
@@ -115,7 +115,7 @@ export default {
     }
 }
 
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 64rem) {
     .info-section {
         display: block;
     }