squircle

commit 2832be053c6832a2026b26ffc8556f189d66f7ee
parent 7817a088f5d6cc49514f97b3a8a45867c07502c5
Author: George Francis <georgedoescode@gmail.com>
Date:   Thu,  2 Jul 2020 10:36:10 +0100

cleaner CSS grid layout for heading, will make mobile much easier to style

Diffstat:
M
src/assets/styles/app.css
 | 
1
+
M
src/components/SocialSharing.vue
 | 
11
++++++-----
M
src/components/TheHeader.vue
 | 
12
+++++++-----

3 files changed, 14 insertions(+), 10 deletions(-)
diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -128,4 +128,5 @@ body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smothing: grayscale;
     background: var(--grey-000);
+    overflow-x: hidden;
 }
diff --git a/src/components/SocialSharing.vue b/src/components/SocialSharing.vue
@@ -41,10 +41,7 @@
 
 <style scoped>
     .social-sharing {
-        width: 100%;
-        height: 100%;
         display: flex;
-        align-items: center;
     }
 
     .social-sharing__icon {
@@ -60,11 +57,15 @@
         width: 100%;
         height: 100%;
         fill: var(--grey-900);
-        transition: fill 125ms ease-in-out;
+        transition: fill 125ms ease-in-out, transform 125ms ease-in-out;
     }
 
     .social-sharing__icon:hover svg {
-        fill: var(--grey-600);
+        transform: scale(1.125);
+    }
+
+    .social-sharing__icon:active svg {
+        fill: var(--grey-500);
     }
 
     .social-sharing__icon:active {
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -13,22 +13,22 @@
     <header class="header">
         <div class="header__logo"></div>
         <h1 class="header__title">Squircle Maker</h1>
-        <div class="header__social">
-            <SocialSharing />
-        </div>
+        <SocialSharing class="header__social" />
     </header>
 </template>
 
 <style scoped>
     .header {
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr max-content 1fr;
+        grid-template-rows: auto;
         align-items: center;
         padding: var(--spacing-4);
     }
 
     .header__logo {
         grid-column: 1;
+        grid-row: 1;
         justify-self: start;
         width: var(--spacing-6);
         height: var(--spacing-6);
@@ -38,6 +38,7 @@
 
     .header__title {
         grid-column: 2;
+        grid-row: 1;
         justify-self: center;
         font-size: var(--font-size-7);
         font-weight: 900;
@@ -46,6 +47,7 @@
 
     .header__social {
         grid-column: 3;
-        justify-self: end;
+        grid-row: 1;
+        justify-content: flex-end;
     }
 </style>