xtaodada/Homepage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
amphineko 2019-12-07 04:00:25 +08:00
parent aa0095fdac
commit 8ea8e0a2bc
No known key found for this signature in database
GPG Key ID: 4582E6587852EF42
5 changed files with 168 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/index.html
View File

@ -21,64 +21,69 @@
<div class="split grid-70"> <div class="split grid-70">
<div class="names"> <div class="names">
<h1 class="name lang-en"> <h1 class="name">
<span class="no-wrap"><a class="chem-element" data-element="neon" <span class="no-wrap">
href="https://en.wikipedia.org/wiki/Neon">Ne</span>komimi-Relay amphi
</h1> <a class="chem-element" data-element="neon" href="https://en.wikipedia.org/wiki/Neon">ne</a>
</div> ko
<div class="names"> </span>
<h1 class="name lang-cn">
猫耳继电器
</h1>
<h1 class="name lang-ja">
ネコミミ継電器
</h1> </h1>
</div> </div>
<div class="small-labels"> <div class="label-group">
<div data-alt="languages" class="label alt"> <span class="header">language</span>
<span class="label">
<i aria-hidden="true" class="fas fa-language"></i> <i aria-hidden="true" class="fas fa-language"></i>
<span class="title">汉语 & 漢語 & English</span> 汉语
</span>
<span class="label">漢語</span>
<span class="label">English</span>
</div> </div>
<div data-alt="status" class="label alt">
<i aria-hidden="true" class="fas fa-university"></i> <br />
<span class="content">undergraduate</span>
<div class="label-group">
<span class="header">project</span>
<span class="label">
<i aria-hidden="true" class="fas fa-box"></i>
Maeeko Laboratory
</span>
</div> </div>
</div>
<div class="small-labels"> <div class="label-group">
<a data-alt="organization" class="label alt" href="//futa.moe/maeeko/"> <span class="header">noc-operator</span>
<i aria-hidden="true" class="fas fa-map-marker"></i> <a class="label" href="#">
<span class="title">Maeeko Laboratory</span> <i aria-hidden="true" class="fas fa-network-wired"></i>
<span class="link">//futa.moe/maeeko/</span>
</a>
<a data-alt="noc-operator" class="label alt" href="#">
<i class="fas fa-network-wired"></i>
<span class="content">AS205058</span> <span class="content">AS205058</span>
</a>
<a class="label" href="#">
<span class="content"><del>AS396303</del></span> <span class="content"><del>AS396303</del></span>
</a> </a>
</div> </div>
<div class="small-labels">
<div data-alt="platforms::desktop" class="group alt"> <br />
<div class="label">
<i aria-hidden="true" class="fab fa-windows"></i> <div class="label-group">
<span class="content">10</span> <span class="header">platforms</span>
</div> <span class="label">
<div class="label">
<i aria-hidden="true" class="fab fa-apple"></i>
<span class="content">high sierra</span>
</div>
<div class="label">
<i aria-hidden="true" class="fab fa-linux"></i> <i aria-hidden="true" class="fab fa-linux"></i>
<span class="content">debian</span> debian gentoo
</div> </span>
</div> <span class="label">
<div data-alt="platforms::handsets" class="group alt">
<div class="label">
<i aria-hidden="true" class="fab fa-apple"></i> <i aria-hidden="true" class="fab fa-apple"></i>
<i aria-hidden="true" class="fab fa-android"></i> iOS macOS
<span class="content">latest</span> </span>
</div> <span class="label">
<i aria-hidden="true" class="fab fa-windows"></i>
</span>
</div> </div>
<div class="label-group">
<span class="header">indents</span>
<span class="label">
<i aria-hidden="true" class="fas fa-i-cursor"></i>
spaces
</span>
</div> </div>
</div> </div>
</div> </div>
@ -94,25 +99,30 @@
</p> </p>
</div> </div>
<div class="split small-labels grid-50 mobile-grid-100"> <div class="split grid-50 mobile-grid-100">
<a data-alt="social network" class="label alt" href="https://github.com/amphineko"> <div class="label-group">
<i class="fab fa-github"></i> <span class="header alt">open-source</span>
<a class="label" href="https://github.com/amphineko">
<i aria-hidden="true" class="fab fa-github"></i>
<span class="title">GitHub</span> <span class="title">GitHub</span>
<span class="content">@amphineko</span> <span class="content">@amphineko</span>
</a> </a>
<br /> </div>
<a data-alt="instant messaging" class="label alt" href="https://telegram.me/amphineko"> <div class="label-group">
<i class="fab fa-telegram"></i> <span class="header alt">social</span>
<a class="label" href="https://telegram.me/amphineko">
<i aria-hidden="true" class="fab fa-telegram"></i aria-hidden="true">
<span class="title">Telegram</span> <span class="title">Telegram</span>
<span class="content">@amphineko</span> <span class="content">@amphineko</span>
</a> </a>
<a data-alt="social network" class="label alt" href="https://twitter.com/amphineko"> <a class="label" href="https://twitter.com/amphineko">
<i class="fab fa-twitter"></i> <i aria-hidden="true" class="fab fa-twitter"></i>
<span class="title">Twitter</span> <span class="title">Twitter</span>
<span class="content">amphineko</span> <span class="content">amphineko</span>
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="block grid-container grid-parent"> <div class="block grid-container grid-parent">
<div class="split grid-50 mobile-grid-100"> <div class="split grid-50 mobile-grid-100">
@ -123,65 +133,67 @@
</p> </p>
</div> </div>
<div class="split small-labels grid-50 mobile-grid-100"> <div class="split grid-50 mobile-grid-100">
<div data-alt="arcade" class="group alt"> <div class="label-group">
<div class="label"> <span class="header alt">music game</span>
<i class="fas fa-compact-disc"></i> <span class="label">
<span class="title">K/S/T</span> <i aria-hidden="true" class="fas fa-compact-disc"></i>
<span class="content">NekoSauc</span> Arcade: NekoSauc
</span>
<span class="label">
<i aria-hidden="true" class="fab fa-accessible-icon"></i>
osu! Rukatan
</span>
</div> </div>
</div>
<a data-alt="?" class="label alt" href="https://osu.ppy.sh/u/Rukatan">
<i class="fab fa-accessible-icon"></i>
<span class="title">osu!</span>
<span class="content">Rukatan</span>
</a>
<br />
<a data-alt="platform::steam" class="label alt" href="https://steamcommunity.com/id/Amphineko"> <div class="label-group">
<i class="fab fa-steam"></i> <span class="header alt">Steam</span>
<span class="title">Steam</span> <span class="label">
<span class="content">NekoSauce</span> <i aria-hidden="true" class="fab fa-steam"></i>
</a> NekoSauce
<a class="label" href="#"> </span>
<i class="fas fa-heart"></i> <span class="label">
<span class="title">CS:GO</span> CS:GO
</a> </span>
<a data-alt="platform::uplay" class="label alt" href="https://club.ubisoft.com/profile/NekoSauce2"> </div>
<i class="fas fa-user-check"></i>
<span class="title">Uplay</span>
<span class="content">NekoSauce2</span>
</a>
<a class="label" href="#">
<i class="fas fa-heart"></i>
<span class="title">R6:S</span>
</a>
<br />
<div data-alt="mobile game" class="label alt"> <div class="label-group">
<i class="fas fa-bicycle"></i> <span class="header alt">Uplay</span>
<i class="fas fa-plane"></i> <span class="label">
<span class="title">Ingress</span> <i aria-hidden="true" class="fas fa-french-fries"></i aria-hidden="true">
<span class="content"><del>REDACTED</del></span> AtomicAkarin
</span>
<span class="label">
R6:S
</span>
</div>
<div class="label-group">
<span class="header alt">Niantic</span>
<span class="label">
<i aria-hidden="true" class="fas fa-plane"></i>
Ingress <del>[CODENAME REDACTED]</del>
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="section footer shadow">
<div class="section footer">
<a class="hosting" href="https://github.com/amphineko/amphineko"> <a class="hosting" href="https://github.com/amphineko/amphineko">
<i aria-hidden="true" class="fas fa-code-branch"></i> Fork this template on GitHub</a> <i aria-hidden="true" class="fas fa-code-branch"></i> Fork this template on GitHub</a>
</div> </div>
<div class="section footer shadow"> <div class="section footer shadow">
<a class="hosting" href="//futa.moe/maeeko"> <a class="hosting" href="//futa.moe/maeeko">
<i aria-hidden="true" class="far fa-heart"></i> Hosted by Maeeko Laboratory <i aria-hidden="true" class="far fa-heart"></i> Hosted by Maeeko Laboratory
<span class="link">//futa.moe/maeeko</span> <span class="link">//futa.moe/maeeko</span>
</a> </a>
<div class="copyright"> <div class="copyright">
<i class="fas fa-exclamation-triangle"></i> <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
Copyright © 2015-2019 amphineko. Illustrations have their own licenses. Copyright © 2015-2019 amphineko. Illustrations have their own licenses.
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

