squircle

commit 0fbde71cceb0ef8999f440d8adf72e232c70ecdd
parent 5a59027eab9e74bdb32198685a904a9dbe450a68
Author: George Francis <georgedoescode@gmail.com>
Date:   Tue, 19 Jan 2021 06:57:22 +0000

update social sharing

Diffstat:
M
src/components/SocialSharing.vue
 | 
72
++++++++++--------------------------------------------------------------
M
src/components/TheHeader.vue
 | 
2
+-

2 files changed, 11 insertions(+), 63 deletions(-)
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -1,41 +1,17 @@
 <script>
-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',
-    components: {
-        RedditLogo,
-        TwitterLogo,
-    },
-    data() {
-        return {
-            sharingOptions: {
-                url: 'https://www.squircley.app',
-                title: 'Squircle Maker | Squircley',
-            },
-        };
-    },
 };
 </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>
+        <p>
+            Made with ✨ by
+            <a href="https://twitter.com/georgedoescode" target="_blank"
+                >George Francis</a
+            >
+        </p>
     </div>
 </template>
 
@@ -44,39 +20,11 @@ export default {
     display: flex;
 }
 
-.social-sharing__icon {
-    display: block;
-    width: var(--spacing-4);
-    height: var(--spacing-4);
-    margin-left: var(--spacing-5);
-    cursor: pointer;
-    transition: transform 125ms ease-in-out;
-}
-
-.social-sharing__icon svg {
-    width: 100%;
-    height: 100%;
-    fill: #0c008c;
-    transition: fill 125ms ease-in-out, transform 125ms ease-in-out;
-}
-
-.social-sharing__icon:hover svg {
-    transform: scale(1.125);
-}
-
-.social-sharing__icon:active svg {
-    fill: var(--grey-500);
-}
-
-.social-sharing__icon:active {
-    transform: scale(0.875);
+p {
+    font-weight: 700;
 }
 
-@media only screen and (max-width: 62rem) {
-    .social-sharing__icon {
-        width: var(--spacing-3);
-        height: var(--spacing-3);
-        margin-left: var(--spacing-4);
-    }
+p a {
+    color: #4d3df7;
 }
 </style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -77,7 +77,7 @@ export default {
     }
 }
 
-@media only screen and (max-width: 32rem) {
+@media only screen and (max-width: 48rem) {
     .header__social {
         display: none;
     }