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; }