Merge pull request #49 from royalfig/bug/touch

updated underline sharebar and grid for ie

src/js/post/progress_and_share.js

@@ -31,17 +31,17 @@ const shareBarAnimation = () => {
       footer.getBoundingClientRect().top - buffer
   ) {
     if (window.innerWidth >= 1024) {
-      shareBar.style.marginLeft = '0';
+      shareBar.style.transform = 'translate3d(0,-50%,0)';
       shareBar.style.opacity = '1';
     } else {
-      shareBar.style.marginBottom = '0';
+      shareBar.style.transform = 'translate3d(0,0,0)';
       shareBar.style.opacity = '1';
     }
   } else if (window.innerWidth >= 1024) {
-    shareBar.style.marginLeft = '-200px';
+    shareBar.style.transform = 'translate3d(-100%,-50%,0)';
     shareBar.style.opacity = '0';
   } else {
-    shareBar.style.marginBottom = '-100px';
+    shareBar.style.transform = 'translate3d(0,100%,0)';
     shareBar.style.opacity = '0';
   }
 };

src/scss/abstracts/_mixins.scss

@@ -1,13 +1,14 @@
 @use 'variables';
+@use 'functions';
 //-------------------------------------------
 // Color
 //-------------------------------------------
 @mixin color-map($property, $color) {
   @if $color == transparent {
     #{$property}: $color;
   } @else {
-    #{$property}: color($color);
-    #{$property}: var(--#{$color}, color($color));
+    #{$property}: functions.color($color);
+    #{$property}: var(--#{$color}, functions.color($color));
   }
 }
 

src/scss/components/_grid.scss

@@ -14,6 +14,7 @@
     .card {
       width: 50%;
       min-width: 14.375rem;
+      margin-bottom: 1rem;
       &:first-child {
         width: 100%;
       }

src/scss/components/_share.scss

@@ -14,26 +14,21 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  padding: 0.5rem 0.25rem;
-  margin: 0;
-  margin-bottom: -100px;
-  font-size: 0.8rem;
   font-weight: 700;
   @include mixins.color-map(color, text2);
   text-align: center;
   @include mixins.color-map(background-color, surface3);
-  opacity: 0;
-
-  @include mixins.transition(all);
+  border-bottom: 3px solid var(--text4);
 
-  &__title {
-    margin-right: 1.5rem;
-  }
+  opacity: 0;
 
+  transition: transform 0.2s ease-in, opacity 0.2s;
+  transform: translate3d(0, 100%, 0);
   &__link {
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 1.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0.5rem;
+    @include mixins.transition(background-color);
 
     svg {
       width: 100%;
@@ -42,51 +37,63 @@
       @include mixins.color-map(stroke, text2);
       @include mixins.transition(stroke);
     }
+
+    @include mixins.respond-above(variables.$laptop) {
+      &:first-child {
+        border-top-right-radius: variables.$radius;
+      }
+      &:last-child {
+        border-bottom-right-radius: variables.$radius;
+      }
+    }
   }
 
   &__link--twitter {
     @extend .post-share-bar__link;
 
-    svg {
-      &:hover,
-      &:active {
-        stroke: variables.$tw;
+    &:hover,
+    &:active {
+      background-color: variables.$tw;
+      svg {
+        stroke: #fff;
       }
     }
   }
 
   &__link--facebook {
     @extend .post-share-bar__link;
 
-    svg {
-      &:hover,
-      &:active {
-        stroke: variables.$fb;
+    &:hover,
+    &:active {
+      background-color: variables.$fb;
+      svg {
+        stroke: #fff;
       }
     }
   }
 
   &__link--linkedin {
     @extend .post-share-bar__link;
 
-    svg {
-      &:hover,
-      &:active {
-        stroke: variables.$li;
+    &:hover,
+    &:active {
+      background-color: variables.$li;
+      svg {
+        stroke: #fff;
       }
     }
   }
 
   &__link--copy {
     @extend .post-share-bar__link;
-    @include mixins.color-map(color, text2);
-
-    svg {
-      @include mixins.color-map(stroke, text2);
-
-      &:hover,
-      &:active {
-        @include mixins.color-map(stroke, primary);
+    &:hover,
+    &:active {
+      @include mixins.color-map(background-color, primary);
+      svg {
+        stroke: #fff;
+        :root[color-mode='dark'] & {
+          stroke: #000;
+        }
       }
     }
   }
@@ -96,20 +103,9 @@
     bottom: initial;
     flex-direction: column;
     width: initial;
-    margin: 0;
-    margin-left: -200px;
+    border-bottom: none;
     border-top-right-radius: variables.$radius;
     border-bottom-right-radius: variables.$radius;
-    transform: translate3d(0, -50%, 0);
-
-    &__title,
-    &__link {
-      margin-right: 0;
-      margin-bottom: 1rem;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+    transform: translate3d(-100%, -50%, 0);
   }
 }

src/scss/layout/_footer.scss

@@ -67,6 +67,15 @@
     display: grid;
     grid-gap: 1rem;
     grid-template-columns: repeat(auto-fit, 1rem);
+
+    @supports not (gap: 1.5rem) {
+      display: flex;
+      flex-wrap: wrap;
+      a {
+        margin: 0.5rem;
+      }
+    }
+
     margin-top: 0.5rem;
     @include mixins.transition(all);
 

src/scss/pages/_content.scss

@@ -49,13 +49,14 @@
     }
 
     a:not(.kg-bookmark-container) {
-      text-decoration: underline from-font;
-      @include mixins.transition(text-decoration-color);
+      @include mixins.color-map(color, primary);
+      @include mixins.transition(color);
     }
 
     a:not(.kg-bookmark-container):hover,
     a:not(.kg-bookmark-container):active {
-      @include mixins.color-map(text-decoration-color, secondary);
+      @include mixins.color-map(color, secondary);
+      @include mixins.color-map(color, secondary);
     }
 
     a:not(.kg-bookmark-container):visited {

src/scss/pages/_post.scss

@@ -100,12 +100,6 @@
       font-size: 1.15rem;
       font-weight: 700;
       @include link.link;
-      // @include mixins.color-map(color, text);
-      // @include mixins.transition(color);
-
-      // &:hover {
-      //   @include mixins.color-map(color, primary);
-      // }
     }
   }