commit 0daa07afa1a8b5d0dcf28bc3c971b0be9f8e8790
parent 9deff18ebbd3e3d801bf16d1a34ef3ffc9733724
Author: George Francis <georgedoescode@gmail.com>
Date: Thu, 2 Jul 2020 08:05:59 +0100
finish up first pass of header, add social sharing options
Diffstat:
11 files changed, 185 insertions(+), 20 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "squircle-land",
+ "name": "squircle",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
@@ -10163,6 +10163,15 @@
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
"dev": true
},
+ "svg-to-vue": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.7.0.tgz",
+ "integrity": "sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==",
+ "dev": true,
+ "requires": {
+ "svgo": "^1.3.2"
+ }
+ },
"svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -10903,6 +10912,11 @@
"vue-style-loader": "^4.1.0"
}
},
+ "vue-social-sharing": {
+ "version": "3.0.0-beta.11",
+ "resolved": "https://registry.npmjs.org/vue-social-sharing/-/vue-social-sharing-3.0.0-beta.11.tgz",
+ "integrity": "sha512-jIATgcKcBGQveAbU4sKjHcsGN7gI/bq/T9fm/5qowtBuZe0I+5CZRWcAGDd6G64HzQfFEyNBLC02GYjMtaovhA=="
+ },
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -10913,6 +10927,16 @@
"loader-utils": "^1.0.2"
}
},
+ "vue-svg-loader": {
+ "version": "0.16.0",
+ "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
+ "integrity": "sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==",
+ "dev": true,
+ "requires": {
+ "loader-utils": "^1.2.3",
+ "svg-to-vue": "^0.7.0"
+ }
+ },
"vue-template-compiler": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
"stylelint-webpack-plugin": "^2.1.0",
"vue-loader": "^15.9.3",
"vue-style-loader": "^4.1.2",
+ "vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
@@ -45,6 +46,7 @@
"dependencies": {
"normalize.css": "^8.0.1",
"vue": "^2.6.11",
+ "vue-social-sharing": "^3.0.0-beta.11",
"vuex": "^3.5.1"
}
}
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Generator | Squircle App</title>
+ <title>Squircley | Squircle Maker</title>
<meta
name="description"
content="Create and export beautiful SVG squircles to use in your designs."
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,14 @@
<script>
+ import TheHeader from './components/TheHeader.vue';
+
export default {
name: 'App',
+ components: {
+ TheHeader,
+ },
};
</script>
<template>
- <main>
- <h1>Let's Squircle!</h1>
- </main>
+ <TheHeader />
</template>
diff --git a/src/assets/img/social-icons/reddit-alien.svg b/src/assets/img/social-icons/reddit-alien.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M440.3 203.5c-15 0-28.2 6.2-37.9 15.9-35.7-24.7-83.8-40.6-137.1-42.3L293 52.3l88.2 19.8c0 21.6 17.6 39.2 39.2 39.2 22 0 39.7-18.1 39.7-39.7s-17.6-39.7-39.7-39.7c-15.4 0-28.7 9.3-35.3 22l-97.4-21.6c-4.9-1.3-9.7 2.2-11 7.1L246.3 177c-52.9 2.2-100.5 18.1-136.3 42.8-9.7-10.1-23.4-16.3-38.4-16.3-55.6 0-73.8 74.6-22.9 100.1-1.8 7.9-2.6 16.3-2.6 24.7 0 83.8 94.4 151.7 210.3 151.7 116.4 0 210.8-67.9 210.8-151.7 0-8.4-.9-17.2-3.1-25.1 49.9-25.6 31.5-99.7-23.8-99.7zM129.4 308.9c0-22 17.6-39.7 39.7-39.7 21.6 0 39.2 17.6 39.2 39.7 0 21.6-17.6 39.2-39.2 39.2-22 .1-39.7-17.6-39.7-39.2zm214.3 93.5c-36.4 36.4-139.1 36.4-175.5 0-4-3.5-4-9.7 0-13.7 3.5-3.5 9.7-3.5 13.2 0 27.8 28.5 120 29 149 0 3.5-3.5 9.7-3.5 13.2 0 4.1 4 4.1 10.2.1 13.7zm-.8-54.2c-21.6 0-39.2-17.6-39.2-39.2 0-22 17.6-39.7 39.2-39.7 22 0 39.7 17.6 39.7 39.7-.1 21.5-17.7 39.2-39.7 39.2z"/></svg>
+\ No newline at end of file
diff --git a/src/assets/img/social-icons/twitter.svg b/src/assets/img/social-icons/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
+\ No newline at end of file
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -91,20 +91,20 @@ table {
/* Spacing */
--spacing-0: 0.25rem;
--spacing-1: 0.5rem;
- --spacing-3: 0.75rem;
- --spacing-4: 1rem;
- --spacing-5: 1.5rem;
- --spacing-6: 2rem;
- --spacing-7: 3rem;
- --spacing-8: 4rem;
- --spacing-9: 6rem;
- --spacing-10: 8rem;
- --spacing-11: 12rem;
- --spacing-12: 16rem;
- --spacing-13: 24rem;
- --spacing-14: 32rem;
- --spacing-15: 40rem;
- --spacing-16: 48rem;
+ --spacing-2: 0.75rem;
+ --spacing-3: 1rem;
+ --spacing-4: 1.5rem;
+ --spacing-5: 2rem;
+ --spacing-6: 3rem;
+ --spacing-7: 4rem;
+ --spacing-8: 6rem;
+ --spacing-9: 8rem;
+ --spacing-10: 12rem;
+ --spacing-11: 16rem;
+ --spacing-12: 24rem;
+ --spacing-13: 32rem;
+ --spacing-14: 40rem;
+ --spacing-15: 48rem;
/* Colors - Grey */
--grey-900: #1f2933;
@@ -127,4 +127,5 @@ body {
color: var(--grey-900);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smothing: grayscale;
+ background: var(--grey-000);
}
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -0,0 +1,73 @@
+<script>
+ import RedditLogo from '@/assets/img/social-icons/reddit-alien.svg';
+ import TwitterLogo from '@/assets/img/social-icons/twitter.svg';
+
+ export default {
+ name: 'SocialSharing',
+ components: {
+ RedditLogo,
+ TwitterLogo,
+ },
+ data() {
+ return {
+ sharingOptions: {
+ url: 'https://www.squircley.app',
+ title: 'Squircley | Squircle Maker',
+ },
+ };
+ },
+ };
+</script>
+
+<template>
+ <div class="social-sharing">
+ <ShareNetwork
+ class="social-sharing__icon"
+ network="reddit"
+ v-bind="sharingOptions"
+ >
+ <RedditLogo />
+ </ShareNetwork>
+ <ShareNetwork
+ class="social-sharing__icon"
+ network="twitter"
+ v-bind="sharingOptions"
+ hashtags="squircle, design, shapes, icons, logos"
+ >
+ <TwitterLogo />
+ </ShareNetwork>
+ </div>
+</template>
+
+<style scoped>
+ .social-sharing {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+
+ .social-sharing__icon {
+ display: block;
+ width: var(--spacing-4);
+ height: var(--spacing-4);
+ margin-left: var(--spacing-4);
+ cursor: pointer;
+ transition: transform 125ms ease-in-out;
+ }
+
+ .social-sharing__icon svg {
+ width: 100%;
+ height: 100%;
+ fill: var(--grey-900);
+ transition: fill 125ms ease-in-out;
+ }
+
+ .social-sharing__icon:hover svg {
+ fill: var(--grey-600);
+ }
+
+ .social-sharing__icon:active {
+ transform: scale(0.875);
+ }
+</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -0,0 +1,51 @@
+<script>
+ import SocialSharing from './SocialSharing.vue';
+
+ export default {
+ name: 'TheHeader',
+ components: {
+ SocialSharing,
+ },
+ };
+</script>
+
+<template>
+ <header class="header">
+ <div class="header__logo"></div>
+ <h1 class="header__title">Squircle Maker</h1>
+ <div class="header__social">
+ <SocialSharing />
+ </div>
+ </header>
+</template>
+
+<style scoped>
+ .header {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ align-items: center;
+ padding: var(--spacing-4);
+ }
+
+ .header__logo {
+ grid-column: 1;
+ justify-self: start;
+ width: var(--spacing-6);
+ height: var(--spacing-6);
+ background: var(--grey-900);
+ border-radius: 16px;
+ }
+
+ .header__title {
+ grid-column: 2;
+ justify-self: center;
+ font-size: var(--font-size-7);
+ font-weight: 900;
+ text-align: center;
+ }
+
+ .header__social {
+ grid-column: 3;
+ justify-self: end;
+ }
+</style>
diff --git a/src/main.js b/src/main.js
@@ -2,6 +2,9 @@ import './assets/styles/app.css';
import Vue from 'vue';
import App from './App.vue';
+import VueSocialSharing from 'vue-social-sharing';
+
+Vue.use(VueSocialSharing);
Vue.config.productionTip = false;
diff --git a/webpack.config.js b/webpack.config.js
@@ -78,7 +78,7 @@ module.exports = (env, argv) => {
],
},
{
- test: /\.(png|jpe?g|gif|svg)$/i,
+ test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
@@ -89,6 +89,10 @@ module.exports = (env, argv) => {
},
],
},
+ {
+ test: /\.svg$/,
+ use: ['babel-loader', 'vue-svg-loader'],
+ },
],
},
plugins: [
