MoeJue/DropOut
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yuki540 2018-06-19 20:01:44 +09:00
parent 740fc2671c
commit bcf3976931
6 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

4
public/index.html
View File

@ -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">

2
public/sw.js
View File

@ -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',

7
src/scss/modules/pc/_top-page.scss
View File

@ -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 ***/

7
src/scss/modules/sp/_top-page.scss
View File

@ -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 ***/

16
src/scss/modules/tablet/_top-page.scss
View File

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