Merge branch 'master' into fontawesome-pro

README.md

@@ -6,7 +6,7 @@ Visit https://amphineko.github.io/amphineko/ for live deployment of `master` bra
 
 Text contents are mainly located at `index.html`. To replace the texts and the picture (`amphineko.png`), can be easily done by editing this file. 
 
-For furthermore modification, including color settings and layouts, check `index.scss` and `stylesheets/*.scss`. Don't forget to run `webpack` to rebuild SASS files and reflect your modification.
+For furthermore modification, including color settings and layouts, check `index.css` and `stylesheets/*.css`. Don't forget to run `webpack` to rebuild files and reflect your modification.
 
 ---
 
@@ -16,7 +16,27 @@ For furthermore modification, including color settings and layouts, check `index
 
 大部分的文本内容储存在 `index.html` 中，修改这个文件即可更改页面的主图片和文本。
 
-若要进行更进一步的修改（如配色方案与页面布局），请编辑 `index.scss` 与 `stylesheets/*.scss`。完事了别忘记 `webpack` 一下来重新编译 SASS 使更改生效。
+若要进行更进一步的修改（如配色方案与页面布局），请编辑 `index.css` 与 `stylesheets/*.css`。完事了别忘记 `webpack` 一下来重新编译使更改生效。
+
+## warning
+
+This repository contains copyright content, including the profile picture `amphineko.png`, `badcable.png` etc.
+
+For example, this following image shown on the bottom-right of the header:
+
+![badcable.png](https://github.com/amphineko/amphineko/blob/39830d5c28537bd2f76067e1793f26bc121f38e1/src/assets/images/badcable.png?raw=true)
+
+These assets are specially licensed to the repository owner only.
+
+You should replace these assets with your own images, all of them, before deploying to your websites.
+
+---
+
+请注意，本库中包含版权内容，包括 `amphineko.png`、`badcable.png` 等。
+
+如上例所给出的显示于页面头部右下角的图片，这些图片都是特别而仅授权给本代码库拥有者使用的。
+
+你应该在部署到你的网站或分发之前，将这些所有的版权图片替换为你自己的图片。
 
 ## build
 
@@ -29,12 +49,6 @@ npm run build
 
 You may check your `NODE_ENV` before executing `npm install .` to ensure `devDependencies` are installed.
 
-`install` might be pretty hard for Windows users who have poor connections to GitHub (for some well-known reasons), while `npm` is trying to fetch `node-sass-binaries` on GitHub.
-
-```
-npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass
-```
-
 ---
 
 运行下面的指令即可完成编译这个仓库。
@@ -46,12 +60,6 @@ npm run build
 
 运行 `npm install .` 前，你也许应该检查一下 `NODE_ENV` 来确保 `devDependencies` 被正确安装。
 
-直接访问 GitHub 有困难的 Windows 用户在 `install` 时，可能会遇到获取 GitHub 上的 `node-sass-binaries` 导致的问题。
-
-```
-npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass
-```
-
 ## known "issue"
 
 The chemical symbol in the name may flash on page load, especially on Chrome.  

src/assets/images/graph-paper.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg>

src/index.html

@@ -209,14 +209,14 @@
                     </figure>
 
                     <div class="label-group">
-                        <span class="header alt">fps</span>
+                        <span class="header alt"><i aria-hidden="true" class="fas fa-tag"></i>fps</span>
 
                         <span class="label">Counter-Strike Global Offensive</span>
                         <span class="label">Rainbow Six Siege</span>
                     </div>
 
                     <div class="label-group">
-                        <span class="header alt">simulation</span>
+                        <span class="header alt"><i aria-hidden="true" class="fas fa-tag"></i>simulation</span>
 
                         <span class="label">
                             <i aria-hidden="true" class="fal fa-city"></i>
@@ -241,7 +241,7 @@
                     </div>
 
                     <div class="label-group">
-                        <span class="header alt">rhythm</span>
+                        <span class="header alt"><i aria-hidden="true" class="fas fa-tag"></i>rhythm</span>
 
                         <span class="label">
                             <i aria-hidden="true" class="fad fa-turntable"></i>

src/stylesheets/identities.css

@@ -10,7 +10,7 @@ figure.identities:last-child {
 figure.identities figcaption {
     color: #777;
     line-height: 1.5em;
-    padding: 0 1em;
+    padding: 0 2.25em;
 }
 
 figure.identities ul {
@@ -29,14 +29,14 @@ figure.identities ul li a {
     display: block;
     font-size: 1.1em;
     line-height: 1.75em;
-    padding: 0.5em 1em;
+    padding: 0.5em 0.25em;
     text-decoration: none;
-    transition-duration: .5s;
+    transition-duration: .25s;
 }
 
 figure.identities ul li a:hover {
-    background-color: rgba(0, 0, 0, .015);
+    background-color: rgba(1, 105, 124, .01);
-    box-shadow: 0.1em 0.1em 0.25em #01697c1a, -0.1em -0.1em 0.25em #01697c26;
+    box-shadow: inset 0 -0.5em 0.5em -0.5em rgba(1, 105, 124, .1);
 }
 
 figure.identities ul li a i {
@@ -53,16 +53,20 @@ figure.identities ul li a .fake-link {
 /* shutdown */
 
 figure.identities ul li.shutdown a {
-    background: rgba(0, 0, 0, 0.1);
     cursor: not-allowed;
     text-decoration: line-through;
 }
 
 figure.identities ul li.shutdown a:hover {
-    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: inset 0 -0.5em 0.5em -0.5em #C93756;
     color: #ddd;
 }
 
 figure.identities ul li.shutdown a .fake-link {
     text-decoration: line-through;
+    transition-duration: .25s;
+}
+
+figure.identities ul li.shutdown a:hover .fake-link {
+    color: #ddd;
 }

src/stylesheets/intro.css

@@ -32,22 +32,25 @@
     padding: 0.5em 0.5em;
 }
 
-.intro figure.identities + .label-group {
+.intro .label-group {
+    border-left: 0.25em solid #006080;
     margin-top: 2em;
+    width: 100%;
 }
 
 .intro .label-group .header.alt {
     color: #777;
-    margin-left: 1.5em;
+    margin-left: 1em;
+}
+
+.intro .label-group .header.alt .fa-tag {
+    transform: rotate(-15deg);
+    margin-right: 0.5em;
 }
 
 .intro .label-group .label {
     background: transparent;
-    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
+    box-shadow: inset 0 -.25em .25em -.25em rgba(1, 105, 124, 0.5);
+    margin: 0 0.25em;
     transition-duration: .5s;
 }
-
-.intro .label-group .label:hover {
-    background-color: rgba(0, 0, 0, .015);
-    box-shadow: 0.1em 0.1em 0.25em #01697c1a, -0.1em -0.1em 0.25em #01697c26;
-}