commit 7634a1b99c97b41d817f5f6acee132692cfa64d5
parent a55cadff4d5b65270b6abf2aa61c9b17d816ed6d
Author: George Francis <georgedoescode@gmail.com>
Date: Thu, 9 Jul 2020 15:53:53 +0100
add proper copy and copy styles
Diffstat:
12 files changed, 123 insertions(+), 73 deletions(-)
diff --git a/public/index.html b/public/index.html
@@ -3,10 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Squircle Maker | Squircley</title>
+ <title>Squircley | Squircle Maker</title>
<meta
name="description"
- content="Create and export beautiful SVG squircles to use in your designs."
+ content="Create and export beautiful SVG squircles to use in your designs!"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap"
diff --git a/src/App.vue b/src/App.vue
@@ -3,7 +3,7 @@ import TheHeader from './components/TheHeader.vue';
import TheGenerator from './components/TheGenerator.vue';
import TheWaveBackground from './components/TheWaveBackground.vue';
import TheSquircleExplosion from './components/TheSquircleExplosion.vue';
-import SquircleDemo from '@/assets/img/squircle-demo.svg';
+import SquircleDemo from '@/assets/img/squircle-demo.svg?inline';
export default {
name: 'App',
@@ -27,24 +27,33 @@ export default {
<div class="app__content-grid">
<SquircleDemo class="squircle-demo" />
<div class="app__content-text">
+ <div class="squiggle"></div>
+ <p class="longform-paragraph">Hey there 👋</p>
<p class="longform-paragraph">
- 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!
+ Looking for some top-tier squircles (square x circle) to
+ add to your designs? You’ve come to the right place!
+ Squircley is a curve based generator for creating
+ beautiful squircles - ready to use for logos, icons,
+ weird blobby characters and more.
</p>
<p class="longform-paragraph">
- 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!
+ Squircley exports SVG files which can be copied straight
+ to the clipboard for dropping into your HTML / CSS or
+ downloaded to your computer ready to use in your design
+ software of choice (Figma, Sketch, Framer, etc)
</p>
+ <p class="longform-paragraph">
+ Wondering WTF a squircle actually is? Check out
+ <a href="https://youtu.be/z86cx2A4_3E"
+ >this awesome video
+ </a>
+ by Dan Shiffman or
+ <a href="https://mathworld.wolfram.com/Squircle.html"
+ >this page</a
+ >
+ on Wolfram MathWorld.
+ </p>
+ <p class="longform-paragraph">Enjoy! ❤️</p>
</div>
</div>
</div>
@@ -100,7 +109,7 @@ export default {
}
.longform-paragraph {
- font-size: var(--font-size-3);
+ font-size: var(--font-size-4);
line-height: 1.75;
margin-bottom: var(--spacing-5);
}
@@ -109,6 +118,17 @@ export default {
justify-self: end;
grid-column: 9 / 13;
grid-row: 1;
+ margin-top: var(--spacing-7);
+}
+
+.squiggle {
+ width: var(--spacing-9);
+ height: 8px;
+ background-image: url('./assets/img/wiggle.svg');
+ background-size: 58px auto;
+ background-position: center center;
+ background-repeat: repeat-x;
+ margin-bottom: var(--spacing-7);
}
@media only screen and (max-width: 68rem) {
@@ -130,10 +150,15 @@ export default {
}
.squircle-demo {
- width: 128px;
- height: 128px;
+ width: 120px;
+ height: 120px;
float: right;
margin-left: var(--spacing-4);
+ margin-top: var(--spacing-9);
+ }
+
+ .longform-paragraph {
+ font-size: var(--font-size-3);
}
}
</style>
diff --git a/src/assets/img/wiggle.svg b/src/assets/img/wiggle.svg
@@ -0,0 +1,10 @@
+<svg width="300" height="60" viewBox="0 0 300 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M0 20C30 20 45 40 75 40C105 40 120 20 150 20C180 20 195 40 225 40C255 40 270 20 300 20" stroke="#1F2933" stroke-width="16"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="60" height="300" fill="white" transform="translate(0 60) rotate(-90)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -69,7 +69,9 @@ input[type='range'] {
input[type='range']:focus {
outline: none;
+}
+input[type='range']:hover {
--track-bg: var(--grey-100);
}
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -1,11 +1,13 @@
<script>
import VSwatches from 'vue-swatches';
import 'vue-swatches/dist/vue-swatches.css';
+import GeneratorExportOptions from './GeneratorExportOptions.vue';
export default {
name: 'GeneratorControls',
components: {
VSwatches,
+ GeneratorExportOptions,
},
props: {
initialFill: {
@@ -116,15 +118,13 @@ export default {
}"
/>
</div>
- <label for="quality" class="generator-controls__label">
- Smoothing
- </label>
-
- <BaseTwoBtnToggle
- :toggle-state="detailToggleState"
- class="generator-controls__detail"
- @change="handleDetailChange"
- />
+ <hr />
+ <label
+ for=""
+ class="generator-controls__label generator-controls__label--export"
+ >Export</label
+ >
+ <GeneratorExportOptions />
</div>
</div>
</template>
@@ -135,6 +135,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
+ flex-direction: column;
max-width: var(--spacing-13);
width: 100%;
}
@@ -142,7 +143,7 @@ export default {
.generator-controls__inputs {
display: grid;
grid-template-columns: max-content 1fr;
- grid-auto-rows: minmax(var(--spacing-6), max-content);
+ grid-template-rows: var(--spacing-6) var(--spacing-6) var(--spacing-6) max-content max-content;
grid-row-gap: var(--spacing-5);
justify-content: center;
width: 100%;
@@ -187,6 +188,18 @@ export default {
align-self: center;
}
+.generator-export-controls {
+ grid-column: 2;
+}
+
+hr {
+ grid-column: -1 / 1;
+ border: 0;
+ height: 2px;
+ background: var(--grey-000);
+ margin: var(--spacing-1) 0;
+}
+
@media only screen and (max-width: 56rem) {
.generator-controls {
padding: 0 var(--spacing-4);
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -1,6 +1,6 @@
<script>
-import DownloadIcon from '@/assets/img/download-cloud.svg';
-import ClipBoardIcon from '@/assets/img/clipboard.svg';
+import DownloadIcon from '@/assets/img/download-cloud.svg?inline';
+import ClipBoardIcon from '@/assets/img/clipboard.svg?inline';
import { saveAs } from 'file-saver';
import copy from 'copy-to-clipboard';
@@ -39,6 +39,7 @@ export default {
class="generator-export-controls__btn"
@click="downloadSVG"
>
+ Save
<DownloadIcon />
</button>
<button
@@ -46,6 +47,7 @@ export default {
class="generator-export-controls__btn"
@click="copySVGToClipBoard"
>
+ Copy
<ClipBoardIcon />
</button>
</div>
@@ -54,44 +56,49 @@ export default {
<style scoped>
.generator-export-controls {
display: flex;
- justify-content: flex-end;
+ align-items: center;
+ justify-content: center;
width: 100%;
}
.generator-export-controls__btn {
- align-self: flex-end;
display: flex;
justify-content: center;
align-items: center;
- width: var(--spacing-6);
+ padding: 0 var(--spacing-3);
+ width: 50%;
height: var(--spacing-6);
margin-left: var(--spacing-4);
- padding: 0;
- border: 1px solid var(--grey-100);
- border-radius: 50%;
outline: none;
cursor: pointer;
- background: #fff;
- transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
+ background: var(--grey-900);
+ border-radius: 32px;
+ color: #fff;
+ border: 2px solid var(--grey-900);
}
.generator-export-controls__btn svg {
width: 24px;
height: 24px;
- stroke: var(--grey-900);
- stroke-width: 2px;
+ stroke: var(--grey-000);
+ stroke-width: 1.5px;
+ margin-left: var(--spacing-3);
+ transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
}
.generator-export-controls__btn:hover {
- transform: scale(1.125);
+ background: #fff;
+ color: var(--grey-900);
+ font-weight: 700;
}
-.generator-export-controls__btn:active {
- transform: scale(0.875);
+.generator-export-controls__btn:hover svg {
+ transform: scale(1.125);
+ stroke: var(--grey-900);
}
.generator-export-controls__btn:active svg {
- stroke: var(--grey-500);
+ transform: scale(0.875);
}
.generator-export-controls__btn:first-child {
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -65,7 +65,7 @@ export default {
@media only screen and (max-width: 56rem) {
.generator-preview {
max-width: 280px;
- margin-bottom: var(--spacing-4);
+ margin-bottom: var(--spacing-3);
}
}
</style>
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -1,6 +1,6 @@
<script>
-import RedditLogo from '@/assets/img/social-icons/reddit-alien.svg';
-import TwitterLogo from '@/assets/img/social-icons/twitter.svg';
+import RedditLogo from '@/assets/img/social-icons/reddit-alien.svg?inline';
+import TwitterLogo from '@/assets/img/social-icons/twitter.svg?inline';
export default {
name: 'SocialSharing',
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -1,14 +1,12 @@
<script>
import GeneratorPreview from './GeneratorPreview.vue';
import GeneratorControls from './GeneratorControls.vue';
-import GeneratorExportOptions from './GeneratorExportOptions.vue';
export default {
name: 'TheGenerator',
components: {
GeneratorPreview,
GeneratorControls,
- GeneratorExportOptions,
},
data() {
return {
@@ -69,7 +67,6 @@ export default {
:initial-fill="squircleOpts.fill"
@controls-changed="handleControlChange"
/>
- <GeneratorExportOptions class="generator__export-opts" />
</div>
</template>
@@ -85,12 +82,6 @@ export default {
border-radius: 32px;
}
-.generator__export-opts {
- position: absolute;
- bottom: -24px;
- right: calc(var(--spacing-5));
-}
-
@media screen and (max-width: 56rem) {
.generator-wrapper {
width: 100%;
@@ -112,14 +103,5 @@ export default {
.generator__control-section {
padding: 0;
}
-
- .generator__export-opts {
- position: relative;
- bottom: auto;
- right: auto;
- max-width: var(--spacing-13);
- margin: 0 auto;
- padding: 0 var(--spacing-4);
- }
}
</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -1,6 +1,6 @@
<script>
-import SocialSharing from './SocialSharing.vue';
-import SquircleyLogo from '@/assets/img/squircley-logo.svg';
+import SocialSharing from './SocialSharing.vue?inline';
+import SquircleyLogo from '@/assets/img/squircley-logo.svg?inline';
export default {
name: 'TheHeader',
diff --git a/src/components/TheSquircleExplosion.vue b/src/components/TheSquircleExplosion.vue
@@ -1,7 +1,7 @@
<script>
-import Squircle1 from '@/assets/img/squircle-01.svg';
-import Squircle2 from '@/assets/img/squircle-02.svg';
-import Squircle3 from '@/assets/img/squircle-03.svg';
+import Squircle1 from '@/assets/img/squircle-01.svg?inline';
+import Squircle2 from '@/assets/img/squircle-02.svg?inline';
+import Squircle3 from '@/assets/img/squircle-03.svg?inline';
export default {
name: 'TheSquircleExplosion',
diff --git a/webpack.config.js b/webpack.config.js
@@ -91,7 +91,18 @@ module.exports = (env, argv) => {
},
{
test: /\.svg$/,
- use: ['babel-loader', 'vue-svg-loader'],
+ oneOf: [
+ {
+ resourceQuery: /inline/,
+ use: ['babel-loader', 'vue-svg-loader'],
+ },
+ {
+ loader: 'file-loader',
+ query: {
+ name: 'assets/[name].[hash:8].[ext]',
+ },
+ },
+ ],
},
],
},
