diff --git a/package.json b/package.json
index 5257afb..a991096 100644
--- a/package.json
+++ b/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",
diff --git a/public/index.html b/public/index.html
index 70a61e1..d31ef5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -398,6 +398,10 @@
+
+
+
+
diff --git a/public/sw.js b/public/sw.js
index 7c2e43c..0e5496d 100644
--- a/public/sw.js
+++ b/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',
diff --git a/src/scss/modules/pc/_top-page.scss b/src/scss/modules/pc/_top-page.scss
index 4810495..89ddd6d 100644
--- a/src/scss/modules/pc/_top-page.scss
+++ b/src/scss/modules/pc/_top-page.scss
@@ -260,8 +260,8 @@
/*** sns ***/
.top-page__sns {
position: absolute;
- top: calc(50% - 75px); left: 0px;
- width: 50px; height: 150px;
+ top: calc(50% - 100px); left: 0px;
+ 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 ***/
diff --git a/src/scss/modules/sp/_top-page.scss b/src/scss/modules/sp/_top-page.scss
index 5da0e7d..5d91a78 100644
--- a/src/scss/modules/sp/_top-page.scss
+++ b/src/scss/modules/sp/_top-page.scss
@@ -259,8 +259,8 @@
/*** sns ***/
.top-page__sns {
position: absolute;
- bottom: 0; left: calc(50% - 75px);
- width: 150px; height: 50px;
+ bottom: 0; left: calc(50% - 100px);
+ 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 ***/
diff --git a/src/scss/modules/tablet/_top-page.scss b/src/scss/modules/tablet/_top-page.scss
index 16b6575..960b3fc 100644
--- a/src/scss/modules/tablet/_top-page.scss
+++ b/src/scss/modules/tablet/_top-page.scss
@@ -259,17 +259,18 @@
/*** sns ***/
.top-page__sns {
position: absolute;
- top: calc(50% - 75px); left: 0px;
- width: 50px; height: 150px;
+ bottom: 0; left: calc(50% - 100px);
+ 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; }