Renew partners

package.json

@@ -17,9 +17,8 @@
     "global": "^4.4.0",
     "gridsome": "^0.7.14",
     "gridsome-plugin-remark-prismjs-all": "^0.3.5",
-    "gsap": "^3.5.1",
+    "gsap": "3.4.0",
     "prismjs": "^1.20.0",
-    "sharp": "^0.26.2",
     "swiper": "^6.0.4",
     "vercel": "^20.1.1",
     "vue": "^2.0.0",

src/assets/scss/_index.scss

@@ -1,4 +1,6 @@
 @import 'color';
 @import 'font';
 @import 'breakpoint';
-@import 'wordpress-article';
+@import 'wordpress-article';
+@import 'transition';
+@import 'mixins';

src/assets/scss/_mixins.scss

@@ -0,0 +1,53 @@
+@mixin linkList {
+  .c-footer-list {
+    list-style: none;
+    padding-left: 14px;
+
+    &__item {
+      position: relative;
+      font-size: 0.87rem;
+      line-height: 18px;
+      margin-bottom: 1.4rem;
+      &:before {
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        content: '';
+        display: block;
+        color: #fff;
+        width: 10px;
+        height: 1px;
+        background: $mid-gray-2;
+        transition: $soease;
+        transform: scaleX(0);
+        transform-origin: left center;
+      }
+      &:hover::before {
+        transform: scaleX(1);
+        transform-origin: right center;
+      }
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        content: '';
+        display: block;
+        color: #fff;
+        width: 10px;
+        height: 1px;
+        background: $mid-gray-2;
+        transition: $soease;
+        opacity: 0.5;
+      }
+    } //&__list-item
+
+    &__link {
+      text-decoration: none;
+      color: $white;
+      transition: $soease;
+      &:hover {
+        color: $mid-gray-2;
+      }
+    }
+  } // c-footer-list
+}

src/assets/scss/_transition.scss

@@ -0,0 +1 @@
+$soease: all 0.4s cubic-bezier(0.76, 0, 0.3, 1);

src/components/CallToAction.vue

@@ -295,14 +295,15 @@
   }
   &::before {
     content: 'Office Hours';
+    filter: blur(2px);
     position: absolute;
     display: block;
     z-index: 0;
     left: 0;
     top: 24px;
     right: 0;
     bottom: 0;
-    opacity: 0.1;
+    opacity: 0.08;
     font-family: $font-en-light;
     font-size: 15vw;
     transition: all 0.4s cubic-bezier(0.76, 0, 0.3, 1);
@@ -312,12 +313,14 @@
     }
     @include media-breakpoint-down(sm) {
       top: 20%;
-      font-size: 14vw;
+      font-size: 14.5vw;
     }
   }
   &:hover::before {
-      opacity: 0.15;
-    }
+    opacity: 0.2;
+    left: 8px;
+    filter: blur(0);
+  }
   // Border
   &::after {
     content: '';

src/components/Footer.vue

@@ -239,37 +239,7 @@ if (process.client) {
 } // c-footer-menu
 
 // メニューのリスト
-.c-footer-list {
-  list-style: none;
-  padding-left: 14px;
-
-  &__item {
-    position: relative;
-    font-size: 0.87rem;
-    line-height: 28px;
-    margin-bottom: 0.5rem;
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: -12px;
-      content: '';
-      display: block;
-      color: #fff;
-      width: 5px;
-      height: 1px;
-      background: $mid-gray-2;
-    }
-  } //&__list-item
-
-  &__link {
-    text-decoration: none;
-    color: $white;
-    transition: all 0.3s ease;
-    &:hover {
-      color: $mid-gray-2;
-    }
-  }
-} // c-footer-list
+@include linkList;
 
 .sns-link {
   margin: 16px 0 40px 0;

src/components/FooterBlog.vue

@@ -28,37 +28,5 @@ query ($page: Int) {
 </static-query>
 
 <style lang="scss" scoped>
-// メニューのリスト
-.c-footer-list {
-  list-style: none;
-  padding-left: 14px;
-
-  &__item {
-    position: relative;
-    font-size: 0.87rem;
-    line-height: 18px;
-    margin-bottom: 0.6rem;
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: -12px;
-      content: '';
-      display: block;
-      color: #fff;
-      width: 5px;
-      height: 1px;
-      background: $mid-gray-2;
-    }
-  } //&__list-item
-
-  &__link {
-    text-decoration: none;
-    color: $white;
-    transition: all 0.3s ease;
-    &:hover {
-      color: $mid-gray-2;
-    }
-  }
-} // c-footer-list
-
+  @include linkList;
 </style>

src/components/FooterWorks.vue

@@ -31,37 +31,5 @@ query ($page: Int) {
 </static-query>
 
 <style lang="scss" scoped>
-// メニューのリスト
-.c-footer-list {
-  list-style: none;
-  padding-left: 14px;
-
-  &__item {
-    position: relative;
-    font-size: 0.87rem;
-    line-height: 18px;
-    margin-bottom: 0.6rem;
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: -12px;
-      content: '';
-      display: block;
-      color: #fff;
-      width: 5px;
-      height: 1px;
-      background: $mid-gray-2;
-    }
-  } //&__list-item
-
-  &__link {
-    text-decoration: none;
-    color: $white;
-    transition: all 0.3s ease;
-    &:hover {
-      color: $mid-gray-2;
-    }
-  }
-} // c-footer-list
-
+  @include linkList;
 </style>