4
src/index.js
View File

@ -1,2 +1,2 @@
require('./index.html') import './index.html'
require('file-loader?name=[path][name].[ext]!./assets/images/amphineko.png') import 'file-loader?name=[path][name].[ext]!./assets/images/amphineko.png'

2
src/stylesheets/chem-elements.scss
View File

@ -4,7 +4,7 @@
box-shadow: 0 0 0.1em 0.1em rgba(0, 0, 0, 0.05); box-shadow: 0 0 0.1em 0.1em rgba(0, 0, 0, 0.05);
color: #fff; color: #fff;
margin-left: -0.35em; margin-left: -0.35em;
margin-right: 0.1em; margin-right: -0.25em;
padding: 0.2em 0.1em 0.2em 0.35em; padding: 0.2em 0.1em 0.2em 0.35em;
transition-duration: 0.5s; transition-duration: 0.5s;
} }

20
src/stylesheets/header.scss
View File

@ -1,4 +1,4 @@
.header { .section.header {
background: rgba(0, 0, 0, 0.075); background: rgba(0, 0, 0, 0.075);
// box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125); // box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
// margin-top: -3.2em; // margin-top: -3.2em;
@ -6,11 +6,11 @@
padding-bottom: 1.4em; padding-bottom: 1.4em;
} }
.header .split { .section.header .split {
padding: 0 1em; padding: 0 1em;
} }
.header .name { .section.header .name {
color: #f5f5f5; color: #f5f5f5;
display: inline-block; display: inline-block;
font-weight: 300; font-weight: 300;
@ -20,11 +20,11 @@
text-shadow: 2px 2px 4px rgba(0,0,0,.25); text-shadow: 2px 2px 4px rgba(0,0,0,.25);
} }
.header .name .chem-element { .section.header .name .chem-element {
text-decoration: none; text-decoration: none;
} }
.header .name::after { .section.header .name::after {
bottom: 0em; bottom: 0em;
color: #aaa; color: #aaa;
display: inline-block; display: inline-block;
@ -32,19 +32,19 @@
position: relative; position: relative;
} }
.header .name.lang-cn::after { .section.header .name.lang-cn::after {
content: 'zh-CN'; content: 'zh-CN';
} }
.header .name.lang-en::after { .section.header .name.lang-en::after {
content: 'en-US'; content: 'en-US';
} }
.header .name.lang-ja::after { .section.header .name.lang-ja::after {
content: 'ja-JP'; content: 'ja-JP';
} }
.header .picture { .section.header .picture {
background: white; background: white;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15); box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15);
@ -53,6 +53,6 @@
width: 94%; width: 94%;
} }
.header .picture-container { .section.header .picture-container {
padding: 2em; padding: 2em;
} }

