Merge branch 'master' into fontawesome-pro

README.md

@@ -1,46 +1,50 @@
 # ~/amphineko
 
-This repository is a development copy of my homepage (https://futa.moe/amphineko/), which can be used as a template.
+This repository is the repository of my homepage (https://futa.moe/amphineko/) that can be used as a template.
 
-Visit https://amphineko.github.io/amphineko/ for live deployment of `master` branch.
+Visit https://amphineko.github.io/amphineko/ for a live deployment of the `master` branch.
 
-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. 
+Text contents are mainly located in `index.html`. Simply edit this file to replace the texts and the picture.
 
-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.
+For further modifications, including color settings, background images, and layouts, check `index.css` and `stylesheets/*.css`. Don't forget to run an `npm run build` to rebuild files and reflect your modification.
 
 ---
 
-这里是 https://futa.moe/amphineko/ 的开发版本，也可以用来作为制作页面的模版。
+这里是 https://futa.moe/amphineko/ 的代码库，也可以用来作为制作页面的模版。
 
 访问 https://amphineko.github.io/amphineko/ 可以查看 `master` 分支的最新部署。
 
 大部分的文本内容储存在 `index.html` 中，修改这个文件即可更改页面的主图片和文本。
 
-若要进行更进一步的修改（如配色方案与页面布局），请编辑 `index.css` 与 `stylesheets/*.css`。完事了别忘记 `webpack` 一下来重新编译使更改生效。
+若要进行更进一步的修改（如配色方案、背景图片与页面布局），请编辑 `index.css` 与 `stylesheets/*.css`。完事了别忘记 `npm run build` 一下来重新编译使更改生效。
 
 ## warning
 
-This repository contains copyright content, including the profile picture `amphineko.png`, `badcable.png` etc.
+This repository contains copyright content, including the profile picture `amphineko.png`, `badcable.png`, etc. These assets are specially licensed to the repository owner only.
 
-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.
+You should replace these assets with your images, all of them, before deploying to your websites.
 
 ---
 
-请注意，本库中包含版权内容，包括 `amphineko.png`、`badcable.png` 等。
-
-如上例所给出的显示于页面头部右下角的图片，这些图片都是特别而仅授权给本代码库拥有者使用的。
+请注意，本库中包含版权内容，包括 `amphineko.png`、`badcable.png` 等。这些图片都是特别而仅授权给本代码库拥有者使用的。
 
 你应该在部署到你的网站或分发之前，将这些所有的版权图片替换为你自己的图片。
 
+## help wanted!
+
+This project was created with little knowledge of Web development. Misuses of HTML tags, CSS rules, and incorrect document writing are just everywhere. Please don't hesitate to send pull requests when you find any incorrectness or improvements.
+
+You may also see [issues](https://github.com/amphineko/amphineko/issues) to find ongoing problems.
+
+---
+
+我在开发时并没有拥有很多 Web 开发的知识。现在这里的 HTML 标签、CSS 规则的错误使用和不正确的文件编写到处都是。请帮助我修复这些问题，也欢迎提出新的改进。
+
+同时你可以在 [issues](https://github.com/amphineko/amphineko/issues) 里找到现在正在处理的问题。
+
 ## build
 
-To build this repository, run these following commands.
+To build this project, run these following commands.
 
 ```
 npm install .
@@ -63,8 +67,8 @@ npm run build
 ## known "issue"
 
 The chemical symbol in the name may flash on page load, especially on Chrome.  
-This is a bug specific to Chrome (and Blink browsers). However this won't be fixed, because it's caused by Chrome and left not fixed for years.  
-Check out this issue for solution if this bothers you. (Thanks to @Nyaasu66)
+This is a bug specific to Chrome (and Blink browsers). However, this won't be fixed, because it's caused by Chrome and left not fixed for years.  
+Check out this issue for a solution if this bothers you. (Thanks to @Nyaasu66)
 
 https://github.com/amphineko/amphineko/issues/15
 

src/assets/images/plus.svg

@@ -16,16 +16,16 @@
 
         <pattern id="Tile" x="0" y="0" width="128" height="128" patternUnits="userSpaceOnUse">
             <rect fill="url(#ShapeT)" height="64" width="64" x="0" y="0">
-                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 32 32" to="0 32 32" dur="16s" repeatCount="indefinite"/>
+                <!-- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 32 32" to="0 32 32" dur="16s" repeatCount="indefinite"/> -->
             </rect>
 
             <rect fill="url(#ShapeTri)" height="64" width="64" x="64" y="64">
-                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 96 96" to="360 96 96" dur="8s" repeatCount="indefinite"/>
+                <!-- <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 96 96" to="360 96 96" dur="8s" repeatCount="indefinite"/> -->
             </rect>
         </pattern>
     </defs>
 
-    <g filter="url(#noise)">
+    <g transform="rotate(-15)">
         <rect fill="url(#Tile)" height="128" width="128" x="0" y="0" />
         <rect fill="url(#Tile)" height="128" width="128" x="128" y="128" />
     </g>

src/index.css

@@ -14,7 +14,7 @@
 @import 'stylesheets/labels.css';
 
 body {
-    background: url(./assets/images/plus.svg) #044F67;
+    background: url(./assets/images/plus.svg) #044f67;
     background-size: 8em;
 
     font-size: 1em;
@@ -28,7 +28,8 @@ body {
 }
 
 html {
-    font-family: 'Helvetica Neue', Helvetica, Arial, PingFangTC-Light, 'Microsoft YaHei', 微软雅黑, 'STHeiti Light', STXihei, '华文细黑', Heiti, 黑体, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, PingFangTC-Light, 'Microsoft YaHei', 微软雅黑, 'STHeiti Light',
+        STXihei, '华文细黑', Heiti, 黑体, sans-serif;
     margin: 0;
     padding: 0;
 }
@@ -46,19 +47,24 @@ html {
     display: inline-block;
 }
 
-#container, #container>*:first-child {
+#container,
+#container > *:first-child {
     border-top-left-radius: 2em;
 }
 
-#container, #container>*:last-child, #container>*:last-child>*:last-child {
+#container,
+#container > *:last-child,
+#container > *:last-child > *:last-child {
     border-bottom-right-radius: 2em;
 }
 
-.header .small-labels .group::before, .header .small-labels .label::before {
+.header .small-labels .group::before,
+.header .small-labels .label::before {
     color: #eee;
 }
 
-.identities .small-labels .group::before, .identities .small-labels .label::before {
+.identities .small-labels .group::before,
+.identities .small-labels .label::before {
     color: #333;
 }
 
@@ -71,11 +77,14 @@ html {
         padding: 0;
     }
 
-    #container, #container>*:first-child {
+    #container,
+    #container > *:first-child {
         border-top-left-radius: 0;
     }
 
-    #container, #container>*:last-child, #container>*:last-child>*:last-child {
+    #container,
+    #container > *:last-child,
+    #container > *:last-child > *:last-child {
         border-bottom-right-radius: 0;
     }
 

src/index.html

@@ -13,8 +13,10 @@
         <div class="section header grid-container grid-parent">
             <div class="split picture-container grid-40">
                 <a href="${require('./assets/images/amphineko.png')}">
-                    <img alt="picture of amphineko" class="picture"
-                        src="${require('./assets/images/amphineko@1x.jpg')}">
+                    <picture class="picture">
+                        <source type="image/webp" srcset="${require('./assets/images/amphineko@1x.webp')}" />
+                        <img src="${require('./assets/images/amphineko@1x.jpg')}" alt="picture of amphineko" />
+                    </picture>
                 </a>
             </div>
 

src/stylesheets/header.css

@@ -1,25 +1,18 @@
 .section.header {
-    background: url(../assets/images/badcable.png) rgba(0, 0, 0, 0.75);
-    background-position: bottom right;
-    background-repeat: no-repeat;
-    background-size: auto 40%;
-    padding-top: 1.6em;
-    padding-bottom: 1.4em;
+    align-items: center;
+    display: flex;
+}
+
+@media (max-width: 768px) {
+    .section.header {
+        flex-direction: column;
+    }
 }
 
 .section.header .split {
     padding: 0 1em;
 }
 
-.section.header .splitter {
-    display: block;
-    border-left: 1em solid rgba(0, 0, 0, 0.15);
-    width: 1em;
-
-    /* this should be calculated from right panel height */
-    height: 24em;
-}
-
 .section.header .name {
     color: #f5f5f5;
     display: inline-block;
@@ -27,7 +20,7 @@
     line-height: 1.25em;
     margin: 0.25em 0;
     margin-right: 0.5em;
-    text-shadow: 2px 2px 4px rgba(0,0,0,.25);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
 }
 
 .section.header .name .chem-element {
@@ -56,11 +49,17 @@
 
 .section.header .picture {
     background: white;
+    border: 0.5em solid white;
     border-radius: 50%;
     box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15);
+    display: block;
+    overflow: hidden;
+}
+
+.section.header .picture img {
     box-sizing: content-box;
-    padding: 3%;
-    width: 94%;
+    height: 100%;
+    width: 100%;
 }
 
 .section.header .picture-container {

webpack.config.js

@@ -19,7 +19,7 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.(eot|jpg|png|svg|ttf|woff2?)$/,
+                test: /\.(eot|jpg|png|svg|ttf|webp|woff2?)$/,
                 loader: 'file-loader',
                 options: {
                     name: 'assets/[name].[contenthash:8].[ext]'