update content
This commit is contained in:
amphineko
parent
aa0095fdac
commit
8ea8e0a2bc
198
src/index.html
198
src/index.html
@ -21,64 +21,69 @@
|
||||
|
||||
<div class="split grid-70">
|
||||
<div class="names">
|
||||
<h1 class="name lang-en">
|
||||
<span class="no-wrap"><a class="chem-element" data-element="neon"
|
||||
href="https://en.wikipedia.org/wiki/Neon">Ne</span>komimi-Relay
|
||||
</h1>
|
||||
</div>
|
||||
<div class="names">
|
||||
<h1 class="name lang-cn">
|
||||
猫耳继电器
|
||||
</h1>
|
||||
<h1 class="name lang-ja">
|
||||
ネコミミ継電器
|
||||
<h1 class="name">
|
||||
<span class="no-wrap">
|
||||
amphi
|
||||
<a class="chem-element" data-element="neon" href="https://en.wikipedia.org/wiki/Neon">ne</a>
|
||||
ko
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="small-labels">
|
||||
<div data-alt="languages" class="label alt">
|
||||
<div class="label-group">
|
||||
<span class="header">language</span>
|
||||
<span class="label">
|
||||
<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 data-alt="status" class="label alt">
|
||||
<i aria-hidden="true" class="fas fa-university"></i>
|
||||
<span class="content">undergraduate</span>
|
||||
|
||||
<br />
|
||||
|
||||
<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 class="small-labels">
|
||||
<a data-alt="organization" class="label alt" href="//futa.moe/maeeko/">
|
||||
<i aria-hidden="true" class="fas fa-map-marker"></i>
|
||||
<span class="title">Maeeko Laboratory</span>
|
||||
<span class="link">//futa.moe/maeeko/</span>
|
||||
</a>
|
||||
<a data-alt="noc-operator" class="label alt" href="#">
|
||||
<i class="fas fa-network-wired"></i>
|
||||
|
||||
<div class="label-group">
|
||||
<span class="header">noc-operator</span>
|
||||
<a class="label" href="#">
|
||||
<i aria-hidden="true" class="fas fa-network-wired"></i>
|
||||
<span class="content">AS205058</span>
|
||||
</a>
|
||||
<a class="label" href="#">
|
||||
<span class="content"><del>AS396303</del></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="small-labels">
|
||||
<div data-alt="platforms::desktop" class="group alt">
|
||||
<div class="label">
|
||||
<i aria-hidden="true" class="fab fa-windows"></i>
|
||||
<span class="content">10</span>
|
||||
</div>
|
||||
<div class="label">
|
||||
<i aria-hidden="true" class="fab fa-apple"></i>
|
||||
<span class="content">high sierra</span>
|
||||
</div>
|
||||
<div class="label">
|
||||
|
||||
<br />
|
||||
|
||||
<div class="label-group">
|
||||
<span class="header">platforms</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fab fa-linux"></i>
|
||||
<span class="content">debian</span>
|
||||
</div>
|
||||
</div>
|
||||
<div data-alt="platforms::handsets" class="group alt">
|
||||
<div class="label">
|
||||
debian gentoo
|
||||
</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fab fa-apple"></i>
|
||||
<i aria-hidden="true" class="fab fa-android"></i>
|
||||
<span class="content">latest</span>
|
||||
</div>
|
||||
iOS macOS
|
||||
</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fab fa-windows"></i>
|
||||
</span>
|
||||
</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>
|
||||
@ -94,25 +99,30 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="split small-labels grid-50 mobile-grid-100">
|
||||
<a data-alt="social network" class="label alt" href="https://github.com/amphineko">
|
||||
<i class="fab fa-github"></i>
|
||||
<div class="split grid-50 mobile-grid-100">
|
||||
<div class="label-group">
|
||||
<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="content">@amphineko</span>
|
||||
</a>
|
||||
<br />
|
||||
<a data-alt="instant messaging" class="label alt" href="https://telegram.me/amphineko">
|
||||
<i class="fab fa-telegram"></i>
|
||||
</div>
|
||||
<div class="label-group">
|
||||
<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="content">@amphineko</span>
|
||||
</a>
|
||||
<a data-alt="social network" class="label alt" href="https://twitter.com/amphineko">
|
||||
<i class="fab fa-twitter"></i>
|
||||
<a class="label" href="https://twitter.com/amphineko">
|
||||
<i aria-hidden="true" class="fab fa-twitter"></i>
|
||||
<span class="title">Twitter</span>
|
||||
<span class="content">amphineko</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block grid-container grid-parent">
|
||||
<div class="split grid-50 mobile-grid-100">
|
||||
@ -123,65 +133,67 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="split small-labels grid-50 mobile-grid-100">
|
||||
<div data-alt="arcade" class="group alt">
|
||||
<div class="label">
|
||||
<i class="fas fa-compact-disc"></i>
|
||||
<span class="title">K/S/T</span>
|
||||
<span class="content">NekoSauc</span>
|
||||
<div class="split grid-50 mobile-grid-100">
|
||||
<div class="label-group">
|
||||
<span class="header alt">music game</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fas fa-compact-disc"></i>
|
||||
Arcade: NekoSauc
|
||||
</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fab fa-accessible-icon"></i>
|
||||
osu! Rukatan
|
||||
</span>
|
||||
</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">
|
||||
<i class="fab fa-steam"></i>
|
||||
<span class="title">Steam</span>
|
||||
<span class="content">NekoSauce</span>
|
||||
</a>
|
||||
<a class="label" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
<span class="title">CS:GO</span>
|
||||
</a>
|
||||
<a data-alt="platform::uplay" class="label alt" href="https://club.ubisoft.com/profile/NekoSauce2">
|
||||
<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 class="label-group">
|
||||
<span class="header alt">Steam</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fab fa-steam"></i>
|
||||
NekoSauce
|
||||
</span>
|
||||
<span class="label">
|
||||
CS:GO
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div data-alt="mobile game" class="label alt">
|
||||
<i class="fas fa-bicycle"></i>
|
||||
<i class="fas fa-plane"></i>
|
||||
<span class="title">Ingress</span>
|
||||
<span class="content"><del>REDACTED</del></span>
|
||||
<div class="label-group">
|
||||
<span class="header alt">Uplay</span>
|
||||
<span class="label">
|
||||
<i aria-hidden="true" class="fas fa-french-fries"></i aria-hidden="true">
|
||||
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 class="section footer shadow">
|
||||
|
||||
<div class="section footer">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="section footer shadow">
|
||||
<a class="hosting" href="//futa.moe/maeeko">
|
||||
<i aria-hidden="true" class="far fa-heart"></i> Hosted by Maeeko Laboratory
|
||||
<span class="link">//futa.moe/maeeko</span>
|
||||
</a>
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,2 +1,2 @@
|
||||
require('./index.html')
|
||||
require('file-loader?name=[path][name].[ext]!./assets/images/amphineko.png')
|
||||
import './index.html'
|
||||
import 'file-loader?name=[path][name].[ext]!./assets/images/amphineko.png'
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
box-shadow: 0 0 0.1em 0.1em rgba(0, 0, 0, 0.05);
|
||||
color: #fff;
|
||||
margin-left: -0.35em;
|
||||
margin-right: 0.1em;
|
||||
margin-right: -0.25em;
|
||||
padding: 0.2em 0.1em 0.2em 0.35em;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.header {
|
||||
.section.header {
|
||||
background: rgba(0, 0, 0, 0.075);
|
||||
// box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
|
||||
// margin-top: -3.2em;
|
||||
@ -6,11 +6,11 @@
|
||||
padding-bottom: 1.4em;
|
||||
}
|
||||
|
||||
.header .split {
|
||||
.section.header .split {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.header .name {
|
||||
.section.header .name {
|
||||
color: #f5f5f5;
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
@ -20,11 +20,11 @@
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
.header .name .chem-element {
|
||||
.section.header .name .chem-element {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header .name::after {
|
||||
.section.header .name::after {
|
||||
bottom: 0em;
|
||||
color: #aaa;
|
||||
display: inline-block;
|
||||
@ -32,19 +32,19 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header .name.lang-cn::after {
|
||||
.section.header .name.lang-cn::after {
|
||||
content: 'zh-CN';
|
||||
}
|
||||
|
||||
.header .name.lang-en::after {
|
||||
.section.header .name.lang-en::after {
|
||||
content: 'en-US';
|
||||
}
|
||||
|
||||
.header .name.lang-ja::after {
|
||||
.section.header .name.lang-ja::after {
|
||||
content: 'ja-JP';
|
||||
}
|
||||
|
||||
.header .picture {
|
||||
.section.header .picture {
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.15);
|
||||
@ -53,6 +53,6 @@
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
.header .picture-container {
|
||||
.section.header .picture-container {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
@ -1,69 +1,45 @@
|
||||
.small-labels {
|
||||
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 {
|
||||
.label-group {
|
||||
display: inline-block;
|
||||
margin: 1.25em 0;
|
||||
padding: 0 0.25em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.small-labels .group>*, .small-labels>* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.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);
|
||||
.label-group .header {
|
||||
color: white;
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user