update: SNS欄にインスタグラムを追加

package.json

@@ -1,7 +1,7 @@
 {
   "name": "DropOut",
   "version": "6.0.0",
-  "description": "magical-girl.site version_6.0.0",
+  "description": "magical-girl.site version_6.0.1",
   "main": "webpack.config.js",
   "scripts": {
     "start": "http-server -p 8080 public",

public/index.html

@@ -398,6 +398,10 @@
           <a title="はてなブログ" href="https://yuki540.hatenablog.jp/archive" target="_blank">
             <i class="fas fa-edit"></i>
           </a>
+          <a title="Instagram" href="https://www.instagram.com/yui540net/" target="_blank">
+            <i class="fab fa-instagram"></i>
+          </a>
+        </section>
         </section>
         <section class="top-page__share-btn">
           <a target="_blank" href="http://twitter.com/intent/tweet?url=https://magical-girl.site&text=DropOut 『僕は魔法少女------そう思っていた』 / @yui540">

public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'magical-girl.site_version6.0.0'
+const CACHE_NAME = 'magical-girl.site_version6.0.1'
 const urlsToCache = [
   '/',
   '/stylesheets/font.css',

src/scss/modules/pc/_top-page.scss

@@ -260,8 +260,8 @@
   /*** sns ***/
   .top-page__sns {
     position: absolute;
-    top: calc(50% - 75px); left: 0px;
+    top: calc(50% - 100px); left: 0px;
-    width: 50px; height: 150px;
+    width: 50px; height: 200px;
     background-color: #fff;
     box-shadow: 0 0 5px rgba(0,0,0,0.4);
     border-top-right-radius: 5px;
@@ -305,6 +305,9 @@
       i { font-size: 22px; }
       &::before { background-color: $theme-light-pink; }
     }
+    a:nth-child(4) {
+      &::before { background-color: #C7B3D6; }
+    }
   }
 
   /*** share-btn ***/

src/scss/modules/sp/_top-page.scss

@@ -259,8 +259,8 @@
   /*** sns ***/
   .top-page__sns {
     position: absolute;
-    bottom: 0; left: calc(50% - 75px);
+    bottom: 0; left: calc(50% - 100px);
-    width: 150px; height: 50px;
+    width: 200px; height: 50px;
     background-color: #fff;
     box-shadow: 0 0 5px rgba(0,0,0,0.4);
     border-top-right-radius: 5px;
@@ -306,6 +306,9 @@
       i { font-size: 22px; }
       &::before { background-color: $theme-light-pink; }
     }
+    a:nth-child(4) {
+      &::before { background-color: #C7B3D6; }
+    }
   }
 
   /*** share-btn ***/

src/scss/modules/tablet/_top-page.scss

@@ -259,17 +259,18 @@
   /*** sns ***/
   .top-page__sns {
     position: absolute;
-    top: calc(50% - 75px); left: 0px;
+    bottom: 0; left: calc(50% - 100px);
-    width: 50px; height: 150px;
+    width: 200px; height: 50px;
     background-color: #fff;
     box-shadow: 0 0 5px rgba(0,0,0,0.4);
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     overflow: hidden;
-    transform: translateX(calc(-100% + -5px));
+    transform: translateY(calc(100% + 5px));
     z-index: 1;
 
     a {
+      float: left;
       position: relative;
       display: block;
       width: 50px; height: 50px;
@@ -279,7 +280,7 @@
         top: 0; left: 0;
         content: ""; display: block;
         width: 100%; height: 100%;
-        transform: translateX(-100%);
+        transform: translateY(100%);
         transition: all 0.25s ease 0s;
       }
 
@@ -293,7 +294,7 @@
         color: $theme-light-purple;
       }
     }
-    a:hover:before { transform: translateX(0); }
+    a:hover:before { transform: translateY(0); }
     a:nth-child(1) {
       &::before { background-color: $theme-mint; }
     }
@@ -304,6 +305,9 @@
       i { font-size: 22px; }
       &::before { background-color: $theme-light-pink; }
     }
+    a:nth-child(4) {
+      &::before { background-color: #C7B3D6; }
+    }
   }
 
   /*** share-btn ***/
@@ -396,7 +400,7 @@
     }
 
     /*** sns ***/
-    .top-page__sns { animation: slide-right 0.4s ease 3s forwards; }
+    .top-page__sns { animation: slide-top 0.4s ease 3s forwards; }
     
     /*** share-btn ***/
     .top-page__share-btn { animation: slide-left 0.4s ease 3s forwards; }