commit a55cadff4d5b65270b6abf2aa61c9b17d816ed6d
parent e55a2c395296f4a3814fda11439fadd4b0c6b8b1
Author: George Francis <georgedoescode@gmail.com>
Date: Thu, 9 Jul 2020 09:10:43 +0100
various styling tweaks, add grid for app text / image content
Diffstat:
7 files changed, 91 insertions(+), 18 deletions(-)
diff --git a/src/App.vue b/src/App.vue
@@ -25,16 +25,27 @@ export default {
<div class="app__content">
<TheGenerator />
<div class="app__content-grid">
- <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>
<SquircleDemo class="squircle-demo" />
+ <div class="app__content-text">
+ <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!
+ </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!
+ </p>
+ </div>
</div>
</div>
</div>
@@ -64,7 +75,7 @@ export default {
.generator {
max-width: 56rem;
margin: 0 auto;
- margin-bottom: var(--spacing-9);
+ margin-bottom: var(--spacing-8);
}
.squircle-explosion {
@@ -77,11 +88,18 @@ export default {
.app__content-grid {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: repeat(12, 1fr);
width: 100%;
+ max-width: 1600px;
+ margin: 0 auto;
+ place-items: center;
+}
+
+.app__content-text {
+ grid-column: 2 / 8;
}
-.about-text {
+.longform-paragraph {
font-size: var(--font-size-3);
line-height: 1.75;
margin-bottom: var(--spacing-5);
@@ -89,5 +107,33 @@ export default {
.squircle-demo {
justify-self: end;
+ grid-column: 9 / 13;
+ grid-row: 1;
+}
+
+@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: 128px;
+ height: 128px;
+ float: right;
+ margin-left: var(--spacing-4);
+ }
}
</style>
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -190,7 +190,7 @@ export default {
@media only screen and (max-width: 56rem) {
.generator-controls {
padding: 0 var(--spacing-4);
- padding-bottom: var(--spacing-6);
+ padding-bottom: var(--spacing-3);
}
.generator-controls__inputs {
@@ -200,6 +200,7 @@ export default {
.generator-controls__label {
font-size: var(--font-size-3);
+ margin-right: var(--spacing-5);
}
}
</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -23,9 +23,9 @@ export default {
copySVGToClipBoard() {
const content = document.querySelector('#squircleSVG').outerHTML;
copy(content);
- this.$toasted.show('Squircle copied to clipboard!', {
+ this.$toasted.show('Squircle SVG copied to clipboard!', {
position: 'bottom-center',
- duration: 1500,
+ duration: 2500,
});
},
},
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-3);
+ margin-bottom: var(--spacing-4);
}
}
</style>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -112,5 +112,14 @@ 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
@@ -73,7 +73,24 @@ export default {
}
.header__title {
+ font-size: var(--font-size-6);
+ }
+}
+
+@media only screen and (max-width: 32rem) {
+ .header__social {
+ display: none;
+ }
+
+ .header__title {
+ grid-column: 1;
+ justify-self: start;
font-size: var(--font-size-5);
}
+
+ .header__logo {
+ grid-column: 3;
+ justify-self: end;
+ }
}
</style>
diff --git a/src/components/TheSquircleExplosion.vue b/src/components/TheSquircleExplosion.vue
@@ -25,7 +25,7 @@ export default {
<style>
.squircle-explosion {
- position: relative;
+ position: absolute;
pointer-events: none;
}
@@ -72,7 +72,7 @@ export default {
transform: rotate(128deg);
}
-@media only screen and (max-width: 56rem) {
+@media only screen and (max-width: 72rem) {
.squircle-explosion {
display: none;
}