96
src/stylesheets/labels.scss
View File

@ -1,69 +1,45 @@
.small-labels { .label-group {
display: inline-block;
}
.small-labels a {
text-decoration: none;
}
.small-labels .label {
color: #333;
font-weight: 300;
padding: 0.5em 0;
vertical-align: bottom;
}
.small-labels .label .content {
color: #555;
}
.small-labels .label .link {
color: #0063cc;
}
.small-labels .group, .small-labels .label {
display: inline-block; display: inline-block;
margin: 1.25em 0;
padding: 0 0.25em;
position: relative; position: relative;
} }
.small-labels .group>*, .small-labels>* { .label-group .header {
vertical-align: middle; color: white;
} display: block;
.small-labels .label>* {
margin-right: .25em;
}
.small-labels .group .label {
margin: 0;
}
.small-labels>.group, .small-labels>.label {
$small-label-group-padding-left: 0.75em;
background: #eee;
border-radius: 0.35em;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1);
line-height: 1em;
margin: 0.5em;
margin-left: 0;
padding-left: $small-label-group-padding-left;
padding-right: $small-label-group-padding-left;
}
.small-labels>.group.alt, .small-labels>.label.alt {
margin-top: 1.75em;
}
/* label alt text */
.small-labels .group.alt::before, .small-labels .label.alt::before {
content: attr(data-alt);
font-size: 0.8em; font-size: 0.8em;
left: 0; left: 0;
padding: 0;
position: absolute; position: absolute;
text-shadow: 2px 2px 4px rgba(0,0,0,.25); text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.25);
top: -1.75em; top: -1.75em;
} }
.label-group .header.alt {
color: #333;
}
.label-group .label {
background: #eee;
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.1);
color: #333;
display: inline-block;
line-height: 2.2em;
padding: 0 0.6em;
}
.label-group .label:last-child {
$radius: 0.5em;
border-bottom-right-radius: $radius;
border-top-right-radius: $radius;
}
.label-group a.label {
text-decoration: none;
}
.label-group .label i {
margin-right: 0.25em;
}