diff --git a/README.md b/README.md index 1b7efc1..68f5943 100644 --- a/README.md +++ b/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 diff --git a/src/assets/images/amphineko.png b/src/assets/images/amphineko.png index e1f4b53..9ff62d8 100644 Binary files a/src/assets/images/amphineko.png and b/src/assets/images/amphineko.png differ diff --git a/src/assets/images/amphineko@1x.jpg b/src/assets/images/amphineko@1x.jpg index a5248c1..fef3484 100644 Binary files a/src/assets/images/amphineko@1x.jpg and b/src/assets/images/amphineko@1x.jpg differ diff --git a/src/assets/images/amphineko@1x.webp b/src/assets/images/amphineko@1x.webp new file mode 100644 index 0000000..5d7c591 Binary files /dev/null and b/src/assets/images/amphineko@1x.webp differ diff --git a/src/assets/images/badcable.png b/src/assets/images/badcable.png deleted file mode 100644 index 696661f..0000000 Binary files a/src/assets/images/badcable.png and /dev/null differ diff --git a/src/assets/images/plus.svg b/src/assets/images/plus.svg index 93b42d0..4cc6141 100644 --- a/src/assets/images/plus.svg +++ b/src/assets/images/plus.svg @@ -16,16 +16,16 @@ - + - + - + diff --git a/src/index.css b/src/index.css index 3073ba9..98dab7c 100644 --- a/src/index.css +++ b/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; } diff --git a/src/index.html b/src/index.html index 5c7eed8..0e2a9c7 100644 --- a/src/index.html +++ b/src/index.html @@ -13,8 +13,10 @@
- picture of amphineko + + + picture of amphineko +
diff --git a/src/stylesheets/header.css b/src/stylesheets/header.css index b12f084..6cce44f 100644 --- a/src/stylesheets/header.css +++ b/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 { diff --git a/webpack.config.js b/webpack.config.js index 1385a6f..5aecf1e 100644 --- a/webpack.config.js +++ b/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]'