commit ee9707b8115ed4796dd2ec5ce5f73ed0e61523f5
parent 8b079447ff1aaf9223cf182a8bf7179ac2ca5012
Author: George Francis <georgedoescode@gmail.com>
Date: Fri, 10 Jul 2020 07:35:59 +0100
fix button styles on mobile
Diffstat:
7 files changed, 126 insertions(+), 89 deletions(-)
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?inline';
+import TheInfoSection from './components/TheInfoSection.vue';
export default {
name: 'App',
@@ -12,7 +12,7 @@ export default {
TheGenerator,
TheWaveBackground,
TheSquircleExplosion,
- SquircleDemo,
+ TheInfoSection,
},
};
</script>
@@ -24,26 +24,7 @@ export default {
<TheSquircleExplosion />
<div class="app__content">
<TheGenerator />
- <div class="app__content-grid">
- <SquircleDemo class="squircle-demo" />
- <div class="app__content-text">
- <div class="squiggle"></div>
-
- <p class="longform-paragraph">
- Looking to add some premium squircley goodness to add to
- your designs? Squircley is all you need to start
- creating beautiful organic shapes ready to use for
- logos, icons and background images.
- </p>
- <p class="longform-paragraph">
- The generator 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">Have fun! 🎨</p>
- </div>
- </div>
+ <TheInfoSection />
</div>
</div>
</template>
@@ -83,70 +64,9 @@ export default {
height: 540px;
}
-.app__content-grid {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- width: 100%;
- max-width: 1600px;
- margin: 0 auto;
- place-items: center;
-}
-
-.app__content-text {
- grid-column: 2 / 8;
-}
-
-.longform-paragraph {
- font-size: var(--font-size-4);
- line-height: 1.75;
- margin-bottom: var(--spacing-5);
-}
-
-.squircle-demo {
- justify-self: end;
- grid-column: 9 / 13;
- grid-row: 1;
- margin-top: 0;
-}
-
-.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-8);
-}
-
-@media only screen and (max-width: 68rem) {
- .app__content-grid {
- padding: 0 var(--spacing-4);
- }
- .app__content-text {
- grid-column: 1 / 8;
- }
-}
-
@media only screen and (max-width: 56rem) {
.generator {
margin-bottom: var(--spacing-7);
}
-
- .app__content-grid {
- display: block;
- }
-
- .squircle-demo {
- 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/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -80,7 +80,7 @@ export default {
class="generator-controls__slider"
:min="0"
:max="1"
- :value="0.75"
+ :value="0.5"
:step="0.01"
@change="handleControlChange"
/>
@@ -204,5 +204,13 @@ hr {
font-size: var(--font-size-3);
margin-right: var(--spacing-5);
}
+
+ .generator-export-controls {
+ grid-column: -1 / 1;
+ }
+
+ .generator-controls__label--export {
+ display: none;
+ }
}
</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -85,7 +85,7 @@ export default {
width: 24px;
height: 24px;
stroke-width: 1.5px;
- margin-left: var(--spacing-3);
+ margin-left: var(--spacing-2);
stroke: var(--grey-900);
transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
}
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -29,9 +29,10 @@ export default {
>
<path
:d="path"
- :transform="`translate(${(200 - scale) / 2} ${
- (200 - scale) / 2
- })`"
+ :transform="`translate(
+ ${(200 - scale) / 2}
+ ${(200 - scale) / 2}
+ )`"
/>
</svg>
</div>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -11,7 +11,7 @@ export default {
data() {
return {
squircleOpts: {
- curvature: 0.75,
+ curvature: 0.5,
scale: '100',
fill: '#1f2933',
},
diff --git a/src/components/TheInfoSection.vue b/src/components/TheInfoSection.vue
@@ -0,0 +1,97 @@
+<script>
+import SquircleHero from '@/assets/img/squircle-demo.svg?inline';
+
+export default {
+ name: 'TheInfoSection',
+ components: {
+ SquircleHero,
+ },
+};
+</script>
+
+<template>
+ <div class="info-section">
+ <SquircleHero class="info-section__squircle-hero" />
+ <div class="info-section__text">
+ <div class="info-section__squiggle"></div>
+ <p class="info-section__paragraph">
+ Looking to add some premium squircley goodness to add to your
+ designs? Squircley is all you need to start creating beautiful
+ organic shapes ready to use for logos, icons and background
+ images.
+ </p>
+ <p class="info-section__paragraph">
+ The generator 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="info-section__paragraph">Have fun! 🎨</p>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.info-section {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ width: 100%;
+ max-width: 1600px;
+ margin: 0 auto;
+ place-items: center;
+}
+
+.info-section__text {
+ grid-column: 2 / 8;
+}
+
+.info-section__paragraph {
+ font-size: var(--font-size-4);
+ line-height: 1.75;
+ margin-bottom: var(--spacing-5);
+}
+
+.info-section__squircle-hero {
+ justify-self: end;
+ grid-column: 9 / 13;
+ grid-row: 1;
+ margin-top: 0;
+}
+
+.info-section__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-8);
+}
+
+@media only screen and (max-width: 68rem) {
+ .info-section {
+ padding: 0 var(--spacing-4);
+ }
+ .info-section__text {
+ grid-column: 1 / 8;
+ }
+}
+
+@media only screen and (max-width: 56rem) {
+ .info-section {
+ display: block;
+ }
+
+ .info-section__squircle-hero {
+ width: 120px;
+ height: 120px;
+ float: right;
+ margin-left: var(--spacing-4);
+ margin-top: var(--spacing-9);
+ }
+
+ .info-section__paragraph {
+ font-size: var(--font-size-3);
+ }
+}
+</style>
diff --git a/src/components/test.svg b/src/components/test.svg
@@ -0,0 +1,10 @@
+<svg data-v-48b4e325="" id="squircleSVG" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="#1f2933"><path data-v-48b4e325="" d="
+ M 0, 50
+ C 0, 25 25, 0 50, 0
+ S 100, 25 100, 50
+ 75, 100 50, 100
+ 0, 75 0, 50
+ " transform="translate(
+ 50
+ 50
+ )"></path></svg>
+\ No newline at end of file
