squircle

Make all the squircles you need, in the browser. https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

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:
Msrc/App.vue | 20++++++++++++++++++++
Msrc/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>