squircle

commit 3b8cfae91cb14cbb408a9e6c0ab74402ca3ebc80
parent 8395114c5a3ddae320745cf1e308acecfc04937c
Author: George Francis <georgedoescode@gmail.com>
Date:   Tue,  7 Jul 2020 08:27:04 +0100

add some placeholder about squircley text and relevant wrapper styles

Diffstat:
M
src/App.vue
 | 
20
++++++++++++++++++++
M
src/components/GeneratorControls.vue
 | 
2
+-

2 files changed, 21 insertions(+), 1 deletion(-)
diff --git a/src/App.vue b/src/App.vue
@@ -19,6 +19,14 @@ export default {
         <TheWaveBackground class="app__background" />
         <div class="app__content">
             <TheGenerator />
+            <p class="about-text">
+                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod
+                maxime quam sequi, corrupti quibusdam velit dolore nobis ex!
+                Nihil sunt placeat magni dolorem in quaerat aspernatur sapiente
+                illum mollitia aut assumenda corporis inventore deleniti,
+                corrupti sit. Ipsa dicta tenetur dolores eligendi enim quisquam
+                adipisci magni! Commodi voluptates neque maiores est!
+            </p>
         </div>
     </div>
 </template>
@@ -47,10 +55,22 @@ export default {
         minmax(0, var(--spacing-15))
         minmax(0, 1fr);
     grid-auto-rows: max-content;
+    max-width: 1280px;
+    margin: 0 auto;
+    padding-bottom: var(--spacing-6);
 }
 
 .generator {
     grid-row: 1;
     grid-column: 2;
+    margin-bottom: var(--spacing-8);
+}
+
+.about-text {
+    grid-row: 2;
+    grid-column: -1 / 1;
+    font-size: var(--font-size-3);
+    line-height: 1.75;
+    width: 50%;
 }
 </style>
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -78,7 +78,7 @@ export default {
                     :trigger-style="{
                         width: '64px',
                         height: '48px',
-                        borderRadius: '0 16px 16px 0',
+                        borderRadius: '0 12px 12px 0',
                     }"
                 />
             </div>